Scalable Vector Graphics (SVG) is a powerful way to add high-fidelity, easily scalable visuals—from small and simple to large and complex— to a website without the need for a plug-in or separate viewer.Windows Internet Explorer 9 introduced support for the basic SVG feature set, based on the SVG 1.1 (Second Edition) specification recommendation (for desktop browsers).

The following functionality has been implemented:

  • Most SVG document structure, interactivity (scripting events), and styling (inline and through CSS)
  • Many presentation elements and their corresponding attributes and DOM interfaces, including:
    • basic shapes
    • filling, stroking, marker, and color
    • gradients and patterns
    • paths
    • text

Internet Explorer 9 supports the following methods to display SVG markup:

  • SVG fragments in HTML5 embedding, without using a foreign object (that is, simply include an <svg> tag within your HTML)
  • SVG as full document type (with .svg file extension)
  • SVG in XML or XHTML (similar to the HTML5 method, only with XML or XHTML files)
  • SVG as a CSS image
  • SVG using the object element, as in the following (note the type, height, and width attributes):
    <object data="rect2.svg" width="100%" height="400px"
  • SVG using the img, embed, iframe, or frame elements, as in the following:
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

SVG Updates in Microsoft Edge

Microsoft Edge enhances SVG functionality with support for new features. For example in Microsoft Edge, SVGpresentation attributes: are now animatable with CSS Animations and CSS Transitions.

Also new in Microsoft Edge is the foreignObject element, which enables content from another XML namespace to be inserted into an SVG namespace. The foreignObject element is often used to insert HTML elements for processing along with SVG code. In the example below, an HTML div tag is inserted between a circle and rectangle drawn in SVG.

<svg width="500" height="500" xmlns="">
    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="red" />
    <foreignObject x="100" y="25" width="250" height="50">
        <body xmlns="">
            <div>This is a div inserted between a circle and a rectangle drawn in SVG.</div>
    <rect x="100" y="100" width="300" height="100" stroke-width="4" fill="blue" stroke="red" />

For more information on foreignObject properties, go to the foreignObject API reference page.

Microsoft Edge also introduces full support for <feBlend> blend modes. New blend modes expand existing values normal, multiply, screen, overlay, darken, and lighten with color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.

To use the new modes, just specify the desired mode in the <feBlend> element. For example:

<feBlend mode="luminosity" in2="SourceGraphic" />

In this section

API Reference

Scalable Vector Graphics (SVG)

Samples and tutorials

SVG Coordinate Transformations
Basic SVG animation
Intermediate SVG Animation
Advanced SVG Animation
How to Add SVG to a Webpage
How to Zoom and Pan with SVG
How To Choose Between SVG and Canvas
Examples of Use of SVG and Canvas

Internet Explorer Test Drive demos

Atlas zur Europawahl 2004 in Deutschland
Hands on: SVG Filter Effects
Real-world Diagrams
SVG Dice

IEBlog posts

Best Practices for Getting Started with SVG
SVG Filter Effects in IE10
Thoughts on when to use Canvas and SVG
SVG Open 2011: Where SVG meets the Web
Comparing Hardware Accelerated SVG across Browsers with Santa’s Workshop
More on SVG
Getting Ready for SVG Open
Getting to SVG 2.0: A report from the SVG Working Group Face-to-Face
SVG in IE9 Roadmap


Scalable Vector Graphics (SVG) 1.1 (Second Edition)

Related topics

How to write a BrikBloc game with HTML5 SVG and Canvas



© 2015 Microsoft