SVG

Draft

Definition

“SVG is a language for describing two-dimensional graphics and graphical applications in XML. SVG 1.1 is a W3C Recommendation and forms the core of the current SVG developments. SVG 1.2 is the specification currently being developed as is available in draft form [...]. The SVG Mobile Profiles: SVG Basic and SVG Tiny are targeted to resource-limited devices and are part of the 3GPP platform for third generation mobile phones. SVG Print is a set of guidelines to produce final-form documents in XML suitible for archiving and printing.” (Scalable Vector Graphics (SVG), retrieved 12:49, 14 March 2007 (MET)).

Application areas

Visualizations

• The biggest market niche is in our opinion visualization.

Examples

• Romain Sauvain made SVG-based links visualization module for this wiki. See the link in the toolbox to your left. Admire the beauty of links! Works with Firefox or IE with an SVG plugin.
• There is also a "heavier" visualization with a Java Applet made by Urs Richle

Tools

Editors

• You can hand code SVG with any XML editor
• Inkscape (Inkscape targets SVG 1.1 therefore some code will not show in Adobe SVG. Also, it doesn't support SMIL animation or DOM scripting)

Viewers

• Firefox since version 1.5 includes by default a native SVG, but it does not implement SMIL animation tags. Some other static SVG features are missing too, but DOM/Javascript is implemented.

• Adobe SVG Viewer, works with IE and Firefox. Implements all of SVG 1.0.
  • Getting it to work with IE 7 is quite a nightmare. Try the procedure in Utilisateurs d'Internet Explorer 7

• There are other viewers.

On-line tools

• W3C Validator

Links

Standards

• The official SVG specification
• Mobile SVG Profiles: SVG Tiny and SVG Basic W3C Recommendation 14 January 2003 (SVG on the road !)
• SMIL animation SVG has incorporated SMIL-type animations (a superset). This means that SMIL tutorials will also be useful to you.
• ECMAScript Language Binding for SVG (just SVG specific stuff, SVGElement has all the properties and methods of dom::Element !)
• sXBL, SVG's XML Binding Language (sXBL) s a mechanism for defining the presentation and interactive behavior of elements described in a namespace other than SVG's. (This will allow definition of high-level tagsets). [9/2004]

Manuals

• Javascript DOM and SVG database (from Pilat)
• See also, the specifications above :)

Example sites

• LearnSVG. Good sample extracts from the Learn SVG: The Web Graphics Standard" by Jon Frost, Stefan Goessner and Michel Hirtzler book. Revisited by Robert DiBlasi and Tobias Reif
• SVG - Learning By Coding Site with many very nice examples including advanced topics (in German), easy browsing and looking at code.
• Mozilla SVG resources has a good list of examples, in particular XHTML/SVG integration and DOM scriptin
• Pilat Several kinds of examples (e.g. SVG/Javascript, complex applications, SVG compontents).

Tutorials

Basic Tutorials

• Pilat Several tutorials + examples + complex applications.
• cours SVG de 2 jours (in french) made by E.Sierra and M-A Thibaut 2003 ("learning by teaching")
• Introduction à SVG (my own slides)
• 2 day SVG course in french made by N. Nova and Y. Grassioulet 2002 ("learning by teaching")
• An Introduction to Scalable Vector Graphics by J.D. Eisenberg, XML.com, 2001.
• Scalable Vector Graphics: The Art is in the Code Eddie Traversa, Webreference
• Developer tutorials (incl. Dynamic SVG with JavaScript), part of adobe's illustrator/svg zone
• KevLindeV Kevin Lindev's SVG site (tutorials and examples)
• SVG - Open for Business, a (short) webreference.com tutorial
• Basic Shapes, chapter three of David Eisenberg's "SVG Essentials" O'Reilly book.
• Add interactivity to your SVG by Brian John Venn, IBM developperworks article, Aug 2003. Good introductory tutorial.

SMIL Animation (curently not supported by native Firefox SVG)

• Digging Animation, by Antoine Quint, XML.com, 2002 (SMIL animation).
• Rotate an SVG shape over it's center, By Pedro Gil, at TopXML, 2002. Shows how to use the rotate parameters.

Server-side SVG

• Combiner SVG avec PHP JDNet développeurs article de Xavier Boerderie 12/2002.
• ROASP SVG Portal : mostly perl-based server-side ...
• Generating SVG Images with PHP by L. Atkinson, Zend, 2001. (Pie Chart example)
• Creating Scalable Vector Graphics with Perl by K. Hamptom, xml.com, 2001.
• Example for Serverside SVG generation with PHP from the excellent carto.net website.
• Google SVG Search a webreference.com XML column

Dynamic SVG to/from server + client-side

(using e.g. Adobe's SVG/DOM extensions)

• Example for getURL & parseXML. The same tutorial gives additional links, e.g. for postURL() that can be used to save data.

SVG and XSLT

• Client-side image generation with SVG and XSLT by Inigo Surguy
• Graphical Stylesheets Using XSLT to Generate SVG by Mansfield & Fuller, Schema Software. Good article (BROKEN LINK)
• Component-Based Page Layouts xml.com article by Didier Martin showing how to embedd SVG in XHTML using XSLT processing
• Part 2: Transforming XML into SVG by Doug Tidwell /@IBM DeveloperWorks (Bar and Pie Charts)
• Using XSLT to produce SVG (3) by Martin Rowlinson at TopXML (July 2004), Using XSLT to produce a simple pie chart from XML data (source code downloadable too)

Various

• W3C Graphics Activity Statement. This shows the place of SVG in the overall W3C strategy.
• W3C Scalable Verctor Graphics (SVG). This is the overview page (includes News and Pointers)
• Picture Perfect xml.com, (2001)
• SVG: A Sure Bet by Paul Prescod, xml.com (July 2003)
• Flash and SVG comparison table (by A. Neumann)
• JSP Technology and SVG
• Why to Avoid Flash, by Devin Bunker
• Flash is Evil by dack (not related to svg but food for thought)
• Vector-based Web Cartography: Enabler SVGScalable Vector Graphics (french & german version also available)
• SVG - a new dimension in producing interactive netbooks by Vladimir BATAGELJ and Matjaž ZAVERŠNIK (PDF article). This is an overview paper