svg

< svg‎ | elements
Jump to: navigation, search

svg

This article is In Progress.

W3C Recommendation

Summary

The <svg> element represents the root of a Scalable Vector Graphics (SVG) fragment.


Overview Table

DOM Interface SVGElement

Examples

HTML


<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40"
      fill="red" stroke="blue" stroke-width="5" />
</svg>

Usage

 Scalable Vector Graphics (SVG) is a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML. Only a correct HTML5 parser, using the syntax defined in 8 The HTML syntax, will be able to properly interpret SVG elements when using text/html. When using application/xhtml+xml, one must use proper namespaces to ensure that SVG elements are interpreted correctly.

Notes

Remarks

Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.

If an SVG document is likely to be referenced as a component of another document, you might want to include a viewBox attribute on the outermost svg element of the referenced document. This attribute provides a convenient way to design SVG documents to scale-to-fit into an arbitrary viewport.

svg elements can appear in the middle of SVG content. You can use these elements to embed SVG document fragments within other SVG document fragments. You can also use svg elements within the middle of SVG content to establish a new viewport.

In all cases, you must declare an SVG namespace so that all SVG elements are identified as belonging to the SVG namespace. Typically, you can declare an SVG namespace as follows:

<svg xmlns="http://www.w3.org/2000/svg" ... >


See also

Other articles

External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]