Liam's SVG notes

Recently I've been trying out some SVG under Linux. Be warned if you do this that your browser will crash often. It helps to have two different browers running, one with SVG support and one without. That way your reference and other web pages don't all vanish every time the SVG makes your browser crash. Sometimes I go for days without a crash, sometimes seconds.

As of December 2003, JavaScript doesn't work in SVG for Mozilla, and the browser crashes when I leave the page; however, Konquoror seems OK.

Viewers

The Adobe SVG plugin works if you have an old Mozilla; I'm using a 2003-03-09 build. It must have been built with gcc 2.95, not 3.x, I think. Be warned that Adobe's SVG pages crash the Adobe plugin, so go there with a browser that doesn't have SVG support! You can download that (binary) tarball; don't installed unsigned tarballs as root, or if you do, I can't be respobsible!

Another browser with SVG support is xsmiles; it's written in Java and needs the Sun Java runtime version 1.4 or later. Unfortunately, it crashes even more often than Mozilla with the Adobe plugin, and has much less support for SVG (e.g. no scripting, no events, which makes animation hard).

Resources

The W3C page for SVG at www.w3.org/Graphics/SVG/ has a lot of useful links. The svg.org site has some blogs and also the SVG Wiki, which has a lot of useful examples.

Tobias Reif's Pinkjuice site also has some fun examples.

www.kevlindev.com also has some useful tutorials and examples.

#SVG on irc.freenode.org may also be useful.

Techniques

Some stuff I've found in my explorations

Embedding SVG in HTML

If possible, don't do this. If you have to do it, use the object element, because embed makes Mozilla crash. Put text or an image inside the object element for non-SVGified browsers (including Google)

Links from SVG to HTML

If you do embed your SVG and you have links, e.g. with
<aa xlink:href="ankle.html">
you'll find that on Linux, when someone follows the link, the Adobe SVG plugin will try and display the resource itself instead of handing it to Mozilla. This is because (I think) the plugin simulates a frame internally. To get round this, use the HTML target attribute:
<aa xlink:href="ankle.html" target="_top">
(the _top target refers to the main browser window)

Animating remote elements

Suppose when the mouse pointer enteres a circle you want a piece of text to appear. Use xref:hlink to refer to the text:
<circle . . .>
<animate xlink:href="#mytext" . . . </circle>

and then give the text element an id of mytext.

Compressing SVG

use gzip -9 to compress SVG files.

Internet Explorer needs your compressed SVG filename to end in .svgz even though Mozilla is happy with .svg.gz instead.

Image Size

sodipodi (a Linux SVG editor) will automatically add viewport, height and width attributes to the top level svg element. You probably want to remove the height and width attributes, because then the view will be scaled automatically to the window size on load. If you embed the picture later, you can put the attributes onto the object element instead.