SVG links

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

Definition

This is a links page about SVG. According to Wikipedia,

SVG images can be produced by the use of a vector graphics editor, such as Inkscape, Adobe Illustrator, or CorelDRAW, and rendered to common raster image formats such as PNG using the same software.

Software can be programmed to render SVG images by using a library such as librsvg or Batik. SVG images can also be rendered to any desired popular image format by using the free software command-line utility ImageMagick.

Web browsers which can display SVG images on web pages include Firefox, Internet Explorer (IE 9+), Opera, Safari and Google Chrome.

SVG on the desktop has also become common. The GNOME project has supported and extensively used SVG icons since 2000.

Other uses for SVG include embedding for use in word processing (e.g. with LibreOffice) and desktop publishing (e.g. Scribus), plotting graphs (e.g. gnuplot), and importing paths (e.g. for use in GIMP or Blender).

(retrieved 14:06, 28 March 2012 (CEST))

This page should help people finding tools, texts (introductions, tutorials, manuals, ...) and other resources. Read the SVG article for a short technical overview.

Tools

Indexes for SVG tools

Editors and drawing tools with SVG support

Text (programming) editors with SVG support
Free drawing programs with native SVG
  • 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. Available for Win, Linux, source. Recommended, but the tool requires learning !
  • 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. Best bet for learning SVG and for creating shapes that you want to hand edit for animation and scripting
Free drawing programs that can import/export SVG
  • Skencil, a free Linux/Unix vector drawing program can export/import SVG. (formely "Sketch", not tested). Imports/exports SVG.
  • Sodipodi (now dead product). See Inkscape.
Commercial drawing programs with native SVG
  • none ....
  • Jasc Web Draw was one of the earliest native SVG drawing programs. Corel then bought the company and killed the product. However, some copies float around ...
Commercial drawing programs with SVG import/export

These programs can usually both import/export SVG. However, you may loose information in both cases.

  • Adobe Illustrator can import/export SVG
  • 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.
  • Corel Draw can import/export SVG (not tested recently)
  • SiteSpinner. (formerly WebDwarf). Drag-and-Drop Visual authoring and animation for HTML, DHTML, and SVG. ($50) - 14:06, 28 March 2012 (CEST)
  • Microsoft Visio can export to 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).

Native SVG support in web browsers

See Comparison of layout engines (SVG) (Wikipedia) or wiki.svg.org for latest updates and detailed feature comparison. There is also an interesting SVG test suite by test by Marek Raida.

Information below is probably not accurate, since implementations come out fast as of spring 2011.

  • Opera used to be the only browser with goot native SVG support currently. E.g. see the SVG support in Opera 9 list. 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). Opera 11 implements most features of SVG, SVG/SMIL and SVG DOM
  • Chrome 10 can do most of SVG (like Opera) and implements fairly well HTML5 SVG (2011)
  • IE 9 can do static SVG and DOM (including HTML5 SVG) (2011). Some features seem to be missing and it cannot do any SVG/SMIL.
  • Firefox since version 1.5 included by default a native SVG and support for SVG-DOM, but did not implement SMIL animation tags. This was fixed in Firefox 4 (March 2011). Version 11 seems to reach the level of Chrome and Opera
  • Safari uses the same engine as Chrome, but usually lacks behind. Should implement most of SVG.

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 ?
  • 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.
  • SVG to PNG converter (Firefox extension)
  • Vector Magic (Easily Convert Bitmap Images To Clean Vector Art)

Validation and cleanup tools

Online editors

  • SVG-edit, an online editor implemented in JavaScript. Strongly recommended


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 and Textbooks

Free Online

  • Learn SVG from the authors of the same print book (now available for free, but most example need fixing, i.e. you must add the SVG and XLink namespace)

Books

  • HTML5 Graphics with SVG & CSS3, Drawing with Markup. By Kurt Cagle. Publisher: O'Reilly Media. Released: May 2012 (est.)
    • Kurt Cagle is an SVG expert. The book should be good (when it comes out ...)
  • SVG Essentials. By J. Eisenberg. Publisher: O'Reilly Media. Released: February 2002. Pages: 358
    • This book is still a good buy. It remains my favorite SVG book. However, SVG is now big in HTML5. Therefore O'Reilly should publish a new version that includes HTML5 specifics and more DOM scripting. Also, Eisenberg, like many other SVG authors back then didn't test SVG within a native browser and missed the fact that namespaces must be declared. Add the following line within the first SVG tag of examples that break with a "prefix not bound to a namespace" message:
xmlns:xlink="http://www.w3.org/1999/xlink"

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. However, most examples lack namespace definitions and will not run unless you fix these.
  • Marek Raida's SVG blog. Includes some good recent examples and also some kind of benchmarking suites. (last checked Mars 2011).
  • SVG - Learning By Coding Site with many very nice examples including advanced topics (in German), easy browsing and looking at code.
HTML 5 demos that may include SVG

Code fragments

Tutorials

General overviews

Basic Tutorials

SVG with DOM

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

  • User Documentation at Inkscape. Also includes some links to general SVG tutorials.
  • 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.
  • dev.opera includes several good svg articles (including some good live examples)
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=SVG_links&oldid=38136"