## SVG support

Version 2.32

Manual page for SVG_support(PL)

ploticus can produce graphics in SVG format.`` SVG is a vector graphic format supported by Adobe Systems and defined in a W3C spec . SVGs look good because nice fonts are standard, and graphics are easily scaled up or down with no degradation in appearance. SVG can be viewed using MSIE and Netscape 4.x browsers, and can be imported into MS word, MS powerpoint, etc.

SVG files have names ending in `.svg`.`` SVG files can also be compressed for smaller size; these files have names ending in `.svgz`.`` Compression requires zlib and hence may not be available in all ploticus builds.``

## Generating SVG

To generate SVG, use the -svg or -svgz command line option (-svgz gives you compressed svg results).``

  `pl -svgz -tag bars2.pl`

Output files will have an `.svg` or `.svgz` ending by default.`` The -tag option may be used to have a suitable HTML `<EMBED>` tag written to standard output.`` The -zlevel n option may be used to set the compression level to n (0 - 9 where 9 is highest level of compression).``

There are several settings / command line options particularly for use with SVG. See proc settings and/or the pl command line options (svg section).``

## Embedding SVG graphics within HTML

Netscape and MSIE display SVGs using a the Adobe SVG viewer plug-in. To include an SVG graphic in an HTML document, use an `<EMBED>` tag like this:

    <embed src="bars2.svg" name="SVGEmbed" width="500" height="616"
    type="image/svg-xml" pluginspage="http://www.adobe.com/svg/viewer/install/">

The `width` and `height` attributes control the size of the graphic so you can adjust these to resize the graphic if desired (the height/width ratio should remain constant).`` As with the <img> tag, src can be any URL, including CGI invocation.`` As mentioned above, the -tag command line option may be used to generate a suitable html <embed> tag containing appropriate height and width values, for convenience.``

## Examples

Here is a page of some SVG examples (plug-in will be required).`` Notice how the full size graphics are automatically sized to your browser window.``

## Fonts

Default font is `Helvetica`. Postscript font names such as `Times-Roman` and `Courier` may be used.`` Font names containing embedded whitespace may be problematic with ploticus' SVG driver.`` More info

## Clickable maps

Clickmaps are supported in browser environments.`` Use either the -map or -csmap command line option (doesn't matter which).`` Here's an example.`` You can specify a `target` window (similarly to HTML <a target=...>) by using the proc settings svg_linkparms attribute.``

## Mouseover text bubbles / tooltips

Mouseover text bubbles , sometimes called "tooltips", are supported for SVG when viewing in a browser.`` There are two javascript-based methods (both suggested by Jamie Echlin) that can be used:

Method #1: (the default) uses javascript files available as accessories on the ploticus download page.`` Produces SVGs that support mouseover independently (without involving the containing HTML file).`` There are some proc settings attributes that you may want to check out.`` Here's an example pl script that does this.``

Here's how to do this:

- Specify text bubble content using `clickmaplabel` or `clickmaplabeltext` in the plotting proc you're using.`` Specify only the text; no javascript code should be given.``
- Run pl -svg -map ...
- Get the 2 javascript files from the ploticus download page and put them in the same directory as your SVG file
- View the SVG with MS Internet Explorer (or other browsers that support SVG)

There are some unresolved issues with this method...`` The size of the blue box is fixed without regard to text length (you can adjust this in the `GraphPopups.js` code.. see BOX SIZE).`` The location of the blue box is also fixed. There is code in `GraphPopups.js` (see BOX LOCATION) that attempts to place the box near the pointer (a nicer effect), but it doesn't work correctly for smaller-sized graphic results... the blue box is often "off the page" and not visible.``

Method #2: uses a javascript package called overlibmws which extends overlib allowing the popups to appear over the SVG object. With this method it's easy to format the popup, eg you can have HTML elements in the popup, including links and images and so on, through only changing your plot file and not javascript or svg files etc.``

To implement this: Download and unzip overlibmws from http://www.macridesweb.com/oltest/overlibmws.zip

In the containing HTML page include this section in the `<head>` block, making sure that the URLs are valid in your environment:

    <script type="text/javascript" src="mws/overlibmws.js"></script>
    <script type="text/javascript" src="mws/overlibmws_iframe.js"></script>
    <script type="text/javascript" src="mws/overlibmws_hide.js"></script>
    <script type="text/javascript" src="mws/overlibmws_shadow.js"></script>

In the ploticus file use the `clickmaplabel` or `clickmaplabeltext` attribute appropriately, eg. in my example I have:

      clickmaplabeltext: onmouseover='overlib( "Date: <b>@1</b> <BR>Value: <b>@2</b>
          <BR>@3", CAPTION, "Spot Details")' onmouseout='nd();'

Also, you'll need to tell ploticus to not generate the method1 SVG tooltip code by specifying this at the top of your script file:

       #proc settings
       svg_mouseover_js: generic

## Importing SVG into applications

Microsoft Office applications can import SVG graphics.`` On the version I have, import via dragging and dropping works. Import via the "Insert graphic" menu does not.``

## Troubleshooting

The location for downloading the SVG viewer is www.adobe.com/svg/viewer/install . Follow the instructions there for easy installation.`` Then restart your browser.`` If your Netscape browser doesn't display SVG properly when originating via a web server, try accessing an SVG file directly using `file:///`.`` If this works then there is probably a mime types problem with your web server. Ask your web server administrator to add a `mime.types` entry such as this:

      image/svg-xml                   svg svgz

Or with apache you can add lines like this to your .htaccess file:

      AddType image/svg+xml svg
      AddType image/svg+xml svgz

IE and Netscape 4.x support SVG. Netscape 7.x doesn't.`` I have noticed that the SVG viewer plugin works differently for Netscape vs. IE, and that there is some occasional flakiness, at least on my system.`` Netscape seems more likely to default to postage-stamp size graphics when sizes aren't fully specified.``

## Acknowledgement

Many thanks to Bill Traill (`bill@traill.demon.co.uk` ) for initiating ploticus SVG support and writing the original ploticus SVG driver.``
data display engine
Copyright Steve Grubb

Markup created by unroff 1.0, `` `` August 23, 2005.