SVG support


Version 2.33 Jun'06


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 Firefox 1.5+, MSIE and Netscape 4.x browsers, and can be imported into MS word, MS powerpoint, etc. There's also the rsvg utility for converting SVG files to PNG or other raster formats.

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 -csmap command line option. Here's an example script and svg result. You can specify a target window (similarly to HTML <a target=...>) using this syntax in your ploticus script: clickmapurl: [target=new]http://abc.com/... (changed in 2.33)


Mouseover text bubbles / tooltips

Mouseover text bubbles (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 from the ploticus download page). Produces SVGs that support mouseover independently without involving the containing HTML file. There are some proc settings attributes that may be useful. Here's an example pl script that uses this method.

Procedure:

  • 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-- 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.

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

For general information on generating clickmaps and mouseover with ploticus please see the clickmaps and mouseover page.


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


Ploticus is hosted at http://ploticus.sourceforge.net
SourceForge Logo


Markup created by unroff 1.0,    June 02, 2006.