Overview

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.

Once dropped in you get partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in about a 60K library. Your SVG content can be embedded directly into normal HTML 5 or through the OBJECT tag. If native SVG support is already present in the browser then that is used, though you can override this and have the SVG Web toolkit handle things instead. No downloads or plugins are necessary other than Flash which is used for the actual rendering, so it's very easy to use and incorporate into an existing web site.

Please keep in mind that SVG Web is in alpha. If you find something file an Issue.

One Minute Intro

Demos

• Draggable photos demo (scripted with JavaScript + SVG Image tag)
• Bouncing ball demos: 1, 2
• Draggable videos demo with live video playing (scripted with JavaScript + Video tag)
• Animated Scimitar using Audio tag and Animation (SMIL) tags
• Simple animation using animation tags (SMIL): 1, 2, 3
• Animating video using tags (SMIL + Video)
• Animated SVG Open banner with gradients, user-defined fonts (SVG Fonts), and animation (SMIL) tags
• Defining and using custom fonts (SVG Fonts) demo
• Complex static images: tiger, sporty car, techy car
• Using viewer to render clip art: Android logo, Cartman, Mono logo
• Falling blocks game; shows direct embedding SVG into normal non-XHTML HTML 5 and then scripting it with normal JavaScript
• Simple 'hello world' showing how to direct embed SVG into normal, non-XHTML HTML 5
• Simple 'hello world' showing how to use the OBJECT tag (including for IE) to embed SVG
• Simple sample showing how to direct embed multiple SVG into your page
• Simple sample showing how to embed multiple SVG OBJECTs into your page and then style them with CSS
• SVG 1.1 test suite modified to use SVG Web instead

More demos can be seen with the demo viewer; keep in mind that not all of the demos in the demo viewer work.

Getting Started

A Quick Start guide is available to get going fast. More in-depth technical documentation is also available once you have read the Quick Start guide.

Also, if you are using SVG Web in your own project please add yourself to the ProjectsUsingSVGWeb page!

Videos

See a Tech Talk at Google recently on SVG Web and Open Web Advocacy from Brad Neuberg, a member of the Open Web Advocacy team at Google:

What's New

November 23rd, 2009: New Release

Just in time for Thanksgiving is another SVG Web release. Our tradition is to name SVG Web releases after monsters from D&D just to increase the geek factor, so in that spirit our release name this time is "Gelatinous Cube":

The Gelatinous Cube is a truly horrifying creature:

"A gelatinous cube looks like a transparent ooze of mindless, gelatinous matter in the shape of a cube. It slides through dungeon corridors, absorbing everything in its path, digesting everything organic and secreting non-digestible matter in its wake. Contact with its exterior can result in a paralyzing electric shock, after which the cube will proceed to slowly digest its stunned and helpless prey."

Fun times.

Highlights of this release, thanks to many many people helping with patches, bug testing, and more:

• Loads of important bugs fixed
• Performance improvements
• You can now dynamically create new SVG root tags
• All the namespace aware functions now implemented: setAttributeNS, getAttributeNS, etc.
• You can now clone SVG nodes (cloneNode)
• You can now right-click on the SVG when using Flash to view the dynamic updated SVG source
• Running getElementsByTagNameNS scoped to a particular node now works, such as myGroup.getElementsByTagNameNS(svgns, 'text')
• and much much more

The full list of issues fixed:

•  Issue 358 : Opera throws exception on patch to currentTranslate
•  Issue 413 : Implement node.getElementsByTagNameNS scoped by container node
•  Issue 401 : currentTranslate.setXY does translate the svg, but doesn't affect currentTranslate.getX or getY
•  Issue 201 : Support cloneNode
•  Issue 385 : Implement getAttributeNS
•  Issue 384 : Make sure ownerDocument defaults to 'document'
•  Issue 386 : Implement hasAttributeNS and hasAttribute
•  Issue 387 : Implement removeAttributeNS and removeAttribute
•  Issue 202 : Programmatically Creating the SVG node
•  Issue 383 : QA on Firefox 3.6 Beta
•  Issue 335 : Specific SVG file crashes browser when used with SVG Web
•  Issue 364 : onload event does not fire when image url is a security error
•  Issue 362 : dynamically applied color should cascade
•  Issue 349 : gradients with bounding box cooordinates are positioned wrongly on circles
•  Issue 371 : Linear gradients incorrectly start at left of screen rather than each circle
•  Issue 367 : Flash blend mode used for groups is a performance problem and can be avoided generally
•  Issue 331 : Animations based on events not implemented; problems with transform animations
•  Issue 275 : Add View Dynamic Source to context menu
•  Issue 297 : Aspect resolution of viewBox not honored on resize of browser
•  Issue 238 : SVGImageNode.as should absorb exceptions due to invalid image URL
• Issue 337: https generates insecure warning with IE6 (FIXED for IE7 and IE8)
•  Issue 388 : Cannot Add USE elements dynamically
•  Issue 361 : Text label is stealing mouse click

Download the release now and get started!

October 12th, 2009: New Release

Yowsers! It's another release of SVG Web, this time code named Beholder:

According to the classic D&D Monster Manual, the Beholder is an "aggressive and avaricious spherical monster that is most frequently found underground." In other words, you don't want to bump into this guy in a back alley.

This release, roughly about 1 month of work, has contributions from many users and developers. We've knocked out a bunch of bugs and features. The full release list:

•  Issue 327  : Patching currentTranslate in causes error in Wikipedia Pan and Zoom tool
•  Issue 326  : Update config.html tool to test for SVG MIME type
•  Issue 316  : Background SVG is not being re-drawn on secondary pages for some browsers
•  Issue 307  : Window resize handler can sometimes throw exceptions on IE if Flash not ready
•  Issue 308  : Implement currentTranslate and currentScale and have it be a fast path
•  Issue 312  : For Shelley Powers: Odd error when using within XHTML document: works with Firefox, does not work with any other browser
•  Issue 176 : Document Makefile dependencies
•  Issue 233  : (regression) inconsistent size, spacing, flow of rendering
•  Issue 304  : tspan-tag ignore s coordinates of upper text-tag
•  Issue 305  : Changing shapes and paths from 'hidden' to 'visible' does not work.
•  Issue 306  : Regression in test_js1.html: Text that should be hidden is not
•  Issue 311  : Summation of transform causes shaking and invalid transformations.
•  Issue 254  : Lamb Animation Sample Doesn't Look Correct
•  Issue 315  : Reduce the number of Sprites created per Node to increase performance
• Issue 321: Support for animating path "d" attribute (except interpolation)
•  Issue 325  : Support data: URL scheme for object tag
•  Issue 329  : in flash renderer, images get cropped if they are moved programmatically
•  Issue 330  : in flash renderer, fill with image pattern does not work (programmatically)
•  Issue 293  : Position of image differs in native vs flash
•  Issue 207  : Doing transform on image dynamically throws exception
•  Issue 343  : Support on* events in SVG "use" element.
•  Issue 344  : Cache image requests for same file

Download the new release and read the Quick Start guide.

September 16th, 2009: New Release!

Hear ye! Hear ye! The SVG Web team has pushed out another release, code named Umber Hulk.

Umber Hulk: "A human-shaped creature with gaping maws flanked by pairs of exceedingly sharp mandibles. Despite their bestial appearance, umber hulks possess a significant intelligence and language of their own."

Notable highlights of this release:

• Having Chinese characters in SVG filenames now works
• getCTM, currentScale, and currentTranslate are now supported, making dragging easier
• Inline on* style events (onclick, etc.) handlers directly in markup is now supported for SVG OBJECTs
• Several fixes for IE 8
• Several fixes when the DOCTYPE is specified
• Lots of fixes around resizing an SVG image based on resizing the browser and it's container
• Fixes to help Shelley Power's Burning Bird site
• Fixes to help the Wikipedia SVG Zoom and Pan too
• Fixes to help Michael Neutzes' German Atlas work
• Fixes to help other developers in the community

and much much more. Special thanks to the many people who helped with this one:

• Rick Masters
• Jeff Schiller
• Michael Neutze
• Shelley Powers
• Ciaranj
• Felix Buenemann
• Le Roux Bernard
• Glen Bremner Stokes
• Bradbury.e
• Richbk
• Fangqq

Please keep in mind SVG Web is still in alpha.

Read the full release notes or download the release.

See older news.