SVG links

The educational technology and digital learning wiki
Jump to navigation Jump to search

Definition

This is a links page about SVG.

Tools

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.

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

  • 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 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).
  • Adobe Flash lite seems to support SVG (to be tested).
  • Some Nokia and Ericsson mobile phones support SVG Tiny. (though the opera browser ?).
  • 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. - Daniel K. Schneider July 2007. Update: It's now available from exmotion (but still the same) - Daniel K. Schneider
  • 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).
  • SVG Map Lab. IE Plugin (no idea what features it supports, not tested).

On-line tools

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

Manuals

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

Code fragments

Tutorials

General overviews

Basic Tutorials

SMIL Animation

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

Server-side SVG

SVG and XSLT

Various articles (not classified)

General SVG resource pages

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