SVG

02/08/2017

6 minutes to read

Contributors

In this article

Scalable Vector Graphics (SVG), an XML markup language for describing two-dimensional vector graphics, offer 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. In addition, SVG images offer unique opportunities for interactivity and animation.

CSS Transitions & Animations for SVG elements

Microsoft Edge build 10240+ supports CSS Transitions & Animations for SVG elements. SVG elements blur the line between content / structure (HTML) and look / style (CSS). SVG elements can be coded into HTML with presentation attributes, (note that they are case-sensitive). Some of these presentation attributes are unique to SVG, such as fill, stroke and stroke-width, others are are shared with CSS, such as opacity or font-size. The SVG specification lists the SVG attributes that may be set as CSS properties.

Most CSS selectors can be used to select SVG elements, including class and ID selectors, as well as pseudo-classes, including :hover, :active, :focus, :first-child, :visited, :link and :lang (but not including ::before and ::after). SVGs can be animated the same way that HTML elements can, using CSS transitions or CSS keyframes.

Some SVG properties cannot be animated through CSS. An SVG path, for example, comes with a set of data (a d="" attribute) that defines the shape of the path. This data can be modified and animated through SMIL, but not CSS. More CSS friendly SVG attributes may be coming soon: See SVG2 Styling Properties Spec. Visit Microsoft Edge platform status for SVG2 updates.

Establishes preset acceleration curves, such as ease (gradually increases speed at the start, then gradually decreases speed at the end, equivalent to cubic-bezier(0.25,0.1,0.25,1); or linear (consistent speed from start to end, equivalent to cubic-bezier(0,0,1,1).

Specifies whether the effects of an animation are visible before or after it plays. Value can be forwards (final property value as defined in the last @keyframes rule is maintained after the animation completes), backwards (beginning property value applied before the animation), both, or none (no change to value except during animation).

Specifies whether an animation is playing or paused. Values can be running or paused.

The following is an example of using the animation shorthand property to set the animation-name of 'sample' with a 3 second duration, an animation-timing-function of 'ease-out', a delay of 2 seconds before beginning, alternating direction back-and-forth, with 4 iterations, no values held before or after the animation, currently in a paused play-state.

animation: sample 3s ease-out 2s alternate 4 none paused;

Note

If there are multiple animations specifying behavior for the same property at the same time, the animation which occurs last in the value of animation-name will override the other animations at that point.

The @keyframes Rule

To get an animation to work, you must bind the animation to an SVG element by defining and calling it with the @keyframes rule. Each @keyframes at-rule defines what should happen at specific moments during the animation. To use keyframes, create a @keyframes rule with a name that will be used by the animation-name property to match an animation to its keyframe. Every @keyframes rule must contain a list of keyframe selectors. Keyframe selector values represent a percentage along the animation at which the keyframe occurs, in addition to the style information for that keyframe.

Keyframe selector values can be a percentage of the animation sequence time at which the keyframe style properties should occur, or can be from (representing the start, 0%) and to (representing the end, 100%).

foreignObject

Microsoft Edge now supports the foreignObject element, allowing developers to use an HTML and CSS layout within a fixed size SVG element. With foreignObject content from a different (foreign) XML namespace can be inserted into the SVG namespace. In the example below, an HTML div element is inserted between a circle and rectangle drawn in SVG.

Microsoft Edge

xlink:href

Also new in Microsoft Edge is support for referencing external resources with xlink:href in the SVG <use> element. The SVG <use> element finds a chunk of an SVG with an #identifier, copies it, and places it at the coordinates given. It is often used in SVG icon systems.

For example, you can now reference a shape defined in the same document using: <svg><use xlink:href="#circle-2"></use></svg>. Or reference an external resource using: <svg> <use xlink:href="defs.svg#rect-2"></use> </svg>. External references also leverage the browser cache -- the server can be set to serve the referenced file with all of the correct headers so that the browser will store it just like any other cached asset.

Legacy support

Microsoft Edge supports the following SVG implementation:

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

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):