SVG

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

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)

Related topics

How to write a BrikBloc game with HTML5 SVG and Canvas

 

 

Show:
© 2014 Microsoft. All rights reserved.