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)
- 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
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.
September 9th, 2009: New Release!
Hi everyone, the SVG Web team has another release packed with lots of goodness.
Starting now we are giving releases not only a date stamp but also simple names, taken from the classic Fiend Folio D&D monster manual. Why? Because the world needs more cheesy release names.
Notable highlights of the svgweb-2009-09-09 release, also known as the Owlbear release ("Terrifying: the body of a bear... the head of an owl"):
- View source - You can now right click on an Flash SVG image and view the SVG source
- Huge improvements to the resizing code - the size of SVG objects on the page now change based on the zoom factor, resizing the window, etc.
- Performance improvements
- The demo.html file is much more robust now
- getScreenCTM, matrix inversions, createSVGPoint, and SVGPoint.matrixTransform are now implemented
- The internal JavaScript architecture has been cleaned up and simplified for Internet Explorer
Learn more:
