SVG: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 18: Line 18:


See [[SVG links]]
See [[SVG links]]
== Tools ==
=== Editors ===
* You can hand code SVG with any [[XML editor]]
* [http://inkscape.org/ 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 ===
* [http://www.opera.com/ Opera] is the browser with the best native SVG support currently (oct 2007). See the [http://www.opera.com/docs/specs/svg SVG support in Opra 9] list. I think it's roughly SVG Basic, an SVG profile made for PDAs and that includes [[SMIL]] animation tags. SVG basic or/and SVG tiny are also supported on mobile phone versions.
* [http://www.mozilla.com/ 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.
* [http://www.adobe.com/svg/ Adobe SVG Viewer], works with in principle with IE and Firefox, but Adobe discontinued support since they finally manage to acquire Macromedia (and Flash). Implements all of SVG 1.0.
** Getting it to work with IE 7 is quite a nightmare. Try the procedure in [http://pilat.free.fr/ie7/index.htm Utilisateurs d'Internet Explorer 7]
** Getting it to work with Firefox (not tested lately): Downlaod the plugin or the [http://www.adobe.com/svg/viewer/install/beta.html Pre-release 6.0 Alpha]. Then copy all the files from ''C:\Program Files\Common Files\Adobe\SVG Viewer 6.0\Plugins\*'' to Firefox plugin directory. Then restart Firefox. Enter the URL ''about:config'', then enter ''svg'' in the Filter, hit return. Finally double click on the value "true". It must be false. However, I remember that Firefox crashed when I tried last time - [[User:Daniel K. Schneider|Daniel K. Schneider]] 12:27, 22 October 2007 (MEST).
* [http://www.emiasys.net/ Renesis], Beta 0.7 in July 2007. Download is for Win. Works standalone and as IE plugin. The SVG visualization of this wiki more or less works with Beta 0.7 + IE7. Colors are missing and SVG links don't work really. The amazing bug is however that this combo only works for embedded SVGs, not with a simple SVG file for which you have to use the standalone player (maybe some installation issue ?). Renesis in the current version doesn't seem to implement SMIL tags, hopefully they will implement these, since Firefox won't have them for a while. - [[User:Daniel K. Schneider|Daniel K. Schneider]] 15:24, 4 July 2007 (MEST).
* There are other viewers.
=== On-line tools ===
* [http://validator.w3.org W3C Validator]
== Links ==
=== Standards ===
* [http://www.w3.org/TR/SVG/ The official SVG specification]
* [http://www.w3.org/TR/SVGMobile/  Mobile SVG Profiles: SVG Tiny and SVG Basic] W3C Recommendation 14 January 2003 (SVG on the road !)
* [http://www.w3.org/TR/smil-animation/ SMIL animation] SVG has incorporated SMIL-type animations (a superset). This means that SMIL tutorials will also be useful to you.
* [http://www.w3.org/TR/2001/REC-SVG-20010904/ecmascript-binding.html ECMAScript Language Binding for SVG] (just SVG specific stuff, SVGElement has all the properties and methods of dom::Element !)
* [http://www.w3.org/TR/sXBL/ 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 ===
* [http://pilat.free.fr//js_svg/js_dom.php3 Javascript DOM and SVG] database (from Pilat)
* See also, the specifications above :)
=== 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
* [http://pilat.free.fr/ Pilat] Several kinds of examples (e.g. SVG/Javascript, complex applications, [http://pilat.free.fr/english/index.htm SVG compontents]).
=== Tutorials ===
; Basic Tutorials
* [http://pilat.free.fr/ Pilat] Several tutorials + examples + complex applications.
* [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://dev.opera.com/articles/svg/ SVG at Dev.Opera]. Several tutorials (including SMIL tag animation, use Opera to view this.)
* [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.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.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-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.
; 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, 2002 (SMIL animation).
* [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
* [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, 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, 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.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.w3.org/Graphics/Activity W3C Graphics Activity Statement]. This shows the place of SVG in the overall W3C strategy.
* [http://www.w3.org/Graphics/SVG/Overview.htm8 W3C Scalable Verctor Graphics (SVG)]. This is the overview page (includes News and Pointers)
* [http://www.xml.com/pub/a/2001/09/12/svg.html Picture Perfect] xml.com, (2001)
* [http://www.xml.com/pub/a/2003/07/16/svg-prescod.html SVG: A Sure Bet] by Paul Prescod, xml.com (July 2003)
* [http://www.carto.net/papers/svg/comparison_flash_svg.html Flash and SVG comparison table] (by A. Neumann)
* [http://www.sun.com/software/xml/developers/svg/jsp/ JSP Technology and SVG]
* [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.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


[[Category: XML]]
[[Category: XML]]
[[Category: Multimedia]]
[[Category: Multimedia]]
[[Category: Technologies]]
[[Category: Technologies]]

Revision as of 14:51, 24 October 2007

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)).

See also Flash, a proprietary and "opaque" format.

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 or read the short Mediawiki SvGViz extension documentation. Admire the beauty of links! Works with Firefox, Opera or IE with an SVG plugin.
  • There is also a "heavier" visualization with a Java Applet made by Urs Richle

Links and tools

See SVG links

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=SVG&oldid=15225"