.ig >>
<STYLE TYPE="text/css">
<!--
        A:link{text-decoration:none}
        A:visited{text-decoration:none}
        A:active{text-decoration:none}
        OL,UL,P,BODY,TD,TR,TH,FORM { font-family: arial,helvetica,sans-serif;; font-size:small; color: #333333; }

        H1 { font-size: x-large; font-family: arial,helvetica,sans-serif; }
        H2 { font-size: large; font-family: arial,helvetica,sans-serif; }
        H3 { font-size: medium; font-family: arial,helvetica,sans-serif; }
        H4 { font-size: small; font-family: arial,helvetica,sans-serif; }
-->
</STYLE>
<title>ploticus: svg support</title>
<body bgcolor=D0D0EE vlink=0000FF>
<br>
<br>
<center>
<table cellpadding=2 bgcolor=FFFFFF width=550><tr>
<td>
  <table cellpadding=2 width=550><tr>
  <td><br><h2>SVG support</h2></td>
  <td align=right>
  <small>
  <a href="../doc/welcome.html"><img src="../doc/ploticus.gif" border=0></a><br>
  Version 2.40 Jan'08
  <td></tr></table>
</td></tr>
<td>
<br>
<br>
.>>

.TH SVG_support PL "15-JAN-2008   PL ploticus.sourceforge.net"

.LP
ploticus can produce graphics in SVG format.  SVG is a vector graphic format originated by
.ig >>
<a href="http://www.adobe.com/svg">
.>>
\0Adobe Systems
.ig >>
</a>
.>>
and defined in a 
.ig >>
<a href="http://www.w3.org/TR/SVG/">
.>>
\0W3C spec
.ig >>
</a>
.>>
\0. SVGs look good because nice fonts are standard, and graphics scale with no degradation in
appearance.  SVG can be viewed using Firefox 1.5+ and MSIE browsers, and can be imported into
tools such as Word, Powerpoint, etc.  
There's also the
.ig >>
<a href="http://librsvg.sourceforge.net/docs/man-rsvg.php">
.>>
\0rsvg
.ig >>
</a>
.>>
utility for converting SVG files to PNG or other raster formats.

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

.ig >>
<br><br><br>
.>>
.SH Generating SVG
To generate SVG, use the \fB-svg\fR or \fB-svgz\fR command line option (\fB-svgz\fR gives you
compressed svg results).
.IP \0
\fCpl -svgz -tag bars2.pl\fR
.LP
Output files will have an \fC.svg\fR or \fC.svgz\fR ending by default.
The \fB-zlevel \fIn\fR option may be used to set the compression level to \fIn\fR 
(0 - 9 where 9 is highest level of compression).
.LP
There are several settings / command line options particularly for use with SVG.  See
.ig >>
<a href="settings.html#svg">
.>>
\0proc settings
.ig >>
</a>
.>>
and/or the
.ig >>
<a href="pl.1.html#svg">
.>>
\0pl command line options (svg section).
.ig >>
</a>
.>>


.ig >>
<br><br><br>
.>>
.SH Embedding SVG graphics within HTML 
.LP
To display an SVG graphic within an HTML document, use an \fC<object>\fR tag like this:
.LP
.nf
<object data="myresult.svg" type="image/svg+xml" width=300 height=200 title="ploticus example">
</object>
.fi
.LP
An older method involving the \fC<embed>\fR tag is no longer recommended.
The embed tag was used like this:
.nf
<embed src="bars2.svg" name="SVGEmbed" width="500" height="616"
type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
.fi

.ig >>
<br><br><br>
.>>
.SH Examples
Here is a 
.ig >>
<a href="../gallery/gall.svg.html">
.>>
\0page of some SVG examples
.ig >>
</a>
.>>
Notice how the full size graphics are automatically sized to your browser window.

.ig >>
<br><br><br>
.>>
.SH Fonts
.LP
Default font is \fCHelvetica\fR.  Postscript font names such as
\fCTimes-Roman\fR and \fCCourier\fR may be used.
Font names containing embedded whitespace may be problematic with ploticus' SVG driver.
.ig >>
<a href="fonts.html">
.>>
\0More info
.ig >>
</a>
.>>

.ig >>
<br><br><br>
.>>
.ig >>
<a name=clickmap></a>
.>>
.SH Clickable maps
.LP
.ig >>
<a href="clickmap.html">
.>>
\0Clickmaps
.ig >>
</a>
.>>
are supported in browser environments.
Use \fB-csmap\fR command line option.
.ig >>
<a href="../gallery/clickmap_area2.htm">
.>>
\0Here's an example script
.ig >>
</a>
.>>
and 
.ig >>
<a href="../gallery/clickmap_area2.svg">
.>>
\0svg result.
.ig >>
</a>
.>>
You can specify a \fCtarget\fR window (similarly to HTML <a target=...>)
using this syntax in your ploticus script: \fCclickmapurl: [target=new]http://abc.com/...\fR
(changed in 2.33)

.ig >>
<br><br><br>
.>>
.ig >>
<a name=mouseover></a>
.>>
.SH 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:
.ig >>
<br><br>
.>>
.LP
\fBMethod #1: \fR (the default) uses javascript files (available 
.ig >>
<a href="http://ploticus.sourceforge.net/doc/download.html#acc">
.>>
\0from the ploticus download page).
.ig >>
</a>
.>>
Produces SVGs that support mouseover independently without involving the containing HTML file.
There are some 
.ig >>
<a href="settings.html#svg">
.>>
\0proc settings attributes
.ig >>
</a>
.>>
that may be useful.
.ig >>
<a href="../gallery/svg_mouseover.htm">
.>>
\0Here's an example pl script that uses this method.
.ig >>
</a>
.>>
.ig >>
<embed src="../gallery/svg_mouseover.svg" name="SVGEmbed" width="500" height="300"
type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
.>>
.LP
Procedure:
.IP \(bu
Specify text bubble content using \fCclickmaplabel\fR or \fCclickmaplabeltext\fR
in the plotting proc you're using.
Specify only the text; no javascript code should be given.
.IP \(bu
Run \fBpl -svg  -map  ...\fR
.IP \(bu
Get the 2 javascript files from the
.ig >>
<a href="http://ploticus.sourceforge.net/doc/download.html#acc">
.>>
\0ploticus download page
.ig >>
</a>
.>>
and put them in the same directory as your SVG file
.IP \(bu
View the SVG with MS Internet Explorer (or other browsers that support SVG)
.LP
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 \fCGraphPopups.js\fR code.. see BOX SIZE).
The location of the blue box is also fixed.  There is code 
in \fCGraphPopups.js\fR (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.

.ig >>
<br><br>
.>>
.LP
\fBMethod #2:\fR
uses a javascript package called 
.ig >>
<a href="http://www.macridesweb.com/oltest/">
.>>
\0overlibmws
.ig >>
</a>
.>>
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.
.LP
To implement this:
Download and unzip overlibmws from
.ig >>
<a href="http://www.macridesweb.com/oltest/overlibmws.zip">
.>>
\0http://www.macridesweb.com/oltest/overlibmws.zip
.ig >>
</a>
.>>
.LP
In the containing HTML page include this section in the \fC<head>\fR block,
making sure that the URLs are valid in your environment:
.nf
<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>
.fi
In the ploticus file use the \fCclickmaplabel\fR or \fCclickmaplabeltext\fR attribute appropriately, 
eg. in my example I have:
.nf
  clickmaplabeltext: onmouseover='overlib( "Date: <b>@1</b> <BR>Value: <b>@2</b>
      <BR>@3", CAPTION, "Spot Details")' onmouseout='nd();'
.fi
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:
.nf
\0  #proc settings
\0  svg_mouseover_js: generic
.fi
.LP
For general information on generating clickmaps and mouseover with ploticus please see
.ig >>
<a href="clickmap.html">
.>>
\0the clickmaps and mouseover page.
.ig >>
</a>
.>>

.ig >>
<br><br><br>
.>>
.SH Displaying PNG/GIF/JPG images in your SVG result
As of ploticus 2.40+ this can now be done, see
.ig >>
<a href="import.html">
.>>
\0proc import
.ig >>
</a>
.>>

.ig >>
<br><br><br>
.>>
.SH 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.


.ig >>
<br><br><br>
.>>
.SH Troubleshooting
As of this writing (fall 2007) Firefox 1.5+ seems to be the best medium for viewing SVG results.
.LP
Some web servers still send incorrect mime type in the HTTP header when serving SVG files.
For normal SVG files, servers should send the HTTP header: 
.nf
  Content-Type: image/svg+xml\fR
.fi
For gzipped SVG files, servers should send the HTTP headers: 
.nf
  Content-Type: image/svg+xml
  Content-Encoding: gzip
.fi
A symptom of web server sending incorrect mime type is Firefox 1.5+ saying "What should Firefox do with this file?"


.ig >>
<br><br><br>
.>>
.SH Acknowledgement
Many thanks to Bill Traill 
(\fC bill@traill.demon.co.uk \fR)
for initiating ploticus 
SVG support and writing the original ploticus SVG driver.

.ig >>
<br><br><br>
.>>

.ig >>
<br>
<br>
</td></tr>
<td align=right>
<a href="../doc/welcome.html">
<img src="../doc/ploticus.gif" border=0></a><br><small>data display engine &nbsp; <br>
<a href="../doc/Copyright.html">Copyright Steve Grubb</a>
<br>
<br>
<center>
<img src="../gallery/all.gif"> 
</center>
</td></tr>
</table>
<br>
<center>
Ploticus is hosted at http://ploticus.sourceforge.net <br>
<img src="http://sourceforge.net/sflogo.php?group_id=38453" width="88" height="31" border="0" alt="SourceForge Logo">
</center>
.>>


