SVG: Difference between revisions
Jump to navigation
Jump to search
m (using an external editor) |
m (using an external editor) |
||
Line 52: | Line 52: | ||
* [http://www.carto.net/papers/svg/index_e.shtml Vector-based Web Cartography: Enabler SVGScalable Vector Graphics] (french & german version also available) | * [http://www.carto.net/papers/svg/index_e.shtml Vector-based Web Cartography: Enabler SVGScalable Vector Graphics] (french & german version also available) | ||
* [http://www.math.uoc.gr/%7Eictm2/Proceedings/pap442.pdf SVG - a new dimension in producing interactive netbooks] by Vladimir BATAGELJ and Matjaž ZAVERŠNIK (PDF article). This is an overview paper | * [http://www.math.uoc.gr/%7Eictm2/Proceedings/pap442.pdf SVG - a new dimension in producing interactive netbooks] by Vladimir BATAGELJ and Matjaž ZAVERŠNIK (PDF article). This is an overview paper | ||
=== Example sites === | |||
* [http://www.learnsvg.com/ 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 | |||
* [http://www.datenverdrahten.de/svglbc/ SVG - Learning By Coding] Site with many very nice examples including advanced topics (in German), easy browsing and looking at code. | |||
* [http://croczilla.com/svg/ Mozilla SVG resources] has a good list of examples, in particular XHTML/SVG integration and DOM scriptin | |||
=== Tutorials === | === Tutorials === | ||
Line 57: | Line 64: | ||
===Base Tutorials=== | ===Base Tutorials=== | ||
* [http:// | * [http://pilat.free.fr/ Pilat] | ||
* [http://tecfa.unige.ch/staf/staf-g/sierra/staf2x/sitesvg.htm cours SVG de 2 jours (in french)] made by E.Sierra and M-A Thibaut 2003 ("learning by teaching") | * [http://tecfa.unige.ch/staf/staf-g/sierra/staf2x/sitesvg.htm cours SVG de 2 jours (in french)] made by E.Sierra and M-A Thibaut 2003 ("learning by teaching") | ||
* [http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro.html Introduction à SVG] (my own slides) | * [http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro.html Introduction à SVG] (my own slides) | ||
* [http://tecfa.unige.ch/staf/staf-g/nova/staf2x/svg/programme.html 2 day SVG course in french] made by N. Nova and Y. Grassioulet 2002 ("learning by teaching") | * [http://tecfa.unige.ch/staf/staf-g/nova/staf2x/svg/programme.html 2 day SVG course in french] made by N. Nova and Y. Grassioulet 2002 ("learning by teaching") | ||
* [http://www.xml.com/pub/a/2001/03/21/svg.html An Introduction to Scalable Vector Graphics] by J.D. Eisenberg, XML.com, 2001. | * [http://www.xml.com/pub/a/2001/03/21/svg.html An Introduction to Scalable Vector Graphics] by J.D. Eisenberg, XML.com, 2001. | ||
* [http://www.webreference.com/authoring/languages/svg/intro/ Scalable Vector Graphics: The Art is in the Code] Eddie Traversa, Webreference | * [http://www.webreference.com/authoring/languages/svg/intro/ Scalable Vector Graphics: The Art is in the Code] Eddie Traversa, Webreference |
Revision as of 18:35, 3 May 2007
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
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
Tutorials
Base Tutorials
- Pilat
- 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)