<svg>

The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.

Note: The xmlns attribute is only required on the outermost svg element of SVG documents, or inside HTML documents with XML serialization. It is unnecessary for inner svg elements or inside HTML documents with HTML serialization.

Examples

Nested svg element

This example shows that nested svg elements do not need the xmlns attribute.

html
<svg
  viewBox="0 0 300 100"
  xmlns="http://www.w3.org/2000/svg"
  stroke="red"
  fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>

Using dynamic viewport units

In this example, the height and width attributes on the svg element are set using the dynamic viewport value 60vmin, equivalent to 60% of the viewport's width or height, whichever is smaller.

html
<svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' height='60vmin' width='60vmin'>
  <rect x='0' y='0' width='50%' height='50%' fill='tomato' opacity='0.75' />
  <rect x='25%' y='25%' width='50%' height='50%' fill='slategrey' opacity='0.75' />
  <rect x='50%' y='50%' width='50%' height='50%' fill='olive' opacity='0.75' />
  <rect x='0' y='0' width='100%' height='100%' stroke='cadetblue' stroke-width='0.5%' fill='none' />
</svg>

To change the iframe's dimensions try resizing the dotted red border from bottom right corner.

Attributes

baseProfile

The minimum SVG language profile that the document requires. Value type: <string> ; Default value: none; Animatable: no

height

The displayed height of the rectangular viewport. (Not the height of its coordinate system.) Value type: <length>|<percentage> ; Default value: auto; Animatable: yes

preserveAspectRatio

How the svg fragment must be deformed if it is displayed with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes

version

Which version of SVG is used for the inner content of the element. Value type: <number> ; Default value: none; Animatable: no

viewBox

The SVG viewport coordinates for the current SVG fragment. Value type: <list-of-numbers> ; Default value: none; Animatable: yes

width

The displayed width of the rectangular viewport. (Not the width of its coordinate system.) Value type: <length>|<percentage> ; Default value: auto; Animatable: yes

x

The displayed x coordinate of the svg container. No effect on outermost svg elements. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

y

The displayed y coordinate of the svg container. No effect on outermost svg elements. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning these attributes can also be used as CSS properties.

Usage context

Categories Container element, Structural element
Permitted content Any number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# NewDocument

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
svg 1 12 1.5 8 3 18 4 10.1 2 1.0 3
baseProfile 1 ≤79 1.5 15 3 18 4 14 2 1.0 4.4
height 1 12 1.5 8 3 18 4 10.1 3 1.0 3
preserveAspectRatio 1 12 1.5 8 3 18 4 10.1 3 1.0 3
systemLanguage 1 12 12 ≤12.1 3 18 14 ≤12.1 2 1.0 3
version 1 ≤79 1.5 15 3 18 4 14 2 1.0 4.4
viewBox 1 12 1.5 8 3 18 4 10.1 3 1.0 3
width 1 12 1.5 8 3 18 4 10.1 3 1.0 3
x 1 12 1.5 8 3 18 4 10.1 3 1.0 3
y 1 12 1.5 8 3 18 4 10.1 3 1.0 3
zoomAndPan 1 ≤79 1.5 15 3 18 4 14 2 1.0 4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg