Share via

Internet Explorer 9 Guide for Developers

  • Article

March 14, 2011

Scalable Vector Graphics (SVG)

Support for Scalable Vector Graphics (SVG) has become one of the most requested features for implementation in Internet Explorer, and 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.

With Internet Explorer 9, Microsoft is proud to introduce support for the basic SVG feature set. The SVG support in Internet Explorer 9 is 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"
        type="image/svg+xml"></object>

  • SVG using the img, embed, iframe, or frame elements, as in the following: 
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

For more information about SVG support in Internet Explorer 9, see MSDN.

For more information about SVG, see the svg element reference page on MSDN.

Basic Shapes

Internet Explorer 9 introduces support for the parsing and rendering of all the basic shapes elements, their attributes, and associated DOM interfaces, as specified in the Basic Shapes module of the SVG 1.1 (Second Edition) specification. The set of basic shapes supported by Internet Explorer 9 consists of the following shapes elements:

Internet Explorer 9 also supports these elements’ associated DOM interfaces.

Following are examples of each of the aforementioned shapes elements. After the markup is a screenshot of the corresponding result in Internet Explorer 9.

Rectangles: rect Element

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="https://www.w3.org/2000/svg">

<rect fill="orange"
    stroke="black"
    width="150"
    height="75"
    x="50"
    y="25" />

 </svg>

  <rect fill="orange"
    stroke="black"
    width="150"
    height="100"
    x="50"
    y="25"
    rx="10"
    ry="50"/>

For more information, see the rect element reference page on MSDN.

Circles: circle Element

  <circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

For more information, see the circle element reference page on MSDN.

Ellipses: ellipse Element

  <ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

For more information, see the ellipse element reference page on MSDN.

Lines: line Element

  <!-- vertical -->
  

  <line x1="0.7cm"
    y1="1cm"
    x2="0.7cm"
    y2="2.0cm"
    style="stroke:
    blue;"/>
  

  

  <!-- diagonal -->
  

  <line x1="30"
    y1="30"
    x2="150"
    y2="85"
    stroke="red"
    stroke-width="4"/>
  

  

  <!-- horizontal -->
  

  <line x1="50pt"
    y1="25pt"
    x2="150pt"
    y2="25pt"
    stroke="yellow"
    stroke-width="3"/>

For more information, see the line element reference page on MSDN.

Polylines: polyline Element

A “polyline” is defined in SVG to be several connected lines, often forming an “open” shape, or a polygon with one or more missing sides or non-convex shapes.

  <polyline points="15, 5, 100 8,3 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

For more information, see the polyline element reference page on MSDN.

Polygons: polygon Element

A polygon is a closed shape.

  <polygon points="15, 5, 100 8,6 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

For more information, see the polygon element reference page on MSDN.

Clipping, Masking, and Compositing

Internet Explorer 9 supports SVG clipping, clip paths, masking, and opacity as specified in the Clipping, Masking, and Compositing module of the SVG 1.1 (Second Edition) specification. (SVG paths are discussed in the Paths section of this document.)

Clipping

A clipping path cuts or “clips” the area that a color, pattern, or image can be drawn. All parts of the graphical element that lie outside the clipping path are not drawn. Clipping paths are fully opaque; the portion of the graphical element that is outside the clipping path is completely invisible.

In SVG, the overflow and clip properties establish initial clipping paths, or shapes in which content will be displayed. By default, the initial clipping path is defined as the SVG viewport, or the rectangular area of the page where the SVG content is displayed.

The clipPath element defines a clipping path. The clipping path is then referenced using the clip-path property. The clip-rule property applies to graphic elements within a clipPath element, and the clipPathUnits attribute defines a coordinate system for the contents of the clipPath. Clipping paths can be applied to text as well as colors, patterns, and images.

Clipping functionality can be accessed programmatically with the SVGClipPathElement DOM interface.

Following is a simple example of an SVG clipping path.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg xmlns="https://www.w3.org/2000/svg"
     xmlns:xlink="https://www.w3.org/1999/xlink"
         width="400" height="100">
 <clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" />
 </clipPath>
 <rect x="20" y="20" width="100" height="100" fill="blue"
    clip-path="url(#clip1)" />
 </svg>

This example uses the clipPath element to define a clipping path in the shape of a circle. The clip-path property is then used to apply the clipping path to a rectangle. This produces the following in Internet Explorer 9.

Masking

A mask is similar to a clipping path, except it is semi-transparent. Masks are often used for compositing foreground objects into the current background.

The mask element defines a mask. The mask is then referenced using the mask property.

The following is a simple example of an SVG mask.

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
     xmlns="https://www.w3.org/2000/svg"
     xmlns:xlink="https://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
     <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
            </g>
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />
        </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="purple"
          mask="url(#myMask)" />
 </svg>

This example uses the mask property to define a mask in the shape of three adjacent circles with different colors. The mask property is then used to apply the mask to a purple rectangle. This produces the following in Internet Explorer 9.

Coordinate Systems, Transformations, and Units

Internet Explorer 9 introduces support for SVG coordinate systems, transformations, and units as specified in the Coordinate Systems, Transformations and Units module of the SVG 1.1 (Second Edition) draft specification. The features supported by Internet Explorer 9 include:

  • Units and percentages.
  • Arbitrary transformations on any element and the transform attribute.
  • The viewBox and preserveAspectRatio properties (including interaction with the overflow property).
  • Support for transforms and transform list types.

Internet Explorer 9 also supports the DOM interfaces associated with SVG coordinate systems and transformations.

Document Structure

Internet Explorer 9 introduces support for basic SVG document structure, metadata, and extensibility functionality, as specified in the Document Structure, Metadata, and Extensibility modules of the SVG 1.1 (Second Edition) specification. The elements supported by Internet Explorer 9 include:

Internet Explorer 9 also supports these elements’ associated DOM interfaces.

Gradients and Patterns

SVG provides the ability to paint or stroke shapes and text using color, gradients, or patterns. Internet Explorer 9 supports SVG gradients and patterns, as specified in the Gradients and Patterns module of the SVG 1.1 (Second Edition) specification.

Gradients

Gradient support is provided through the gradient elements (linearGradient and radialGradient) and attributes (gradientUnits and gradientTransform). Gradient colors are defined by the stop element. The gradient elements can be used in the fill and stroke properties of SVG shapes. For example, consider the following markup:

<svg version="1.1" xmlns="https://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="10%" stop-color="yellow" />
        <stop offset="90%" stop-color="blue" />
      </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
          x="20" y="20" width="300" height="100"/>
 </svg>

This markup defines a rectangle with a linear gradient. The two stop elements specify color stops along a vector for the color transitions—a yellow one at the 10% point and a blue one at the 90% point. This appears as follows in Internet Explorer 9:

Patterns

Pattern support is provided through the pattern element and its attributes. Like gradients, pattern elements can be used in the fill and stroke properties of SVG shapes. For example, consider the following markup.

<svg version="1.1" xmlns="https://www.w3.org/2000/svg">
  <defs>
    <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
        x="0" y="0" width="150" height="100">
      <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue"
        />
      <rect x="100" y="0" width="50" height="50" fill="blue"   
        stroke="yellow" />
    </pattern>
  </defs>
  <ellipse fill="url(#mycircleandsquare)" stroke="black"
     stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
 </svg>

In this example, the pattern element defines a pattern that consists of an alternating small blue square and tiny yellow circle. The ellipse that is then specified is given a fill of the pattern. The following image shows how this appears in Internet Explorer 9.

Interactivity

SVG content can be interactive—that is, it can change in response to user input. Internet Explorer 9 supports SVG interactivity features, as specified in the Interactivity module of the SVG 1.1 (Second Edition) specification, including:

Internet Explorer 9 also supports the Interactivity module’s SVGCursorElement DOM interface.

Additionally, the Internet Explorer 9 supports the focusable attribute as specified in the Interactivity module of the SVG Tiny 1.2 specification. 

The following markup shows a very simple example of SVG interactivity in action.

<svg xmlns=https://www.w3.org/2000/svg
    xmlns:xlink="https://www.w3.org/1999/xlink" width="600"
    height="600">
  <script type="text/ecmascript">
    <![CDATA[

           // object representing circle
           var redcircle;

           // variable representing circle's radius
           var r;
    
           window.onload = function() {
                redcircle = document.getElementById('redcircle');
            r = parseInt(redcircle.getAttribute("r"));
           }
    
           var grow = function() {
            r = 2*r;
                redcircle.setAttribute("r",r);
           }

           var shrink = function() {
            r = r/2;
                redcircle.setAttribute("r",r);
           }
     
    ]]>
  </script>
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
        onmousedown="grow()" onmouseup="shrink()"/>
 </svg>

When this snippet is loaded, it displays a small red circle.

Clicking the circle causes it to grow to twice its size.

The same effect can be achieved with mouseover and mouseout events, which will cause the circle to grow and shrink just by moving the cursor over and off of it.

...
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
    onmouseover="grow()" onmouseout="shrink()"/>
 ...

Linking and Views

SVG enables linking out of SVG content to other pages, as well as predefined views of SVG documents. Views are useful when you want to link directly to, for instance, a close-up of a diagram.

Internet Explorer 9 supports SVG linking and views, as specified in the Linking module of the SVG 1.1 (Second Edition) specification. This includes support for the a and view elements.

The Linking module’s associated DOM interfaces—SVGAElement and SVGViewElement—are also supported.

Linking

Just like in HTML, the a element is used to create a hyperlink in SVG. For instance, the following markup provides a hyperlink on a rectangle.

<svg width="100%" height="100%" version="1.1"
    xmlns="https://www.w3.org/2000/svg"
    xmlns:xlink="https://www.w3.org/1999/xlink">

 <a xlink:href="https://www.bing.com" target="_blank">
    <rect x="20" y="20" width="250" height="250"/>
 </a>

 </svg>

Views

Views can be used to instruct the browser to display an SVG image in a certain way. For instance, the following markup defines a link to a view.

...
 <a xlink:href="#rect-view">
    <text x="320" y="70" style="fill:red">Go to Rectangle</text>
 </a>
 <view id="rect-view" viewBox="280 245 135 85" />
 <rect id="rect-object" style="fill:red" x="280" y="245"
  width="135" height="85"/>
 ...

In this example, the rect-view view is defined as a viewBox with the given coordinates. When the link (the text “Go to Rectangle”) is clicked, the rect-view view appears, which reveals the red rectangle.

The following markup defines another link to a view.

...
 <a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">Go to Circle</text>
 </a>
 <view id="circle-view" viewBox="5 36 128 115"
  preserveAspectRatio="none"/>
 <circle id="circle-object" style="fill:blue" cx="70" cy="85"
  r="45"/>
 ...

In this example, the circle-view view has the attribute preserveAspectRatio set to none. This means that, even though the shape is a circle, it will not scale uniformly to fill the specified viewBox rectangle when the view is invoked. Instead, it will stretch non-uniformly so that its bounding box exactly matches the viewBox rectangle. This markup appears as follows in Internet Explorer 9 when the page is first loaded.

When you click “Go to Circle”, the circle-view view is invoked, and the circle is stretched to fill the viewBox rectangle. This makes it appear to be an ellipse.

Painting and Color

Painting and color are essential components of SVG. The concept of painting encompasses fills (solid color, gradients, patterns), strokes (lines drawn along paths), and marker symbols (applied to the end of line segments; for instance, arrowheads), and can also incorporate opacity. Fills and strokes can apply to paths, text, and shapes.

Internet Explorer 9 introduces support for SVG painting and color, as specified in the Painting: Filling, Stroking and Marker Symbols module and the Color module of the SVG 1.1 (Second Edition) specification. This includes support for:

The Painting module’s associated DOM interfaces—SVGPaint and SVGMarkerElement—are also supported.

Several examples of fills and strokes in SVG are included in the Paths section of this document.

Paths

SVG paths are outlines of shapes. They can be filled in, stroked (a line is drawn along the path), or used as clipping paths (cutouts of other shapes).

Internet Explorer 9 introduces support for SVG paths, as specified in the Paths module of the SVG 1.1 (Second Edition) specification. This includes support for the path element, as well as the d property, which enables parsing of path data.

The Paths module’s associated DOM interfaces are also supported.

The path element enables many different developer scenarios. Following are just a few simple examples. After the markup is a screenshot of the corresponding result in Internet Explorer 9.

Closed Shape with Straight Lines and a Fill

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="https://www.w3.org/2000/svg"
    xmlns:xlink="https://www.w3.org/1999/xlink">

 <path d="M 20 20 L 60 20 L 40 60 z"
    fill="green"
    fill-opacity="0.5"
    stroke="red"
    stroke-width="3" />

 </svg>

Bezier Path (Quadratic)

<path d="M20,30 Q40,50 60,30 T100,30"
    fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

Line with Arc

<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />aa700834

Text

SVG documents can include text. Text is rendered just like other graphic elements in SVG, which means that coordinate system transformations, painting, clipping, and masking can all be applied to text.

Internet Explorer 9 supports text rendering, as specified in the Text module of the SVG 1.1 (Second Edition) specification.

The text element specifies the characters to be drawn. Because SVG does not break lines or wrap words automatically, you must determine line breaks in advance. To adjust text properties (such as font, weight, color, kerning, and many others) within a line of text, SVG provides the tspan element.

Internet Explorer 9 also supports the Text module’s associated DOM interfaces.