The lowdown on IE9's Scalable Vector Graphics

16th Mar 2010 | 17:07

The lowdown on IE9's Scalable Vector Graphics

Hardware-accelerated SVG graphics - but Microsoft says some features don't make sense

"An opportunity for interoperability"

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."

SVG issues and fonts

Problems with SVG

There are also areas where the SVG spec has some issues, especially when it interacts with CSS; if you follow the spec strictly the tiger image (below) often used to demonstrate the power of SVG will have unfeasibly thick black whiskers. "There are bugs or just areas ofthe sec that are not as detailed as they need to be," says Patrick Dengler; "we get to go back to the working group and say we need to fix this".

SVG tiger

And there are three features in the 800-page SVG 1.1 spec that IE9 won't support at all. Part of that is a question of time and resources, says Dengler; "It's a lot of work and we want to get this out on time". But they're also complex features that either aren't widely used or duplicate functionality in Windows according to Hrvatin.

"Filter effects are extremely mathematical complex; there are more than ten different filter effects and they're not really practical for web developers to use; for SVG 2.0 we're looking at a higher level abstraction." Declarative animation is only just being implemented in other HTML 5 browsers, he says.

What's more, few web development tools support it; Microsoft's survey of the Web found that the non-SVG version of declarative animation (called HTML+TIME) that IE already supports is only used by two sites. The W3C working group is also looking at the convergence of CSS and HTML 5 to see if this can cover the same ground.

Are SVG fonts useful?

SVG fonts allow a Web site to draw an image of a font rather than displaying it as text if the font isn't on the user's computer. Although IE general manager Dean Hachamovitch originally considered including it in IE 9, he said it didn't make sense for Windows.

Zoom in in the IE 9 preview and text stays smooth and crisp no matter how large it gets; Hachamovitch showed another browser zooming in on the same SVG chart with distinct jagged edges and suggested that it didn't make sense to give up the sub-pixel positioning in Direct2D.

"If you look at what the operating system does presenting fonts using ClearType and True Type and scaling and all the things that go into font hinting, so you get beautiful fonts worldwide, including Arabic scripts… it's not clear whether SVG Fonts is deeply useful and good or kind of a neat trick on the side. Do we need like another pipeline trying to draw fonts on screen?"

IE 9 is concentrating on the SVG developers will actually use, says John Hrvatin; "We believe we're implementing the interoperable set and based on what we see of other browsers today, we believe the performance will be superior, the rendering quality will be superior".


Liked this? Then check out 10 Internet Explorer 8 tips direct from Microsoft

Sign up for TechRadar's free Weird Week in Tech newsletter
Get the oddest tech stories of the week, plus the most popular news and reviews delivered straight to your inbox. Sign up at

Follow TechRadar on Twitter

Internet Explorer Microsoft IE9
Share this Article

Most Popular

Edition: UK
TopView classic version