SVG in IE9 Roadmap
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 <rect> 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.
<svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="100" height="100">
<rect x="10" y="10" width="50" height="80" rx="-10" ry="-10" fill="red"/>
</svg>
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>
<p style="font-family:Georgia;font-size:9pt;">You can insert vector images using inline HTML! They inherit the CSS styles of parent elements like other HTML5 elements.
<BR>
<svg width="200" height="100">
<circle cx="50" cy="50" r="45" fill-opacity=".5" fill="red"/>
<circle cx="100" cy="50" r="45" fill-opacity=".5" fill="yellow"/>
<circle cx="75" cy="100" r="45" fill-opacity=".5" fill="blue"/>
<text x="40" y="70" fill="white">Colors!!</text>
</svg>
</p>
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>
<svg width="120" height="90" >
<style>
.highlight {
stroke-width: 5px;
stroke: white;
fill: none;
}
</style>
<image x="0" y="0" width="120" height="90" xlink:href="https://photos-a.ak.fbcdn.net/photos-ak-sf2p/v160/140/48/1107073/n1107073_31705640_3439.jpg"/>
<circle cx="90" cy="50" r="15" class="highlight"/>
<circle cx="22" cy="47" r="10" class="highlight"/>
<rect x="0" y="0" width="120" height="20" fill-opacity=".5" fill="black"/>
<text x="5" y="15" fill="white" font-size="8pt" font-family="Verdana">we saw giant otters!</text>
<rect x="0" y="0" width="120" height="90" stroke-width="1" stroke="black" fill="none"/>
</svg>
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 <object> tag, and as a standalone .svg document.
The following table demonstrates how to include SVG by using the four methods currently available.
Inline HTML |
|
Inline XHTML |
|
<object> tag |
|
.svg document |
|
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, <object>, full .svg documents
- Structure: <svg>, <defs>, <use>, <g>, <image>
- Shapes: <circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon>, <path>
- 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: <embed>, <iframe>, <img>, 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
Update 3/19 - updated the second code sample to remove the xmlns and version attributes from the SVG tag since these aren't necessary and could be confusing in the context of the other samples.
Comments
Anonymous
January 01, 2003
I suggest: Internet Explorer 10=IE9+virtual pc the virtual pc provide a MiniWin OS(like windows XP) which can: 1 a regulation for auto downloading and running win32 exe,dll form IIS. 2 for each web app,give a proper sandbox for security. 3 communication with other common web page. 4 isolated virual disk,virtul memory for each web app(exe,dll)Anonymous
March 18, 2010
SVG... looks rignt. BUT WHERE IS THE CANVAS? IMPLEMENTING CANVAS USING C++ IS NOT DIFFICULT!!! AND IT'S IMPLEMENTABLE USING DIRECTX/WPF. And WPF(Using DirectX) can be implemented in XP, Why not IE9?Anonymous
March 18, 2010
re: infinite re: canvas support: http://en.wikipedia.org/w/index.php?title=Canvas_element&oldid=348350142#Intellectual_property_over_canvas canvas is patented by apple. As they are in the w3c working group, they have an obligation to license it royalty-free... but ONLY WHILE IT'S A W3C RECCOMENDATION. even css2.1 is only a candidate at the moment... legally, MS cannot begin implementing canvas until html5 is a proper standardAnonymous
March 18, 2010
The comment has been removedAnonymous
March 18, 2010
The comment has been removedAnonymous
March 18, 2010
You have declared that "One code, One markup, One script, Runs everywhere" , but, how can we implement this using a canvas-unsupported ie? And here is an UI design done by me for IE9: http://phenacenn.deviantart.com/art/Internet-Explorer-9-UI-157718799Anonymous
March 18, 2010
Very happy about this! Microsoft gets it right eventually, in this case at least.Anonymous
March 18, 2010
"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..." That made me laugh. Patrick's been a member for 4 weeks now? Or is it eight? But the SVG group has been around for 10 years? And now he's giving the SVG group advice?Anonymous
March 18, 2010
I love how Chrome (WebKit) handles it!Anonymous
March 18, 2010
"Most of SVG that is currently supported in the Platform Preview is fully implemented." Putting it in real terms: "The parts of SVG we support we fully implement." iow, "We don't fully implement SVG".Anonymous
March 18, 2010
So this level of SVG support (28% according to www.codedread.com/svg-support.php) is all we can expect in IE9? I was expecting at least 80% up and that might take the IE team 4-5 more releases to catch up. While accelerated graphics are certainly the best way moving forward, Windows XP users should be given the rendering engine of IE9 to keep up with web standards. Just my two cents.Anonymous
March 18, 2010
ignore winxp let's software steps further fasterAnonymous
March 18, 2010
Jose, as the article describes, SVG support in IE9 is not feature complete in the IE Platform Preview. Rob, the statement you quote refers mainly to the methodical approach we're taking in implementing SVG and not to the level of support the team is committed to.Anonymous
March 18, 2010
Jose, Microsoft has stated they will have a great deal more SVG ready in subsequent IE9 previews. This is only a start.Anonymous
March 18, 2010
foreignObject support for HTML content is an important aspect of SVG - does IE9 support it?Anonymous
March 18, 2010
@Jose, "I was expecting at least 80% up and that might take the IE team 4-5 more releases to catch up." I think Microsoft will release 4-5 more IE9 preview/alpha/beta within 5-6 months, so they'll catch up very soon.Anonymous
March 18, 2010
@wechrome http://ie.microsoft.com/testdrive/info/FrequentlyAskedQuestions/Default.html "Q. How often will be you be updating this? A. We hope to release a new version of Internet Explorer Platform Preview approximately every 8 weeks."Anonymous
March 18, 2010
I hate you microsoft and IE team. Will have push chrome frame plugin on IE forever!!!!!! HTML5 with full canvas and CSS3 is indeed just a far away dream. Don't think you can handle criticism, being dictatoring this blog deleting comments at will. You're doing IE6 again, for the 4th time.Anonymous
March 18, 2010
@Rob: they could go the Webkit way and implement all objects and methods in a way that'd work on test cases (that's how Webkit scored 100/100 at Acid3 at first), or go the Mozilla way and enable a spec only once the entire engine is finished, road tested, tried and true (see how long it took Gecko to switch from CSS 2.0 to CSS 2.1, and the status of SMIL support). Instead, if Trident doesn't support SVG in its entirety (that's a difficult scope to define), what SVG objects Trident supports, is fully supported: all properties and methods. Or something. If I read that properly, current engines run the test case this way:
- Presto ignores the negative value (it is seen as erroneous)
- Gecko doesn't support rectangles with negative radius (the object's declaration is wrong)
- Webkit implements negative radius. Of all, Webkit is the 'most wrong': in 1.1, a negative value is defined as an error, and the UA should switch into error mode - which, in all cases, includes stopping the parsing - and this is what Gecko does (Gecko's SVG implementation predates Tiny 1.2). In Tiny 1.2, negative values should be ignored: that's what Presto does. For those of you that say 'Webkit is t3h 1337", proof is made: Webkit ain't standards-perfect either. Personally, I also regret the lack of IE 9 for WinXP, eventhough I can understand it. It would be nice though, to have the rendering and script engines backported, even in software mode - as in, a Trident 5.0 Frame "à la" Chrome Frame. As an aside: the IE team may have been the first to think about using Direct2D for rendering in IE, but Mozilla may beat you to the first shipping final version: current Firefox 3.7 nightlies can use Direct2D, eventhough it's not enabled by default -yet. You'd better hurry...
Anonymous
March 18, 2010
SVG support looks nice so far. Though it still needs a lot to be done. I semi-regularly contribute to Wikimedia Commons with flag images and usually I'm using the viewBox and preserveAsspectRatio attributes to control the coordinate system for and ensure proper scaling without having to hassle with floating-point values which might be inaccurate in some cases. IE doesn't support viewBox yet (or the upscaling to the SVG's size), I'd hope that will come. Otherwise I'd have to rely on Firefox again to test my images :) If anyone there is interested in some test cases. I put one rendering test here: http://hypftier.de/dump/svg-test A recursive markup approach on the Sierpinski carpet also serves well as a performance measurement: http://hypftier.de/dump/Sierpinski%20carpet%206.svg and http://hypftier.de/dump/Sierpinski%20carpet%207.svg – the 6th iteration already takes quite a while to render in IE and other renderers (and due to the lack of viewBox support doesn't display right in IE yet).Anonymous
March 18, 2010
I've not read this blog since November when the first early preview of IE9 was posted. I was disappointed back then and angry that the topics covered didn't feature enough about compliance. However reading the recent updates I'm pleasantly surprised by the IE teams progress. It all looks positive, I just hope it continues this way. I'd rather see them get IE9 right, than ship it sooner. Most developers know the pain of a new IE coming too early before it's standards compliance is up to scratch. SVG support is nice but it divides developers again - if Webkit browsers, FF and Opera go the Canvas route and MS goes SVG where does that leave us?Anonymous
March 18, 2010
@Greg K All other browsers support both SVG and Canvas, all "to a degree" (with Opera's SVG degree being the highest), so it's not that other browsers are going the "Canvas route". So where does that leave us? Use SVG, or rather, the consistently supported parts, and the same markup will work everywhere.Anonymous
March 18, 2010
Lest we forget, SVG's first name is 'SCALABLE'. IE9 has the opportunity to present Zoom and Pan as intuitive and responsive even for the largest of SVG files. (Other browsers seem to have dis-remembered this.) Please provide various options, and get solid feedback for this very,very important feature.Anonymous
March 18, 2010
I personally think, that IE9 in first not alpha/beta/RC release will support approx. 50% of SVG 1.1 specification, but it is good enough for me, for you not? Although SMIL support would be very welcome, yes, but that will come, in my opinion, in some later versions... But all in all => good work and go on, don't slow down in your implementation...Anonymous
March 18, 2010
No canvas mentioned, son I am disappointAnonymous
March 18, 2010
I know this is off topic, but please <Canvas> tag support and CSS Transitions. You guys must add these things, for further relevancy to me.Anonymous
March 19, 2010
I was going to post requesting various methods of implementing such as via the img element and CSS background-images. I'm not a graphics person so SVG isn't something I've spent much time. I presume that DOML2 Core and SVGDOM cover JavaScript / SVG combined so that if I wanted to replace a .style.backgroundImage via JavaScript/CSS that I could do this with an SVG image? If so I'll be completely happy with the current set of implementation of methods to implement SVG in to (X)HTML. Also while I wouldn't expect hardware acceleration in IE9 on XP I do expect IE9 to be released for XP. If Microsoft wants people like me to buy Windows 7 or use my copy of Vista then put back all the stuff you took out or just make Windows 8 XP with Aero and the networking and security improvements otherwise I'm sticking with XP until I find a viable Linux alternative. XP fulfills the P in PC, Vista and 7 do not.Anonymous
March 19, 2010
This is fantastic! I understand the commenters looking for canvas, but please.. let's appreciate the steps as they come. Having SVG support in IE is a major win for the web. Thanks for this, MS. Keep it up !Anonymous
March 19, 2010
I think that you should look at adding EventSource too. This blog was supposed to be communication with developers, but all I can see is talking to developers after decisions have been made. Where is the roadmap of features so that we don't constantly have to ask for the same features with no response? My name is billybob and IE9 was NOT my idea.Anonymous
March 19, 2010
I bet xmlns:xlink="http://www.w3.org/1999/xlink" is missing somewhere in your 3rd exampleAnonymous
March 19, 2010
Hmm, no filters or SVG Animation in IE9?Anonymous
March 19, 2010
@Innovimax: That example is using inline HTML, not XHTML. The XLink namespace is implied and does not to be explicitly defined. The same goes for the SVG namespace which I've included unnecessarily. Thanks for calling attention to that; I'll remove the extraneous attributes.Anonymous
March 19, 2010
So pleased to see what's going to be supported in SVG, especially XHTML and SVG. And I understand the company's concerns about Canvas, and the patent issues while the API is still only a working draft. Just a note: HTML5 support for SVG had nothing to do with CSS working with SVG. We had this before HTML5. Also, for those who tell we who have XP machines to just upgrade: not all of us have the bucks to buy newer machines. I could really wish that IE9 worked on XP, not just so that I can test it, but so that we can eliminate IE6-IE8 that much more quickly. Anyway, thanks again for the SVG/XHTML support, Microsoft.Anonymous
March 19, 2010
I find it humorous that IE9 won't implement Canvas simply because Apple invented it. C'mon softies, copying Apple is what put you on the map!Anonymous
March 19, 2010
Finally - been waiting for this for nine years. But what are the implication Will 90% of generated SVG use the http://schemas.microsoft.com/2010/SVGExtensions/ namespace ? Will roundtripping of SVG files work between different vendor tools? Will Visio, Word, PowerPoint etc. use SVG as their native graphic format and when?Anonymous
March 19, 2010
The comment has been removedAnonymous
March 19, 2010
Sorry for the tangent here. @Johannes: You can save as Optimized SVG which strips out all the inkscape/sodipodi elements and attributes. Alternatively you can use the standalone scour script which does the same thing.Anonymous
March 20, 2010
@Tony Schreiner [MSFT] or @IE team: IE 9 preview currently implements 28% of SVG () Opera, Chrome, Safari and Firefox implement 94% , 87%, 82% and 72% respectively. What are your plans to the final IE 9 version? 30% 40% 95? Please can you share with us your goals with more precision? Thank you very much () http://www.codedread.com/svg-support.phpAnonymous
March 21, 2010
@Johannes "Besides, look at Inkscape if you want to know how ugly SVG becomes when it's used as a native graphics format. 75 % of its contents are suddenly in a sodipodi or inkscape namespace and even if you do save as “Plain” SVG the code is a mess. No thanks; I'd prefer if the native file format and an export format are still two different things" There is a free tool specifically designed for IE users who want to create lean W3C SVG for IE9 source and other apps. The tool require the Adobe SVG Viewer Add-on for IE8. See: http://www.svgDiscovery.com/svgDiscovery.htmAnonymous
March 21, 2010
The comment has been removedAnonymous
March 22, 2010
So there is a moment after all, when the IE may actually get some praise even from me. This may represent nice move forward fore the web. The achieved greater interoperability on scalable graphics would be very very helpful...Anonymous
March 23, 2010
The comment has been removedAnonymous
March 23, 2010
As long-time user of XP pro I heard great things about Windows 7. So, in order to particate in the IE9 SVG testing stage, I moved to a Windows 7 machine. I think the only folks who gave Windows 7 a glowing report were Vista users...so far, I'm not impressed for its SVG support. Anyway, the first challange was to get Windows 7 and IE8 to recognize .svg and .svgz files. These file extensions must be added. Then, the Adobe SVG Viewer, a so-called IE Add-on, does not load as an addon, but must be SAVED to the Downloads folder as a separate program. It then must be run from there, as Administrator. I think Windows 7 must address these issues soonest, to assure IE9 seamlessly accepts SVG.Anonymous
March 27, 2010
"The use of the more interoperable SVG over VML is highly encouraged." Wow, that was unexpected in a microsoft blog. (and also awesome)!Anonymous
March 27, 2010
Please implement SMIL as well! It goes along perfectly with SVG. 10 years ago(!) I did a "by hand" SVG test site for the Adobe Viewer with SMIL animation. ( http://www.burningpixel.com/svg/SVGtest3.htm ) I still think it's one of the coolest (simple/dumb) websites I've ever seen. Nope, no humility on that one... Thanks,
- Ron
Anonymous
March 28, 2010
I want to test SVG and report bugs for IE9. This roadmap helped me somewhat to understand which areas had been substantially completed so I could do some testing in those areas, and not waste time in areas that had not yet been included. However, I find that I need a more detailed list of current implementations and those under construction. This is a suggestion to include a more specific list of SVG implemented vs 'to do' in the next Platfom Preview version.Anonymous
March 30, 2010
Now that Internet Explorer has embraced SVG, I think it is time to look at IE8 users and their transition into IE9. This is a suggestion that should make the process of viewing SVG seamless in both browser versions. The key is the <EMBED> element. This provides very solid svg viewing in IE8 if the Adobe SVG Viewer ActiveX is installed in the user's computer. The <EMBED> call in IE9 could include a default flag that used the Adobe ActiveX if it were available. This would then allow IE9 to view the many 1000's of svg apps created by svg developers during the past 10 years. Furthermore, in the best of SVG worlds, the Adobe ActiveX could be a resident ActiveX in IE9.Anonymous
March 30, 2010
@Francis: Adobe discontinued support for their SVG Viewer ActiveX control 14 months ago. Ref: http://www.adobe.com/svg/viewer/install/mainframed.htmlAnonymous
March 30, 2010
Does the current version support svgz (compressed svg)?Anonymous
March 30, 2010
@Esveegee: As noted in response to your comment on the other post, no IE9PP1 does not support the compressed SVG format known as SVGZ. (You can use HTTP compression however, that will work fine).