Share via

SVG

  • Article

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

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 CSSAnimations and CSSTransitions.

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="http://www.w3.org/2000/svg">
    <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="http://www.w3.org/1999/xhtml">
            <div>This is a div inserted between a circle and a rectangle drawn in SVG.</div>
        </body>
    </foreignObject>
    <rect x="100" y="100" width="300" height="100" stroke-width="4" fill="blue" stroke="red" />
</svg>

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

SVG–oids

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

Specification

Scalable Vector Graphics (SVG) 1.1 (Second Edition)

How to write a BrikBloc game with HTML5 SVG and Canvas