Home Portal Search

Overview

People

Teaching

Projects

Resources

Intranet

SVG Page @ TECFA

Use SVG and not FLASH. SVG is open (you can look at the data structure), will integrate with other XML formats (e.g. XHTML) and is scriptable with Java/ECMAScript. [Note: This page needs some additions].

We teach SVG at TECFA, please have a look at the Tutorials section.
Example directory at TECFA (So far there is few, e.g. a go at visualization of XML Data with XSLT to SVG and TIE examples. You also may dig in our php examples

See some information about Adobe's plugin, Firefox 1.5 and older Mozillas below

Contents
Documentation § 1.1 Standards § 1.2 Overviews § 1.3 FAQs, Forums, Lists § 1.4 Tutorials Software § 2.1 Clients § 2.2 Other Software that uses/produces SVG § 2.3 Toolkits § 2.4 Drawing Tools that ouput SVG § 2.5 Code Fragments Links Examples

1. Documentation

1.1 Standards

W3C Validator (note: The page says HTML validation service, but it does SVG too, minus CSS maybe)
http://www.w3.org/TR/SVG/ The official SVG specification
Recommandation SVG1 du W3C en version française (y compris traduction des exemples)
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]
SEE ALSO: our DOM Pointers (needed e.g. for scripting with ECMAScript

1.2 Overviews

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)

1.3 FAQs, Forums, Lists

etc...

SVG Café. This is a Forum with Q/A on SVG, EcmaScript & SVG, FAQs and New
SVG Developers Forum at Yahoo

1.4 Tutorials

(See also: the links sections)

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

2. Software

2.1 Clients

In principle, future browsers ought to include SVG. In the meantime:

If you wish to have several IE plugins at the same time: get the plugin switcher from Georg Held (carto.net)
Adobe has a older Windows / Mac plugin (Some 3.0 beta can be found for linux/solaris/etc) that supports full SVG 1.0
IMPORTANT: SVG embedded in HTML with the Adobe plugin (Version 3.0) for Mozilla breaks with the standard method. Use something like:
```
<iframe src="my_svg_code.svg" height="540" width="99%" frameborder="0">
... Sorry you need an SVG plugin. Get it from  ...
</iframe>
```
Alternatively, you should download Pre-release 6.0 Alpha. In order to install it with Mozilla (tested with Moz 1.x/Win2k and Firefox/WinXP) you must copy the 2 files from:
C:\Program Files\Common Files\Adobe\SVG Viewer 6.0\Plugins\*
(or C:\Program Files\Fichiers Communs\Adobe\SVG Viewer 6.0\Plugins\* in a french system)
to c:\Program Files\Mozilla.org\Mozilla\Plugins\
(and do not forget to remove the old NPSSV* files !). This pre-release has some bugs, e.g. some carto.net samples won't work neither in IE 6.0.2800.1106 nor Moz 1.4, but then maybe the API has changed (DKS/July 18/2003). On the other hand, this implementation has much better support for text (SVG 1.2) !
IE7 is a total nightmare. Try utilisateurs d'Internet Explorer 7, from Pilat. (Explains how to desactivate stupid protection plans and interferences from toolbars.
Firefox 1.5 has good support for static SVG and interactive SVG (via JS/DOM). If you need dynamic SVG (SMIL-type animations), consider using SMILScript, a JavaScript library by Doug Schepers that you need to include in an SVG file.
Corel SVG Viewer, is Corel's alternative to the Adobe plugin. Version 2.1 in sept 2003 (not tested).
Mozilla has a NATIVE BETA version of SVG, but you need to FIND a special "build". See also crozilla.com. Means that you can integrated SVG code within XHTML. This is the future
The X-smiles XML-browser supports SVG (uses CSIRO SVG viewer)
CSIRO Toolkit and Pocket SVG Viewer
Batik also includes a browser

2.2 Other Software that uses/produces SVG

IsaViz IsaViz is a visual environment for browsing and authoring Resource Description Framework (RDF) models represented as graphs. It features a 2.5D user interface allowing smooth zooming and navigation in the graph; creation and editing of graphs by drawing ellipses, boxes, and arcs; RDF/XML, Notation 3 and N-Triple export; and also SVG and PNG export. (NOT tested yet, DKS/feb/2004)
Ploticus Command line package for producing plots, charts, and graphics from data. Can be called from cgi. Not tested (2004)

2.3 Toolkits

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 php example directory
SVG Maker Commercial multi-format to SVG translator (not tested !)

2.4 Drawing Tools that ouput SVG

WebDwarf, WebDwarf V2 is Virtual Mechanics' free prototype editor for the design of Web content using HTML and SVG (Scalable Vector Graphics). Version 2 hosts a number of advanced features. (tested @ TECFA, works fine). More advanced products are commercial
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.
Catwalk for producing SVG from XML data with XSLT (not tested)
Adobe Illustrator (can export SVG) and Adobe GoLive can add animations to it (in their source code editor only)
Corel Draw (can export SVG)
Sketsa SVG Graphics Editor, $49 Payware, Java 1.42+ based, demo and webstart version available, Version 3.1 doesn't do animation, not tested @ TECFA.
Sketch, a free Linux/Unix vector drawing program can export/import SVG. (not tested)
Sodipodi. Sodipodi is a free (GPL) vector-based drawing program. It uses W3C SVG as its native file format. It has a relatively modern display engine, giving you finely antialiased display, alpha transparencies, vector fonts and so on. Sodipodi is written in C, using the Gtk+ toolkit and optionally some Gnome or KDE libraries. Works under most versions of Unix and Windows. Windows users: First get the GTk library from http://www.dropline.net/gtk/ TESTED @ TECFA, works. - Il existe une Introduction en français à l'utilisation de ce logiciel.

2.5 Code Fragments

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

3. Links

This section ought to be the *most* useful one, i.e. should contain major SVG sites !

SVG-wiki some VERY good documentation, e.g. about viewer extensions like how to pull/push data with Adobe's SVG DOM interfaces.
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 - Learning By Coding Site with many very nice examples including advanced topics (in German), easy browsing and looking at code. Bester Site auf Deutsch.
svg.pagina.nl Quick starters page by Ruud Steltenpool.
SVGX.ORG is a News and Resources portal run by the SVG Foundation. You can browse according to several categories [New 9/2004].
SVG Page at DMOZ
SVG external links in Adobe's SVG Zone
Jasc WebDraw Links
carto:paperssvg (A.M. Winter & A. Neumann). VERY good SVG resources, examples, etc. Swiss made :)
W3C Scalable Vector Graphics (SVG) a Chris Lilley page
SVG Page at About.com
W3C Scalable Verctor Graphics (SVG). This is the overview page (includes News and Pointers)
Sacré SVG, a XML.com column
ROASP SVG Portal (Serverside SVG Portal, mostly for Perl). (5/2003)
SVG+SMIL entries at Bitflux (the makers of the Bitflux CMS and Wysiwyg/TTW XML Editor)

4. Examples

(better check out the tutorial section of this page and dig through the larger SVG sites in the links) Some good ones:

Beat's BiblioNetz Probly one of the only 10 nice hypertexts on the Web
FOAFNaut explorer. See also foafnaut (explanations) and Mapping distributed communities using SVG by Liz Turner.
foafCORP viewer.
Analysis and Visualization of the IV 2004 Contest Dataset by Weimao Ke, Katy Börner and Lalitha Viswanath, Indiana University (First Place at InfoVis 2004 Contest). Note: Use IE explorer to look at examples (JS DOM code did not work with Moz/Adobe 6a).
SVG kaleidoscope by Ron Lussier (original kaleidoscope code by Kevin Lindsey).

Locally produced:

ArtTPG. Les horaires du bus 4 (2004) sous forme de Lézard, travail staf-18 php-svg
Sitemap pour une navigation hybride XML/SVG XSLT batch (file HP.svg)

Others:

Songs in SVG creating SVG songs from an XSL stylesheet (batch).
Code from "Designing SVG web graphics, by Andrew H. Watt, New Riders. [locked local copy]
XML Grove. Nice tree display of an XML file (Grove is planned)
Script PHP générant un diagramme camembert en SVG, de Stephane Le Solliec, MetaCités.

Last modified: Fri Mar 9 19:03:49 CET 2007

D.K.S.