.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.30
  <td></tr></table>
</td></tr>
<td>
<br>
<br>
.>>

.TH SVG_support PL "25-AUG-2004   PL ploticus.sourceforge.net"

.LP
ploticus can produce graphics in SVG format.
SVG is a vector graphic format supported 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 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.  

.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-tag\fR option may be used to have a suitable 
HTML \fC<EMBED>\fR tag written to standard output.
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">
.>>
\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
Netscape and MSIE display SVGs using a the Adobe SVG viewer plug-in.  
To include an SVG graphic in an HTML document, use an \fC<EMBED>\fR tag like this:
.LP
.nf
<embed src="bars2.svg" name="SVGEmbed" width="500" height="616"
type="image/svg-xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
.fi
.LP
The \fCwidth\fR and \fCheight\fR 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 \fB-tag\fR command line option may be used to generate a suitable 
html <embed> tag containing appropriate height and width values, for convenience.

.ig >>
<br><br><br>
.>>
.SH Examples
Here is a 
.ig >>
<a href="../gallery/gall.svg.html">
.>>
\0page of some SVG examples
.ig >>
</a>
.>>
(plug-in will be required).
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.
.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 either the \fB-map\fR or \fB-csmap\fR command line option (doesn't matter which).
.ig >>
<a href="../gallery/clickmap_area2.svgz">
.>>
\0Here's an example.
.ig >>
</a>
.>>
You can specify a \fCtarget\fR window (similarly to HTML <a target=...>)
by using the
.ig >>
<a href="settings.html">
.>>
\0proc settings svg_linkparms
.ig >>
</a>
.>>
attribute.

.ig >>
<br><br><br>
.>>
.ig >>
<a name=mouseover></a>
.>>
.SH Mouseover text bubbles
.ig >>
<a href="clickmap.html">
.>>
\0Mouseover text bubbles
.ig >>
</a>
.>>
, sometimes called "tooltips", are supported for SVG when viewing in a browser.
Beginning in ploticus version 2.30, the default method for producing these was improved.
The new method uses 2 javascript files (contributed by Jamie Echlin, available from the
.ig >>
<a href="http://ploticus.sourceforge.net/doc/download.html#acc">
.>>
\0ploticus download page)
.ig >>
</a>
.>>
and produces SVGs that support mouseover independently (without involving the containing HTML file).  
.ig >>
<a href="../gallery/svg_mouseover.htm">
.>>
\0Here's an example pl script that does this.
.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
To use this method:
.IP \(bu
Specify text bubble content using \fCclickmaplabel:\fR attribute(s).
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
This method is simpler to use (and gives better results) than the old way,
but there are still some unresolved issues with the new javascript files. 
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.

.LP
If you don't want to use this method, you can use some other way, such as the \fCoverlib\fR method
developed earlier.  But as of version 2.30, you'll need to put the following line into your script file
(or config file) to disable the default method: \fCsvg_mouseover_js: generic\fR
.br
.ig >>
<a href="../gallery/svg_mouseover_examp_old.html">
.>>
\0Here's a complete example using (old) generic overlib method
.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
The location for downloading the SVG viewer is
.ig >>
<a href="http://www.adobe.com/svg/viewer/install">
.>>
\0www.adobe.com/svg/viewer/install
.ig >>
</a>
.>>
\0.  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 \fCfile:///\fR.
If this works then there is probably a mime types problem with your 
web server.  Ask your web server administrator to add a \fCmime.types\fR entry 
such as this:
.IP \0
.nf
image/svg-xml                   svg svgz
.fi
.LP
Or with apache you can add lines like this to your .htaccess file:
.IP \0
.nf
AddType image/svg+xml svg
AddType image/svg+xml svgz
.fi
.LP
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.



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


