Scalable Vector Graphics (SVG)

SVG is one of my favourite technologies because its feature set is rich and full. Below you will find examples of SVG that I and some other developers have created. In order to view the examples you should install the beta SVG 6.0 preview plugin from Adobe. If you do not have this particular version of the plugin you may download it from here.

Native SVG In Mozilla

A small tutorial on how to configure native SVG to work in Mozilla (SVG enabled builds).

Native SVG in Mozilla document is available from here.

SVG ArtWork

SVG can be used to produced some quite interesting artwork. Below are a few examples of the art that you can produce with SVG.

A set of cherries can be viewed from here.

A lily be viewed from here.

Pink roses be viewed from here.

A bird can be viewed from here.


SVG Text Effects Demo

SVG is amenable to producing some flash like text effects. Here are a few simples ones using a combination of SVG and SMIL. You can view the source to see how it is done.

You can view the example from here.


SVG Adobe Blend Mode Demo

This interactive example demonstrates the different blend modes available in SVG. Adobe 6.0 beta preview plugin is required to view the examples.

You can view the example from here.

SVG and SMIL Template

A SVG learn by example template that you can use to learn from was kindly donated by RJ. This templates features some basic declarative animations in SMIL and some user interaction.

View the SVG Template

Download the SVG Template

SVG Basic Tutorial

A good place to start as the tutorial takes you through the basics of SVG. Please note I am currently revamping this tutorial to be more in keeping with this sites design. Content will remain the same though.

You can view the example from here or download the example for offline viewing from here.

Return to DHTML Nirvana