SVG: Difference between revisions
Jump to navigation
Jump to search
m (→General) |
m (using an external editor) |
||
Line 29: | Line 29: | ||
* [http://validator.w3.org W3C Validator] | * [http://validator.w3.org W3C Validator] | ||
== Links == | == Links == | ||
Line 51: | Line 50: | ||
* [http://people.westminstercollege.edu/students/d-b1649/opinions/avoid_flash.html Why to Avoid Flash], by Devin Bunker | * [http://people.westminstercollege.edu/students/d-b1649/opinions/avoid_flash.html Why to Avoid Flash], by Devin Bunker | ||
* [http://www.dack.com/web/flash_evil.html Flash is Evil] by dack (not related to svg but food for thought) | * [http://www.dack.com/web/flash_evil.html Flash is Evil] by dack (not related to svg but food for thought) | ||
* [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 | |||
=== Tutorials === | === Tutorials === | ||
===Base Tutorials=== | ===Base Tutorials=== | ||
* [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://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.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://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://www.xml.com/pub/a/2001/03/21/svg.html An Introduction to Scalable Vector Graphics] by J.D. Eisenberg, XML.com | * [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 | ||
* [http://www.adobe.com/svg/illustrator/interactivity_palette/index2.html Developer tutorials (incl. Dynamic SVG with JavaScript)], part of adobe's illustrator/svg zone | * [http://www.adobe.com/svg/illustrator/interactivity_palette/index2.html Developer tutorials (incl. Dynamic SVG with JavaScript)], part of adobe's illustrator/svg zone | ||
* [http://www.kevlindev.com KevLindeV] Kevin Lindev's SVG site (tutorials and examples) | * [http://www.kevlindev.com KevLindeV] Kevin Lindev's SVG site (tutorials and examples) | ||
* [http://www.webreference.com/xml/column49/ SVG - Open for Business], a (short) webreference.com tutorial | * [http://www.webreference.com/xml/column49/ SVG - Open for Business], a (short) webreference.com tutorial | ||
* [http://www.oreilly.com/catalog/svgess/chapter/ch03.html Basic Shapes], chapter three of David Eisenberg's "SVG Essentials" O'Reilly book | * [http://www.oreilly.com/catalog/svgess/chapter/ch03.html Basic Shapes], chapter three of David Eisenberg's "SVG Essentials" O'Reilly book. | ||
* [http://www-106.ibm.com/developerworks/xml/library/x-svgint/ Add interactivity to your SVG] by Brian John Venn, IBM developperworks article, Aug 2003. Good introductory tutorial. | * [http://www-106.ibm.com/developerworks/xml/library/x-svgint/ Add interactivity to your SVG] by Brian John Venn, IBM developperworks article, Aug 2003. Good introductory tutorial. | ||
; Animation | ; SMIL Animation (curently not supported by native Firefox SVG) | ||
* [http://www.xml.com/lpt/a/2002/01/23/svg/index.html Digging Animation], by Antoine Quint, XML.com | * [http://www.xml.com/lpt/a/2002/01/23/svg/index.html Digging Animation], by Antoine Quint, XML.com, 2002 (SMIL animation). | ||
* [http://www.topxml.com/snippetcentral/main.asp?view=viewsnippet&lang=codelib&id=v20020625120600 Rotate an SVG shape over it's center, | * [http://www.topxml.com/snippetcentral/main.asp?view=viewsnippet&lang=codelib&id=v20020625120600 Rotate an SVG shape over it's center], By Pedro Gil, at TopXML, 2002. Shows how to use the rotate parameters. | ||
; Server-side SVG | ; Server-side SVG | ||
Line 88: | Line 79: | ||
* [http://developpeur.journaldunet.com/tutoriel/php/021205php_svg1a.shtml Combiner SVG avec PHP] JDNet développeurs article de Xavier Boerderie 12/2002. | * [http://developpeur.journaldunet.com/tutoriel/php/021205php_svg1a.shtml Combiner SVG avec PHP] JDNet développeurs article de Xavier Boerderie 12/2002. | ||
* [http://www.roasp.com/ ROASP SVG Portal ]<nowiki>: mostly perl-based server-side ... </nowiki> | * [http://www.roasp.com/ ROASP SVG Portal ]<nowiki>: mostly perl-based server-side ... </nowiki> | ||
* [http://www.zend.com/zend/trick/tricks12apr.php Generating SVG Images with PHP] by L. Atkinson, Zend (Pie Chart example) | * [http://www.zend.com/zend/trick/tricks12apr.php Generating SVG Images with PHP] by L. Atkinson, Zend, 2001. (Pie Chart example) | ||
* [http://www.xml.com/lpt/a/2001/07/11/creatingsvg.html Creating Scalable Vector Graphics with Perl ] by K. Hamptom, xml.com | * [http://www.xml.com/lpt/a/2001/07/11/creatingsvg.html Creating Scalable Vector Graphics with Perl] by K. Hamptom, xml.com, 2001. | ||
* [http://www.carto.net/papers/svg/serverside_svg_php_e.html Example for Serverside SVG generation with PHP] from the excellent carto.net website. | * [http://www.carto.net/papers/svg/serverside_svg_php_e.html Example for Serverside SVG generation with PHP] from the excellent carto.net website. | ||
* [http://www.webreference.com/xml/column55/ Google SVG Search] a webreference.com XML column | * [http://www.webreference.com/xml/column55/ Google SVG Search] a webreference.com XML column | ||
Line 106: | Line 97: | ||
* [http://www-106.ibm.com/developerworks/education/transforming-xml/xmltosvg/index.html Part 2: Transforming XML into SVG ] by Doug Tidwell /@IBM DeveloperWorks (Bar and Pie Charts) | * [http://www-106.ibm.com/developerworks/education/transforming-xml/xmltosvg/index.html Part 2: Transforming XML into SVG ] by Doug Tidwell /@IBM DeveloperWorks (Bar and Pie Charts) | ||
* [http://www.topxml.com/snippetcentral/main.asp?view=viewsnippet&lang=codelib&id=v20020313183135 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) | * [http://www.topxml.com/snippetcentral/main.asp?view=viewsnippet&lang=codelib&id=v20020313183135 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) | ||
[[Category: XML]] | [[Category: XML]] |
Revision as of 14:22, 4 April 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
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)