SVG in IE9 Roadmap

Posted: 18 Mar 2010

As part of our commitment to standards and interoperability, we are excited to provide initial support for the W3C’s Scalable Vector Graphics (SVG) 1.1 (Second Edition) Specification in the Internet Explorer 9 Platform Preview. The second edition of the SVG spec contains updates to the W3C-Recommended first edition SVG 1.1 specification. We expect SVG, supported by good user and developer experiences, to become an integral part of the web. SVG has many advantages over raster images. With our hardware-accelerated graphics, the time is ripe for a rich and interactive graphics-driven web.

SVG enables powerful new web applications. The format makes use of specific XML tags to generate a vector-based image. This makes SVG more easily read and edited by hand than other graphic formats. And because an SVG file is composed entirely of markup, text within the vector image is searchable. Moreover, SVG benefits from the richness of having a DOM. Images are scriptable graphic objects, enabling much more powerful web applications. It’s possible to create dynamically generated images without requiring server-side scripting or browser plug-ins.

SVG offers many distinct advantages over other formats. SVG images scale up with little increase in file size and with no loss of fidelity, making it ideal for use in smaller images and icons. SVG is also a fantastic format for images with larger dimensions. Maps, charts, and diagrams are examples. Small labels and detailed borders remain intact even when images are scaled down. Key areas of focus, like the text in an organization chart or the border of a country, remain crisp and readable after zooming in on the image. The preservation of information in human-readable markup also makes SVG suitable for Wiki-type collaborative images, as it is easily edited. SVG makes changing labels in charts and diagrams a breeze – only a basic text editor is needed. As native SVG support in web browsers continues to broaden, SVG becomes an increasingly good option for implementing interactive and animated web content.

On Interoperability

We value web developers as our customers and anticipate interoperable SVG becoming a powerful tool that can be written easily across different web browsers. Sometimes, however, developing to that end is not so clear.

Patrick Dengler, a member of the SVG Working Group and Senior Program Manager at Microsoft, is working closely with the SVG Working Group to help define the future of SVG and to ensure that our SVG implementation is interoperable. Though the first edition SVG specification received “Recommendation” status years ago, that specification still has some loose ends. As a result, the current SVG implementations in major web browsers vary both in scope and in behavior. Our goal is to make the lives of developers easier by aiming for interoperability. For the portions of the specification that we are implementing, we adhere closely to the spec. In some cases, our decisions were informed by other browsers’ behaviors and the direction of SVG’s future.

Take, for instance, the behavior that should occur when a element has negative values for both rx and ry. It is an unclear situation in the 1.1 specification. A note on the page suggests one behavior whereas error processing guidelines suggest another.

So which is correct? Presto (Opera) treats the negative rx and ry values as 0, Gecko (Firefox) doesn’t render the rectangle at all, and Webkit (Chrome, Safari) uses the specified negative rx and ry values. All of the major browsers do something different. The result here is that there is one (or none) conforming behavior due to the minor inconsistency in the 1.1 spec. Looking forward, the SVG Tiny 1.2 specification clarifies the behavior by specifying that a negative value is not actually an error but is instead unsupported. This is the behavior that the IE9 implementation follows.

SVG in the IE9 Platform Preview

In HTML5, SVG can be included as inline HTML. Current webpages can be updated to include inline SVG with little alteration to their overall structure! For example, look at the following simple, hand-written markup:

DOCTYPE html>
You can insert vector images using inline HTML! They inherit the CSS styles of parent elements like other HTML5 elements.

Colors!!

The IE9 Platform Preview renders it as:

In addition to creating images from scratch, you can use SVG to mark up existing images without editing the underlying image. The following SVG attempts to point out a couple of tough-to-spot otters:

DOCTYPE html>

.highlight {
stroke-width: 5px;
stroke: white;
fill: none;
}

we saw giant otters!

Google Maps achieves similar functionality by using SVG to draw polylines overlaying their maps.

In addition to SVG as inline HTML, the Platform Preview supports inclusion of SVG via inline XHTML, the tag, and as a standalone .svg document.

The following table demonstrates how to include SVG by using the four methods currently available.

Inline HTML

DOCTYPE html>
...

your SVG markup

...
Inline XHTML


DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

...

your SVG markup

...

tag

...

...
.svg document


DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
your SVG markup

HTML5 support means that SVG can also be styled by using CSS. CSS support truly integrates SVG with the webpage and enables developers to use images in an entirely new way. Icons and header images can be skinned. Graphs and maps can be colored on the fly.

Steven Sinofsky’s Clippy demo at MIX10 showed that SVG attributes can be manipulated via the Internet Explorer Developer Tools. It’s as simple as bringing up the Developer Tools (F12), clicking an SVG element in the HTML tree, and adjusting its Style and Attributes in the Properties Pane on the right. You can experiment with the Developer Tools as a great way to become acquainted with SVG.

The Platform Preview also contains basic DOM support. SVG elements can be created and moved, decorated and animated with JavaScript. If an SVG element exists in the Platform Preview, most or all of its associated SVGDOM interfaces are supported. The SVG-oids game and the German Election map demonstrate just a fraction of SVG’s potential.

For VML developers who are interested in learning about SVG, Seth McEvoy has written a VML to SVG Migration Guide. It breaks down VML and SVG by architecture and compares them side-by-side. The use of the more interoperable SVG over VML is highly encouraged.

SVG in Internet Explorer 9

The following is currently supported in the IE9 Platform Preview (at least partially):

Methods of embedding: inline HTML, inline XHTML, , full .svg documents
Structure: , , , ,
Shapes: , , , , , ,
Text
Filling, Stroking, (CSS3) Color
DOML2 Core and SVGDOM
Events
Presentation Attributes and CSS Styling
Transforms: translate, skewX, skewY, scale, rotate

Most of SVG that is currently supported in the Platform Preview is fully implemented. If an element exists in the Platform Preview, it most likely has the corresponding SVGDOM support and can be styled with CSS/presentation attributes.

In future updates, the IE9 Platform Preview will support:

Methods of embedding: , , , css image, .svgz
Gradients and Patterns
Clipping, Masking, and Compositing
Cursor, Marker
Remainder of Text, Transforms, Events

We encourage you to download the Platform Preview and try out its SVG functionality! The Windows Internet Explorer Test Drive site contains a few demos and is a good starting point.

Jennifer Yu
Program Manager

More...

Posted By: SGT Oddball
18 Mar 2010

Related Discussions