This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

svg

Summary

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

Overview Table

DOM Interface
SVGElement

Examples


<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

Attributions