The lowdown on IE9's Scalable Vector Graphics

IE9
SVG in IE9: "a fantastic opportunity to take Windows and hardware acceleration and layer a nice graphics experience on top of it"

Scalable Vector Graphics are the equivalent of HTML for graphics. Instead of using an image you describe what you want to see – and if you want to change it once it's been displayed you can do that with a script.

Bing and Google Maps already show routes using SVG – as long as you're not using Internet Explorer.

Microsoft was involved in the original SVG spec back in 2001 (when the W3C asked the company to combine its VML proposal with Adobe's PGML) but IE9 will be the first time Internet Explorer supports SVG without a plug-in.

To the Internet Explorer team, SVG is one of the ways IE9 can enable the next generation of web apps, using DirectX GPU hardware acceleration to make SVG fast and letting SVG elements interact with the HTML page.

"An opportunity for interoperability"

So instead of clicking to open a larger version of an image you can not only zoom into it but drag the image border to give it more space on the page. "IE9 is the first browser that supports SVG inline in HTML out of the box," says senior program manager John Hrvatin.

"We see an opportunity for interoperability," Senior Program Manager Patrick Dengler told us, "but also a fantastic opportunity to take Windows and hardware acceleration and layer a nice graphics experience on top of it."

That shows up in the speed of operations like using the alpha channel to composite multiple images or add transparency, says Lead Program Manager Ted Johnson; "why some things are really fast in IE 9 and not in other browsers has a lot to do with alpha blending and the GPU doing that as fast as the screen can restore compared to doing that in software.

"Mixing image opacity, colours, shapes - they run right on top of the GPU and it's just an amazing experience." You'll see the advantage even on budget PCs, he promises; "If you take even a low end graphics chips with a low end processor like an Atom you're still faster in the GPU, not because the GPU is so good but because the CPU is so bad!"

Endless possibilities

Why is Internet Explorer implementing SVG now? Because of what it offers HTML5 wweb apps; graphics animated by JavaScript, poster-sized images or large backgrounds you can download exceptionally fast, thumbnails, zooming, rotation, alpha compositing and blending, transparency and generally interactive images. SVG images download more quickly and you can do more with them in the web page.

The IE team has been talking to developers about the kind of apps they want to build and they showed us a images of a prototype email web app that would show embedded images in the inbox, with rounded corners and drop shadows; borders highlight key information like your next appointment and meeting requests arrive with maps that let you zoom in and get an animated path to the room you need.

Only some of the SVG features planned for the final release are in the preview. Displaying basic shapes, paths and text are fully implemented; document structure, scripting, styling, transforms (like rotating shapes), painting and filling are partly supported but they're not finished and gradients and patterns, clipping and masking, and working with markers and symbols will come later.

"We do a solid colour fill, but not a pattern fill yet," explained Hrvatin; "in text we do the text element but the key span element we don't yet do."

Contributor

Mary (Twitter, Google+, website) started her career at Future Publishing, saw the AOL meltdown first hand the first time around when she ran the AOL UK computing channel, and she's been a freelance tech writer for over a decade. She's used every version of Windows and Office released, and every smartphone too, but she's still looking for the perfect tablet. Yes, she really does have USB earrings.