SVG
Jump to navigation
Jump to search
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. E.g. Romain Sauvain is working on a new links visualization module for this wiki. A first version (that uses Urs' webservice) is here. Admire the beauty of links! Works with Firefox or IE with an SVG plugin.
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
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]
General
- 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
Tutorials
Base Tutorials
- 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
- 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")
- SVG - Learning By Coding Site with many very nice examples including advanced topics (in German), easy browsing and looking at code.
- 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)