Projects

svgweb

OverviewSVG 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 ... [More] , 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 DemosDraggable 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 StartedA 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! VideosSee 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 NewNovember 23rd, 2009: New ReleaseJust 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 ReleaseYowsers! 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. [Less]

sgweb

A flash project for dynamically rendering scalable vector graphics.