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">
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="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
- Basic shapes
- Clipping, masking, and compositing
- Coordinate systems, transformations, and units
- Filters
- Gradients and patterns
- Interactivity
- Linking and views
- Paths
API Reference
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
Related topics