SVG links

Definition

This is a links page about SVG.

Tools

Indexes for SVG tools

• SVG Tools at OpenClipArt.org.

Editors and drawing tools with SVG support

• 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)
• WebEngine V2. (formerly WebDwarf). Drag-and-Drop Visual authoring and animation for HTML, DHTML, and SVG. ($100) - Daniel K. Schneider 16:07, 24 October 2007 (MEST).
• Jasc WebDraw, (commercial $200, tested @ TECFA, works. Notes: only available from the US site, be aware of stupid redirections. Free beta versions may be found in some places.)
• Inkscape. Inkscape is a free (GPL) open source SVG editor with capabilities similar to Illustrator, CorelDraw, Visio, etc. Supported SVG features include basic shapes, paths, text, alpha blending, transforms, gradients, node editing, svg-to-png export, grouping, and more (Version 0.37 on Feb 2004. Available for Win, Linux rpm, source. TESTED @ TECFA, works, exports standard SVG other.
• Adobe Illustrator can import/export SVG
• Microsoft Visio can export to SVG
• Corel Draw (can export SVG)
• Sketsa SVG Graphics Editor, $59 Payware, Java 1.5+ based, demo and webstart version available, Version 4.2 doesn't do SMIL animation (not tested).
• Skencil, a free Linux/Unix vector drawing program can export/import SVG. (formely "Sketch", not tested). IImports/exports SVG.
• Sodipodi (now dead product). See Inkscape.
• SVG Kit for Adobe Creative Suite is a plug-in, which adds full-functional SVG and SVGZ file support to Adobe Photoshop, PS Elements and InDesign.
• SVG Edit is an online vector graphics editor that uses only JS, HTML5, CSS and SVG (i.e. no server-side functionality). You can use this online web 2.0 tool without installing anything on your computer, then "save as" in your navigator ...

Native SVG support in web browsers

See [1] (Wikipedia) or wiki.svg.org for latest updates and detailed feature comparison.

• Opera is the browser with the best native SVG support currently (oct 2007). See the 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. There is also a Linux version (e.g. a deb package that I installed w/o problems on Ubuntu 7.1 - DKS/nov/2007).

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

• Safari (not the world's best browser, but the 3x version (beta in oct. 2007) does provide static/DOM SVG support).

Plugins for web browers

Currently (as of 2010), we suggest to use the Opera browser for looking at dynamic SVG. However, there are a few other options:

• Adobe SVG Viewer, works with in principle with IE and Firefox, but Adobe discontinued support since they finally managed to acquire Macromedia (and Flash). Implemented 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
  • Getting it to work with Firefox (not tested lately): Downlaod the plugin or the 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 - Daniel K. Schneider 12:27, 22 October 2007 (MEST).

• Many mobile phones support SVG Tiny. (always through the opera browser ?).

• Renesis, Beta 0.7 in July 2007. Dead project since ?

• The X-smiles XML-browser, supports SVG (uses CSIRO SVG viewer), also SMIL, XForms, X3D, etc.

• CSIRO Toolkit and Pocket SVG Viewer (dead product/project)

• Batik is mainly a toolkit for server-side applications, but it also includes a good stand-alone SVG browser called Squiggle that fully implements static SVG and scripting (but you may as well use Firefox or Opera for this). We use this toolkit for this wiki in order to render SVG graphics as PNG, but you also may use it as a helper application for your web browser.

• SVG Map Lab. IE Plugin (no idea what features it supports, not tested).

• SVG Edit is an online vector graphics editor that uses only JS, HTML5, CSS and SVG (i.e. no server-side functionality).

SVG emulators

• SVGWeb. A google project that translates SVG to Flash. SVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base.

Convertors

• Most vector graphics tools can import/export in several formats. E.g. to import SVG in Flash one can open the SVG in Illustrator and then select all/copy/paste to CS3/4/5
• SVG Import Filter for OpenOffice 2 (tested with OO 3.1 / Ubuntu: Import worked, but I did not test much - Daniel K. Schneider 13:51, 12 May 2010 (UTC)). An imported image then can be exported in other formats, e.g. WMF.

On-line tools

• W3C Validator
• SVG-edit, an online editor implemented in JavaScript

Toolkits for programmers

• Batik SVG Toolkit. Note that there is also a stand-alone batik viewer
• phpHtmLLib. A set of PHP classes and library functions to help facilitate building, debugging, and rendering of XML, HTML, XHTML, WAP/WML Documents, and SVG, and complex widgets. Stable and popular - Version 2.4.0 in Feb 2004. Supports basic SVG functionality an image and a graph classe.
• SVG-TT-Graph , a popular Perl module for line graphs, bars and pies [1/2004, not tested]
• More PHP kits can be found on the web, see also our [/guides/php/examples/ php example directory]
• SVG Maker Commercial multi-format to SVG translator (not tested !)

Standards

• The official SVG specification
• Spécification SVG 1.0 (français)
• Mobile SVG Profiles: SVG Tiny and SVG Basic W3C Recommendation 14 January 2003 (SVG on the road !)
• W3C Validator
• 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]

Online Manuals and Textbooks

• Javascript DOM and SVG database (from Pilat)

• Learn SVG from the authors of the same print book (now available for free)

Example sites

General

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

• Croczilla SVG resources has a good list of examples, in particular XHTML/SVG integration and DOM scriptin

• Pilat Several kinds of examples (e.g. SVG/Javascript, complex applications, SVG compontents).

• TECFA example directory (not very interesting, but I use them in my teaching slides) - Daniel K. Schneider.

HTML 5 demos that may include SVG

• Chrome Experiments (Not your mother's JavaScript): E.g. SVG Mazes and Rotating Spiral

Code fragments

• DOM tree output ECMA Script from MecXpert
• Web Solutions for Mechanical Engineering, has a nice list of code fragments.

Tutorials

General overviews

• Scalable Vector Graphics (Wikipedia article).

Basic Tutorials

• Pilat Several tutorials + examples + complex applications.
• Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I by Shelley Powers, A LIST apart. Jan 2010
• Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II Jan 2010
• cours SVG de 2 jours (in french) made by E.Sierra and M-A Thibaut 2003 ("learning by teaching", some code broken)
• Introduction à SVG (my own slides)
• SVG at Dev.Opera. Several tutorials (including SMIL tag animation, use Opera to view this.)
• 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.
• Introduction to Scalable Vector Graphics by Nicholas Chase, IBM developerWorks, 2004.
• Create client-side diagrammatic interaction in Web applications with SVG by Cameron Laird, IBM Developerworks, retrieved 18:39, 21 March 2011 (CET).

SVG with DOM

• Add interactivity to your SVG by Brian John Venn, IBM developperworks article, Aug 2003. Good introductory SVG/DOM/JS tutorial.
• Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM at carto:net (2009). This page includes a set of interactive commented examples.

SMIL Animation

(curently not supported by native Firefox SVG, but somewhat ok in Opera)

• Digging Animation, by Antoine Quint, XML.com, 2002 (SMIL animation).

Server-side SVG

• Combiner SVG avec PHP JDNet développeurs article de Xavier Boerderie 12/2002.
• 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
• Example for getURL & parseXML of the Adobe plugin. 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 articles (not classified)

• 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

General SVG resource pages

• SVG - Learning By Coding Site with many very nice examples including advanced topics (in German), easy browsing and looking at code. Many examples need a state-of-the-art browser (e.g. Chrome 10) or else the old Adobe plugin. Bester Site auf Deutsch.
• wiki.svg.org Help on Scalable Vector Graphics. (dead?)
• SVG-wiki some VERY good documentation, e.g. about viewer extensions like how to pull/push data with Adobe's SVG DOM interfaces. (dead link ?).
• Pilat Informative Educative [francais]. SVG - PHP - MySQL - Javascript. Pleins de bons exemples (voir routines SVG), un éditeur SVG "through the web" intéressant, extraits de livres, etc. Le meilleur site français.
• svg.pagina.nl Quick starters page by Ruud Steltenpool. (some of the links leads to code that won't work anymore in 2011)
• SVG Page at DMOZ
• SVG external links in Adobe's SVG Zone
• carto:paperssvg (A.M. Winter & A. Neumann). VERY good SVG resources, examples, etc. Swiss made :) .... but less active since 2007 :(
• W3C Scalable Verctor Graphics (SVG). This is the W3C SVG overview page (includes News and Pointers)
• Sacré SVG, a XML.com column (not updated since 2005).
• SVG Open conference series. Usually, papers are open content.