Section 4.8

Embedded content

13 entries from this section of the HTML Living Standard, in the order the standard presents them.

All 13 elements together

One small page that uses every element of this section. Turn on Show tags and point at any part of the page: a label tells you which element draws it. Click to jump to that element's details below.

Embedded content Written for this site

Every element of this section is in the page above. Point at one to find it, click it to read its details.

<div class="gallery">
  <figure>
    <picture>
      <source srcset="https://developer.mozilla.org/shared-assets/images/examples/surfer.jpg" media="(max-width: 600px)">
      <img src="https://developer.mozilla.org/shared-assets/images/examples/painted-hand.jpg" alt="An open hand covered in blue and red paint" width="298" height="332">
    </picture>
    <figcaption><b>picture, source, img</b>: a painted hand on wide screens, a surfer on narrow ones. Make the window narrow to swap.</figcaption>
  </figure>

  <figure>
    <video controls crossorigin="anonymous" width="320" src="https://developer.mozilla.org/shared-assets/videos/friday.mp4">
      <track default kind="captions" srclang="en" label="English" src="https://developer.mozilla.org/shared-assets/misc/friday.vtt">
    </video>
    <figcaption><b>video, track</b>: press play, the captions come from the track.</figcaption>
  </figure>

  <figure>
    <audio controls src="https://developer.mozilla.org/shared-assets/audio/t-rex-roar.mp3"></audio>
    <figcaption><b>audio</b>: a dinosaur roar.</figcaption>
  </figure>

  <figure>
    <iframe title="A small page inside this page" srcdoc="<p style='font:16px system-ui;margin:16px'>I am a whole web page, framed inside another one.</p>"></iframe>
    <figcaption><b>iframe</b>: a page inside the page.</figcaption>
  </figure>

  <figure>
    <embed type="image/jpeg" src="https://developer.mozilla.org/shared-assets/images/examples/flowers.jpg" width="250" height="200">
    <figcaption><b>embed</b>: an external resource, here purple flowers.</figcaption>
  </figure>

  <figure>
    <object type="video/mp4" data="https://developer.mozilla.org/shared-assets/videos/flower.mp4" width="250" height="200"></object>
    <figcaption><b>object</b>: another way to embed a resource, here a video.</figcaption>
  </figure>

  <figure>
    <map name="infographic">
      <area shape="poly" coords="130,147,200,107,254,219,130,228" href="https://developer.mozilla.org/docs/Web/HTML" alt="HTML">
      <area shape="poly" coords="130,147,130,228,6,219,59,107" href="https://developer.mozilla.org/docs/Web/CSS" alt="CSS">
      <area shape="poly" coords="130,147,200,107,130,4,59,107" href="https://developer.mozilla.org/docs/Web/JavaScript" alt="JavaScript">
    </map>
    <img usemap="#infographic" src="https://developer.mozilla.org/shared-assets/images/examples/mdn-info2.png" alt="MDN infographic">
    <figcaption><b>map, area</b>: each colored part of the image is a different link.</figcaption>
  </figure>

  <figure>
    <svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="A smiling sun">
      <circle cx="60" cy="60" r="34" fill="#facc15"></circle>
      <circle cx="48" cy="54" r="4" fill="#78350f"></circle>
      <circle cx="72" cy="54" r="4" fill="#78350f"></circle>
      <path d="M46 70 Q60 82 74 70" stroke="#78350f" stroke-width="4" fill="none" stroke-linecap="round"></path>
    </svg>
    <figcaption><b>svg</b>: a drawing made of shapes, sharp at any size.</figcaption>
  </figure>

  <figure>
    <p class="formula">
      <math display="block">
        <mrow>
          <mi>x</mi><mo>=</mo>
          <mfrac>
            <mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow>
            <mrow><mn>2</mn><mi>a</mi></mrow>
          </mfrac>
        </mrow>
      </math>
    </p>
    <figcaption><b>math</b>: a math formula written with MathML.</figcaption>
  </figure>
</div>

body { margin: 0; font-family: system-ui, sans-serif; color: #0c4a6e; background: #f0f9ff; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 14px; padding: 20px; }
figure {
  margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid #bae6fd; border-radius: 14px; padding: 16px; text-align: center;
}
img, video, embed, object, iframe { max-width: 100%; height: auto; border-radius: 10px; }
img[usemap] { max-width: none; }
picture img { max-height: 220px; width: auto; }
embed, object { height: 200px; }
iframe { width: 100%; height: 120px; border: 1px dashed #7dd3fc; background: #f0f9ff; }
audio { width: 100%; }
.formula { margin: 0; font-size: 1.3rem; }
figcaption { font-size: 0.85rem; color: #075985; line-height: 1.5; }
figcaption b { font-family: ui-monospace, monospace; color: #0369a1; }

Each element in detail

`<picture>`

Baseline: widely availablesince September 2018

WHATWG Image

MDN The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

Live preview Example from MDN

<!--Change the browser window width to see the image change.-->

<picture>
  <source
    srcset="https://developer.mozilla.org/shared-assets/images/examples/surfer.jpg"
    media="(orientation: portrait)" />
  <img src="https://developer.mozilla.org/shared-assets/images/examples/painted-hand.jpg" alt="" />
</picture>

Content model

Categories: flow; phrasing; embedded; palpable
Parents: phrasing
Children: source*; one img; script-supporting elements
Interface: HTMLPictureElement

Browser support

First browser version supporting <picture>
Chrome	38
Edge	13
Firefox	38
Safari	9.1
Chrome Android	38
Safari iOS	9.3

First version with support, from MDN browser-compat-data.

Attributes

No element-specific attribute.

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<source>`

Baseline: widely availablesince January 2018

WHATWG Image source for img or media source for video or audio

MDN The <source> HTML element specifies one or more media resources for the <picture>, <audio>, and <video> elements. It is a void element, which means that it has no content and does not require a closing tag. This element is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.

Live preview Example from MDN

<video controls width="250" height="200" muted>
  <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm" />
  <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4" />
  Download the
  <a href="https://developer.mozilla.org/shared-assets/videos/flower.webm">WEBM</a>
  or
  <a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4">MP4</a>
  video.
</video>

Content model

Categories: none
Parents: picture; video; audio
Children: empty
Interface: HTMLSourceElement

Browser support

First browser version supporting <source>
Chrome	3
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	2

First version with support, from MDN browser-compat-data.

Attributes

type: Type of embedded resource Value: Valid MIME type string
media: Applicable media Value: Valid media query list
src: Address of the resource Value: Valid non-empty URL potentially surrounded by spaces
srcset: Images to use in different situations, e.g., high-resolution displays, small monitors, etc. Value: Comma-separated list of image candidate strings
sizes: Image sizes for different page layouts Value: Valid source size list
width: Horizontal dimension Value: Valid non-negative integer
height: Vertical dimension Value: Valid non-negative integer

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<img>`

Baseline: widely availablesince January 2018

WHATWG Image

MDN The <img> HTML element embeds an image into the document.

Live preview Example from MDN

<img
  class="fit-picture"
  src="https://developer.mozilla.org/shared-assets/images/examples/grapefruit-slice.jpg"
  alt="Grapefruit slice atop a pile of other slices" />

.fit-picture {
  width: 250px;
}

Content model

Categories: flow; phrasing; embedded; interactive*; form-associated; palpable
Parents: phrasing; picture
Children: empty
Interface: HTMLImageElement

Browser support

First browser version supporting <img>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

alt: Replacement text for use when images are not available Value: Text*
src: Address of the resource Value: Valid non-empty URL potentially surrounded by spaces
srcset: Images to use in different situations, e.g., high-resolution displays, small monitors, etc. Value: Comma-separated list of image candidate strings
sizes: Image sizes for different page layouts Value: Valid source size list
crossorigin: How the element handles crossorigin requests Value: "anonymous"; "use-credentials"; the empty string
usemap: Name of image map to use Value: Valid hash-name reference*
ismap: Whether the image is a server-side image map Value: Boolean attribute
controls: Show user agent controls Value: Boolean attribute
width: Horizontal dimension Value: Valid non-negative integer
height: Vertical dimension Value: Valid non-negative integer
referrerpolicy: Referrer policy for fetches initiated by the element Value: Referrer policy
decoding: Decoding hint to use when processing this image for presentation Value: "sync"; "async"; "auto"
loading: Used when determining loading deferral Value: "lazy"; "eager"
fetchpriority: Sets the priority for fetches initiated by the element Value: "auto"; "high"; "low"

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<iframe>`

Baseline: widely availablesince January 2018

WHATWG Child navigable

MDN The <iframe> HTML element represents a nested browsing context, embedding another document into the current one.

Live preview Example from MDN

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>

iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}

Content model

Categories: flow; phrasing; embedded; interactive; palpable
Parents: phrasing
Children: empty
Interface: HTMLIFrameElement

Browser support

First browser version supporting <iframe>
Chrome	1
Edge	12
Firefox	1
Safari	≤4
Chrome Android	18
Safari iOS	≤3.2

First version with support, from MDN browser-compat-data.

Attributes

src: Address of the resource Value: Valid non-empty URL potentially surrounded by spaces
srcdoc: A document to render in the iframe Value: The source of an iframe srcdoc document*
name: Name of content navigable Value: Valid navigable target name or keyword
sandbox: Security rules for nested content Value: Unordered set of unique space-separated tokens, ASCII case-insensitive, consisting of "allow-downloads""allow-forms""allow-modals""allow-orientation-lock""allow-pointer-lock""allow-popups""allow-popups-to-escape-sandbox""allow-presentation""allow-same-origin""allow-scripts""allow-top-navigation""allow-top-navigation-by-user-activation""allow-top-navigation-to-custom-protocols"
allow: Permissions policy to be applied to the iframe's contents Value: Serialized permissions policy
allowfullscreen: Whether to allow the iframe's contents to use requestFullscreen() Value: Boolean attribute
width: Horizontal dimension Value: Valid non-negative integer
height: Vertical dimension Value: Valid non-negative integer
referrerpolicy: Referrer policy for fetches initiated by the element Value: Referrer policy
loading: Used when determining loading deferral Value: "lazy"; "eager"

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<embed>`

Baseline: widely availablesince July 2022

WHATWG Plugin

MDN The <embed> HTML element embeds external content at the specified point in the document. This content is handled by the browser or an external application.

Live preview Example from MDN

<embed
  type="image/jpeg"
  src="https://developer.mozilla.org/shared-assets/images/examples/flowers.jpg"
  width="250"
  height="200" />

Content model

Categories: flow; phrasing; embedded; interactive; palpable
Parents: phrasing
Children: empty
Interface: HTMLEmbedElement

Browser support

First browser version supporting <embed>
Chrome	1
Edge	12
Firefox	1
Safari	≤4
Chrome Android	18
Safari iOS	≤3.2

First version with support, from MDN browser-compat-data.

Attributes

src: Address of the resource Value: Valid non-empty URL potentially surrounded by spaces
type: Type of embedded resource Value: Valid MIME type string
width: Horizontal dimension Value: Valid non-negative integer
height: Vertical dimension Value: Valid non-negative integer

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<object>`

Baseline: widely availablesince January 2018

WHATWG Image, child navigable, or plugin

MDN The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.

Live preview Example from MDN

<object
  type="video/mp4"
  data="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
  width="250"
  height="200"></object>

Content model

Categories: flow; phrasing; embedded; interactive*; listed; form-associated; palpable
Parents: phrasing
Children: transparent
Interface: HTMLObjectElement

Browser support

First browser version supporting <object>
Chrome	1
Edge	12
Firefox	1
Safari	3
Chrome Android	18
Safari iOS	2

First version with support, from MDN browser-compat-data.

Attributes

data: Address of the resource Value: Valid non-empty URL potentially surrounded by spaces
type: Type of embedded resource Value: Valid MIME type string
name: Name of content navigable Value: Valid navigable target name or keyword
form: Associates the element with a form element Value: ID*
width: Horizontal dimension Value: Valid non-negative integer
height: Vertical dimension Value: Valid non-negative integer

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<video>`

Baseline: widely availablesince January 2018

WHATWG Video player

MDN The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

Live preview Example from MDN

<video controls width="250">
  <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm" />

  <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="https://developer.mozilla.org/shared-assets/videos/flower.webm">WEBM</a>
  or
  <a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4">MP4</a>
  video.
</video>

Content model

Categories: flow; phrasing; embedded; interactive; palpable
Parents: phrasing
Children: source*; track*; transparent*
Interface: HTMLVideoElement

Browser support

First browser version supporting <video>
Chrome	3
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3

First version with support, from MDN browser-compat-data.

Attributes

src: Address of the resource Value: Valid non-empty URL potentially surrounded by spaces
crossorigin: How the element handles crossorigin requests Value: "anonymous"; "use-credentials"; the empty string
poster: Poster frame to show prior to video playback Value: Valid non-empty URL potentially surrounded by spaces
preload: Hints how much buffering the media resource will likely need Value: "none"; "metadata"; "auto"; the empty string
autoplay: Hint that the media resource can be started automatically when the page is loaded Value: Boolean attribute
playsinline: Encourage the user agent to display video content within the element's playback area Value: Boolean attribute
loading: Used when determining loading deferral Value: "lazy"; "eager"
loop: Whether to loop the media resource Value: Boolean attribute
muted: Whether to mute the media resource by default Value: Boolean attribute
controls: Show user agent controls Value: Boolean attribute
width: Horizontal dimension Value: Valid non-negative integer
height: Vertical dimension Value: Valid non-negative integer

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<audio>`

Baseline: widely availablesince January 2018

WHATWG Audio player

MDN The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

Live preview Example from MDN

<figure>
  <figcaption>Listen to the T-Rex:</figcaption>
  <audio controls src="https://developer.mozilla.org/shared-assets/audio/t-rex-roar.mp3"></audio>
  <a href="https://developer.mozilla.org/shared-assets/audio/t-rex-roar.mp3"> Download audio </a>
</figure>

figure {
  margin: 0;
}

Content model

Categories: flow; phrasing; embedded; interactive; palpable*
Parents: phrasing
Children: source*; track*; transparent*
Interface: HTMLAudioElement

Browser support

First browser version supporting <audio>
Chrome	3
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3

First version with support, from MDN browser-compat-data.

Attributes

src: Address of the resource Value: Valid non-empty URL potentially surrounded by spaces
crossorigin: How the element handles crossorigin requests Value: "anonymous"; "use-credentials"; the empty string
preload: Hints how much buffering the media resource will likely need Value: "none"; "metadata"; "auto"; the empty string
autoplay: Hint that the media resource can be started automatically when the page is loaded Value: Boolean attribute
loading: Used when determining loading deferral Value: "lazy"; "eager"
loop: Whether to loop the media resource Value: Boolean attribute
muted: Whether to mute the media resource by default Value: Boolean attribute
controls: Show user agent controls Value: Boolean attribute

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<track>`

Baseline: widely availablesince January 2018

WHATWG Timed text track

MDN The <track> HTML element is used as a child of the media elements, <audio> and <video>. Each track element lets you specify a timed text track (or time-based data) that can be displayed in parallel with the media element, for example to overlay subtitles or closed captions on top of a video or alongside audio tracks.

Live preview Example from MDN

<video controls src="https://developer.mozilla.org/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    label="English"
    src="https://developer.mozilla.org/shared-assets/misc/friday.vtt" />
  Download the
  <a href="https://developer.mozilla.org/shared-assets/videos/friday.mp4">MP4</a>
  video, and
  <a href="https://developer.mozilla.org/shared-assets/misc/friday.vtt">subtitles</a>.
</video>

video {
  width: 250px;
}

video::cue {
  font-size: 1rem;
}

Content model

Categories: none
Parents: audio; video
Children: empty
Interface: HTMLTrackElement

Browser support

First browser version supporting <track>
Chrome	23
Edge	12
Firefox	31
Safari	6
Chrome Android	25
Safari iOS	6

First version with support, from MDN browser-compat-data.

Attributes

default: Enable the track if no other text track is more suitable Value: Boolean attribute
kind: The type of text track Value: "subtitles"; "captions"; "descriptions"; "chapters"; "metadata"
label: User-visible label Value: Text
src: Address of the resource Value: Valid non-empty URL potentially surrounded by spaces
srclang: Language of the text track Value: Valid BCP 47 language tag

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<map>`

Baseline: widely availablesince January 2018

WHATWG Image map

MDN The <map> HTML element is used with <area> elements to define an image map (a clickable link area).

Live preview Example from MDN

<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
</map>
<img
  usemap="#infographic"
  src="https://developer.mozilla.org/shared-assets/images/examples/mdn-info2.png"
  alt="MDN infographic" />

img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 232px;
}

Content model

Categories: flow; phrasing*; palpable
Parents: phrasing
Children: transparent; area*
Interface: HTMLMapElement

Browser support

First browser version supporting <map>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

name: Name of image map to reference from the usemap attribute Value: Text*

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<area>`

Baseline: widely availablesince January 2018

WHATWG Hyperlink or dead area on an image map

MDN The <area> HTML element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hypertext links.

Live preview Example from MDN

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://developer.mozilla.org/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://developer.mozilla.org/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="https://developer.mozilla.org/shared-assets/images/examples/mdn-info.png"
  alt="MDN infographic" />

img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 260px;
}

Content model

Categories: flow; phrasing
Parents: phrasing*
Children: empty
Interface: HTMLAreaElement

Browser support

First browser version supporting <area>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Attributes

alt: Replacement text for use when images are not available Value: Text*
coords: Coordinates for the shape to be created in an image map Value: Valid list of floating-point numbers*
shape: The kind of shape to be created in an image map Value: "circle"; "default"; "poly"; "rect"
href: Address of the hyperlink Value: Valid URL potentially surrounded by spaces
target: Navigable for hyperlink navigation Value: Valid navigable target name or keyword
download: Whether to download the resource instead of navigating to it, and its filename if so Value: Text
ping: URLs to ping Value: Set of space-separated tokens consisting of valid non-empty URLs
rel: Relationship between the location in the document containing the hyperlink and the destination resource Value: Unordered set of unique space-separated tokens*
referrerpolicy: Referrer policy for fetches initiated by the element Value: Referrer policy

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<math>`

Baseline: widely availablesince July 2025

WHATWG MathML root

MDN The <math> MathML element is the top-level MathML element, used to write a single mathematical formula. It can be placed in HTML content where flow content is permitted.

Live preview Example from MDN

<p>
  The infinite sum
  <math display="block">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>n</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </math>
  is equal to the real number
  <math display="inline">
    <mfrac>
      <msup>
        <mi>π</mi>
        <mn>2</mn>
      </msup>
      <mn>6</mn>
    </mfrac>
  </math>
  .
</p>

Content model

Categories: flow; phrasing; embedded; palpable
Parents: phrasing
Children: per [MATHML]
Interface: Element

Browser support

First browser version supporting <math>
Chrome	109
Edge	109
Firefox	4
Safari	5.1
Chrome Android	109
Safari iOS	5

First version with support, from MDN browser-compat-data.

Attributes

Attributes: per [MATHML].

Specification ↗ MDN reference ↗

`<svg>`

Baseline: widely availablesince July 2022

WHATWG SVG root

MDN The <svg> 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.

Live preview Example from MDN

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

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

Content model

Categories: flow; phrasing; embedded; palpable
Parents: phrasing
Children: per [SVG]
Interface: SVGSVGElement

Browser support

First browser version supporting <svg>
Chrome	1
Edge	12
Firefox	1.5
Safari	3
Chrome Android	18
Safari iOS	2

First version with support, from MDN browser-compat-data.

Attributes

Attributes: per [SVG].

Specification ↗ MDN reference ↗