<html>
<head>
<!-- This file has been generated by unroff 1.0, 03/11/09 12:56:22. -->
<!-- Do not edit! -->
<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.41 Mar2009
<td></tr></table>
</td></tr>
<td>
<br>
<br>
<title>Manual page for SVG_support(PL)</title>
</head>
<body>
<p>
ploticus can produce graphics in SVG format. SVG is a vector graphic format originated by
<a href="http://www.adobe.com/svg">
Adobe Systems
</a>
and defined in a
<a href="http://www.w3.org/TR/SVG/">
W3C spec
</a>
. 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
<a href="http://librsvg.sourceforge.net/docs/man-rsvg.php">
rsvg
</a>
utility for converting SVG files to PNG or other raster formats.<tt> </tt>
<p>
SVG files have names ending in <tt>.svg</tt>.<tt> </tt>
SVG files can also be compressed for smaller size; these files have names ending in <tt>.svgz</tt>.<tt> </tt>
Compression requires zlib and hence may not be available in all ploticus builds.<tt> </tt>
<br><br><br>
<h2>Generating SVG</h2>
To generate SVG, use the <b>-svg</b> or <b>-svgz</b> command line option (<b>-svgz</b> gives you
compressed svg results).<tt> </tt>
<dl>
<dt> <dd>
<tt>pl -svgz -tag bars2.pl</tt>
</dl>
<p>
Output files will have an <tt>.svg</tt> or <tt>.svgz</tt> ending by default.<tt> </tt>
The <b>-zlevel </b><i>n</i> option may be used to set the compression level to <i>n</i>
(0 - 9 where 9 is highest level of compression).<tt> </tt>
<p>
There are several settings / command line options particularly for use with SVG. See
<a href="settings.html#svg">
proc settings
</a>
and/or the
<a href="pl.1.html#svg">
pl command line options (svg section).<tt> </tt>
</a>
<br><br><br>
<h2>Embedding SVG graphics within HTML</h2>
<p>
To display an SVG graphic within an HTML document, use an <tt><object></tt> tag like this:
<p>
<pre>
<object data="myresult.svg" type="image/svg+xml" width=300 height=200 title="ploticus example">
</object>
</pre>
<p>
An older method involving the <tt><embed></tt> tag is no longer recommended.<tt> </tt>
The embed tag was used like this:
<pre>
<embed src="bars2.svg" name="SVGEmbed" width="500" height="616"
type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
</pre>
<br><br><br>
<h2>Examples</h2>
Here is a
<a href="../gallery/gall.svg.html">
page of some SVG examples
</a>
Notice how the full size graphics are automatically sized to your browser window.<tt> </tt>
<br><br><br>
<h2>Fonts</h2>
<p>
Default font is <tt>Helvetica</tt>. Postscript font names such as
<tt>Times-Roman</tt> and <tt>Courier</tt> may be used.<tt> </tt>
Font names containing embedded whitespace may be problematic with ploticus' SVG driver.<tt> </tt>
<a href="fonts.html">
More info
</a>
<br><br><br>
<a name=clickmap></a>
<h2>Clickable maps</h2>
<p>
<a href="clickmap.html">
Clickmaps
</a>
are supported in browser environments.<tt> </tt>
Use <b>-csmap</b> command line option.<tt> </tt>
<a href="../gallery/clickmap_area2.htm">
Here's an example script
</a>
and
<a href="../gallery/clickmap_area2.svg">
svg result.<tt> </tt>
</a>
You can specify a <tt>target</tt> window (similarly to HTML <a target=...>)
using this syntax in your ploticus script: <tt>clickmapurl: [target=new]http://abc.com/...</tt>
(changed in 2.33)
<br><br><br>
<a name=mouseover></a>
<h2>Mouseover text bubbles / tooltips</h2>
Mouseover text bubbles
(tooltips), are supported for SVG when viewing in a browser.<tt> </tt>
There are two javascript-based methods (both suggested by Jamie Echlin) that can be used:
<br><br>
<p>
<b>Method #1: </b> (the default) uses javascript files (available
<a href="http://ploticus.sourceforge.net/doc/download.html#acc">
from the ploticus download page).<tt> </tt>
</a>
Produces SVGs that support mouseover independently without involving the containing HTML file.<tt> </tt>
There are some
<a href="settings.html#svg">
proc settings attributes
</a>
that may be useful.<tt> </tt>
<a href="../gallery/svg_mouseover.htm">
Here's an example pl script that uses this method.<tt> </tt>
</a>
<embed src="../gallery/svg_mouseover.svg" name="SVGEmbed" width="500" height="300"
type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
<p>
Procedure:
<ul>
<li>
Specify text bubble content using <tt>clickmaplabel</tt> or <tt>clickmaplabeltext</tt>
in the plotting proc you're using.<tt> </tt>
Specify only the text; no javascript code should be given.<tt> </tt>
<li>
Run <b>pl -svg -map ...</b>
<li>
Get the 2 javascript files from the
<a href="http://ploticus.sourceforge.net/doc/download.html#acc">
ploticus download page
</a>
and put them in the same directory as your SVG file
<li>
View the SVG with MS Internet Explorer (or other browsers that support SVG)
</ul>
<p>
There are some unresolved issues with this method...<tt> </tt>
The size of the blue box is fixed without regard to text length
(you can adjust this in the <tt>GraphPopups.js</tt> code.. see BOX SIZE).<tt> </tt>
The location of the blue box is also fixed. There is code
in <tt>GraphPopups.js</tt> (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.<tt> </tt>
<br><br>
<p>
<b>Method #2:</b>
uses a javascript package called
<a href="http://www.macridesweb.com/oltest/">
overlibmws
</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.<tt> </tt>
<p>
To implement this:
Download and unzip overlibmws from
<a href="http://www.macridesweb.com/oltest/overlibmws.zip">
http://www.macridesweb.com/oltest/overlibmws.zip
</a>
<p>
In the containing HTML page include this section in the <tt><head></tt> block,
making sure that the URLs are valid in your environment:
<pre>
<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>
</pre>
In the ploticus file use the <tt>clickmaplabel</tt> or <tt>clickmaplabeltext</tt> attribute appropriately,
eg. in my example I have:
<pre>
clickmaplabeltext: onmouseover='overlib( "Date: <b>@1</b> <BR>Value: <b>@2</b>
<BR>@3", CAPTION, "Spot Details")' onmouseout='nd();'
</pre>
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:
<pre>
#proc settings
svg_mouseover_js: generic
</pre>
<p>
For general information on generating clickmaps and mouseover with ploticus please see
<a href="clickmap.html">
the clickmaps and mouseover page.<tt> </tt>
</a>
<br><br><br>
<h2>Displaying PNG/GIF/JPG images in your SVG result</h2>
As of ploticus 2.40+ this can now be done, see
<a href="import.html">
proc import
</a>
<br><br><br>
<h2>Importing SVG into applications</h2>
Microsoft Office applications can import SVG graphics.<tt> </tt>
On the version I have, import via dragging and dropping works.
Import via the "Insert graphic" menu does not.<tt> </tt>
<br><br><br>
<h2>Troubleshooting</h2>
As of this writing (fall 2007) Firefox 1.5+ seems to be the best medium for viewing SVG results.<tt> </tt>
<p>
Some web servers still send incorrect mime type in the HTTP header when serving SVG files.<tt> </tt>
For normal SVG files, servers should send the HTTP header:
<pre>
Content-Type: image/svg+xml
</pre>
For gzipped SVG files, servers should send the HTTP headers:
<pre>
Content-Type: image/svg+xml
Content-Encoding: gzip
</pre>
A symptom of web server sending incorrect mime type is Firefox 1.5+ saying "What should Firefox do with this file?"
<br><br><br>
<h2>Acknowledgement</h2>
Many thanks to Bill Traill
(<tt> bill@traill.demon.co.uk </tt>)
for initiating ploticus
SVG support and writing the original ploticus SVG driver.<tt> </tt>
<br><br><br>
<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 <br>
<a href="../doc/Copyright.html">Copyright Steve Grubb</a>
<br>
<br>
<center>
<img src="../gallery/all.gif">
</center>
</td></tr>
</table>
<br>
<center>
<table><tr><td>
Ploticus is hosted at http://ploticus.sourceforge.net</td><td> </td><td>
<a href="http://sourceforge.net/projects/ploticus"><img src="http://sflogo.sourceforge.net/sflogo.php?group_id=38453&type=12"
width="120" height="30" border="0"
alt="Get ploticus data display engine at SourceForge.net. Fast, secure and Free Open Source software downloads" /></a>
</td></tr></table>
</center>
<p><hr>
Markup created by <em>unroff</em> 1.0, <tt> </tt> <tt> </tt>March 11, 2009.
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
ed05dc5f357c49fdded780f52b150dce
>
files
>
119
