<svg>

Usage context

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

DOM Interface

This element implements the SVGSVGElement interface.

Examples

Nested svg element

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

html,
body,
svg {
  height: 100%;
}

<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.

<div class="resizer">
  <iframe
    class="resized"
    srcdoc='

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

  '></iframe>
</div>

.resizer {
  display: flex;
  margin: 1rem;
  padding: 0;
  resize: both;
  overflow: hidden;
  border: 5px dotted red;
  height: 400px;
}
.resizer > .resized {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
}

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

Specifications

Browser compatibility