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
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
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.
<feBlend mode="luminosity" in2="SourceGraphic" />
In this section
- Basic shapes
- Clipping, masking, and compositing
- Coordinate systems, transformations, and units
- Gradients and patterns
- Linking and views