SVG: Difference between revisions
(using an external editor) |
m (→General) |
||
Line 53: | Line 53: | ||
See [http://tecfa.unige.ch/guides/svg/pointers.html Tecfa's SVG pointers for the moment] | === 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 | |||
* See [http://tecfa.unige.ch/guides/svg/pointers.html Tecfa's SVG pointers for the moment] | |||
===Base Tutorials=== | |||
;Made in Tecfa: | |||
* [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/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") | |||
;Others: | |||
* [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.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.kevlindev.com KevLindeV] Kevin Lindev's SVG site (tutorials and examples) | |||
* [http://www.vbxml.com/xsl/articles/interfaces/ Visual Interfaces: SVG], by Kurt Cagle | |||
* [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 | |||
* See also: [http://www.amazon.com/exec/obidos/search-handle-url/index%3Dbooks%26field-keywords%3DSVG/ SVG Books at Amazon] | |||
* [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 | |||
* [http://www.xml.com/lpt/a/2002/01/23/svg/index.html Digging Animation], by Antoine Quint, XML.com. Also check his other and follow-up articles. | |||
* [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. Shows how to use the rotate parameters. | |||
; Server-side SVG | |||
* [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.zend.com/zend/trick/tricks12apr.php Generating SVG Images with PHP] by L. Atkinson, Zend (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.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 | |||
; Dynamic SVG to/from server + client-side | |||
(using e.g. Adobe's SVG/DOM extensions) | |||
* [http://www.carto.net/papers/svg/samples/get_parse.shtml Example for getURL & parseXML]. The same tutorial gives additional links, e.g. for postURL() that can be used to save data. | |||
;SVG and XSLT | |||
* [http://surguy.net/articles/client-side-svg.xml Client-side image generation with SVG and XSLT] by Inigo Surguy | |||
* [http://www.schemasoft.com/gcatools/gca2html/Output/05-05-02.html Graphical Stylesheets Using XSLT to Generate SVG ]by Mansfield & Fuller, Schema Software. Good article (BROKEN LINK) | |||
* [http://www.xml.com/pub/a/2000/02/16/style/index.html?wwwrrr_20000216.ptxt Component-Based Page Layouts] xml.com article by Didier Martin showing how to embedd SVG in XHTML using XSLT processing | |||
* [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) | |||
===Various=== | |||
* [http://www.carto.net/papers/svg/index_f.html La cartographie en mode vectoriel sur le Web : les possibilités de SVG] (english & 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 | |||
[[Category: XML]] | [[Category: XML]] |
Revision as of 13:56, 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)
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
Base Tutorials
- Made in Tecfa
- 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")
- Others
- 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
- 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)
- Visual Interfaces: SVG, by Kurt Cagle
- SVG - Open for Business, a (short) webreference.com tutorial
- Basic Shapes, chapter three of David Eisenberg's "SVG Essentials" O'Reilly book
- See also: SVG Books at Amazon
- Add interactivity to your SVG by Brian John Venn, IBM developperworks article, Aug 2003. Good introductory tutorial.
- Animation
- Digging Animation, by Antoine Quint, XML.com. Also check his other and follow-up articles.
- Rotate an SVG shape over it's center, By Pedro Gil, at TopXML. 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 (Pie Chart example)
- Creating Scalable Vector Graphics with Perl by K. Hamptom, xml.com
- 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
- La cartographie en mode vectoriel sur le Web : les possibilités de SVG (english & 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