SVG Examples

SVG links


The following links were researched and selected when using the Adobe SVG plugin. I have since learned that none of the examples work well in the Mozilla browser (v.1.7), which supports SVG natively if it is compiled with SVG support.

I believe the Mozilla project is approaching this functionality the right way, trying to integrate it closely into the Document Object Model (DOM), rather than creating yet another plug-in based solution for vector graphics. Although I think that there is still a long way to go before this work bears fruit (in terms of motion graphics and audio synchronization, for example), in the future, I will only be updating this site with an eye towards Mozilla/SVG compatibility.

If you would like to try Mozilla with SVG support, you can visit their SVG page for more information, or use the Gentoo distribution of Linux which makes compiling Mozilla with SVG quite simple.

Basic shapes
Basic Circle
Advanced Circles

Color animation
Color cycling

Shape animation
Animation

Animation
Linear animation

Hyperlinks
Hyper link (xlink)
onclick="changeColor(evt)"
onClick="alert('foo')"

Text
Text

Dynamically generated SVG
pieChart.php