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

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>

Attributes

baseProfile Deprecated since SVG 2

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

contentScriptType Deprecated since SVG 2

The default scripting language used by the SVG fragment.
Value type: <string> ; Default value: application/ecmascript; Animatable: no

contentStyleType Deprecated since SVG 2

The default style sheet language used by the SVG fragment.
Value type: <string> ; Default value: text/css; 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 Deprecated since SVG 2

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

Global attributes

Core Attributes

Most notably: id, tabindex

Styling Attributes

class, style

Conditional Processing Attributes

Most notably: requiredExtensions, systemLanguage

Event Attributes

Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes

Presentation Attributes

Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

Aria Attributes

aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage notes

Specifications

Browser compatibility