Thursday, September 10th, 2009

SVG Web: Making SVG work in IE and beyond

Category: SVG

>

I was excited to work with Brad Neuberg at Google. He is a pragmatic champion of the Open Web; a “do-er”. In the past we have seen his work wrangling the browsers via Really Simple History and Dojo Storage.

This time, we get the fierce Owlbear. That is the code name for the latest release of SVG Web:

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.

Notable highlights of this release are:

  • 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

For more information on SVG Web, check out:

Great work Brad, and the community that has rallied around the cause, such as Rick Masters and James Hight.

To take a peak at some of the hacks that they have had to employ to get this working, check out the source.

Related Content:

Posted by Dion Almaer at 8:11 am
20 Comments

++++-
4.7 rating from 29 votes

20 Comments »

Comments feed TrackBack URI

Since canvas is supported in all browsers minus IE, why was that not used instead of flash? As for IE browsers, why not fall back on VML and/or inline base64 image manipulation?

Comment by TNO — September 10, 2009

The point of the project is to get IE support for SVG – so I don’t see how using Canvas for this (which is unsupported in IE) would have helped in any way – Canvas doesn’t support the things that SVG does (DOM integration, events, etc).

VML was one option, but Flash was viewed as the superior choice (well-documented, well-supported).

Comment by codedread — September 10, 2009

I’ve been looking into this as a way to develop more complex ‘Flash like’ home / landing pages without requiring our company to hire Flash developers. So far this seems like a pretty good solution. One thing I’ve had trouble finding is a description of which features are supported. Does anyone know, for example, whether the feBlend filter will be supported for layer effects like multiply?

Comment by ChrisHarris — September 10, 2009

@TNO: Falling back to VML in IE is not really an option – its implementation is slow (especially in IE8 where it was [maybe intentionally?] made slower 10 times). Also VML lacks of entire set of filter features, even radial gradient is not radial there and more.

I made an attempt to implement SVG in VML (so no flash) in Ample SDK (managed to implement all basic modules including shapes, path, groups and texts): check a collection of tests on http://www.amplesdk.com/examples/svg/

There is also the event flow properly enabled, but such an implementation can hardly manage to display complex enough S images – there will be significant performance problems.

Comment by SergeyIlinsky — September 10, 2009

Finally someone realises that Flash is the key to Internet Explorer.

Comment by Darkimmortal — September 10, 2009

I understand the need for shims, and I’m going to use it, but– shouldn’t the goal be to get rid of non-standards-compliant browsers and opaque plugins? Instead we’re doing Microsoft’s job and helping them stay in business without adapting their browser to web standards, and we’re perpetuating Adobe Flash. There should at least be an option to make it render really ugly and with warning popups in IE.

Comment by randomrandom — September 10, 2009

… and running the demo in IE just crashed my Firefox and explorer.exe. That’s the other thing with Flash.

Comment by randomrandom — September 10, 2009

@randomrandom: Do not throw too many stones to Microsoft fence – it is this company which implemented drafts of the “modern standards” and other cool technologies that did not end up “specced”, and who heavily promoted them at the time, pity the interest from developers came so late that they lost their interest in what they have done.

As for the standards, implementations and standard-complient browsers, you may consider visiting for example SVG Web project demo page and taking a look at how these [rather primitive] SVG demos look often different when displayed with native renderers in different browsers – SVG is way more “quirky” than HTML.

Comment by SergeyIlinsky — September 10, 2009

I think Flash is the way to go for now, whether it is for , or . It’s like a necessary evil to be able to achieve some kind of cross-browser compatability. I’ve put together a site http://www.html5patch.org which is intended as a resource where ‘patches’ like this can be found.

Comment by GalloNero — September 10, 2009

angle brackets got eaten – First line should read : whether it’s for audio, video or svg.

Comment by GalloNero — September 10, 2009

Could parts of this be tied together with an html5 library to get html5 and live dom scripting into IE? That would be sweet – say good bye to waiting for MS to update their browser (hint: they never will). To be clear, I’m talking about using a full page flash embed, to render all html5 elements, and skip IE altogether (maybe even use some HaXe tech to make a javascript compiler work).

Comment by CaptainN — September 10, 2009

i know i should be more “investigative” on my own, but a simple set of instructions would be really useful on the “Bunch of demos showing it off” page…

Comment by aarontgrogg — September 11, 2009

Check out ajaxian rss feed.

Comment by Jeka911 — September 11, 2009

Yeah the RSS feed is full of spam. Me thinkst you’ve been owned (I know its pwned, but I live to buck trends :) ).

Comment by sourceRoot — September 11, 2009

That’s really lovely! I’m actually using OpenLayers javascript library which is rendering a vector map on the application I’m working on. There comes the big problem with the vectors and the different browsers.

Comment by stoimen — September 14, 2009

svg is kinda crappy. you should checkout canvas

Comment by robertlovescss — September 14, 2009

So can we stack the content options, is this legal?

header(“X-UA-Compatible: IE=7,chrome=1″);

I guess I’ll have to test it later to see if it falls back to IE7 mode first if the plugin isn’t there or jumps to chrome mode when the plugin is available.

Comment by ck2 — September 22, 2009

Ah nevermind, just need to check the user-agent for “chromeframe” before sending the “chrome=1″.

Comment by ck2 — September 23, 2009

just wanted to give a one up, this fixed the rendering of vectors for openlayers in ie7!

Comment by kodevicious — November 30, 2009

Leave a comment

You must be logged in to post a comment.