SVG in HTML5 - Learn HTML

SVG (Scalable Vector Graphics) is an XML-based format for describing two-dimensional graphics as shapes — points, lines, curves, and text — instead of a grid of pixels. Because the browser draws an SVG from a mathematical description, it stays razor-sharp at any size and on any screen density, which is why icons, logos, charts, and diagrams are so often delivered as SVG.

HTML5 gives you several ways to put SVG onto a page, and each one makes a different trade-off around DOM access, caching, styling, and fallback. This page walks through all the common embedding methods, then helps you choose between them.

If you are brand new to the format, start with the SVG introduction. For a full list of elements and attributes, see the SVG reference.

Inline SVG

The most powerful method is to write the SVG markup directly in your HTML. Because the SVG becomes part of the document, every shape is a real DOM node: you can style it with CSS, script it with JavaScript, and respond to events on individual paths.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200" viewBox="0 0 300 200"
         xmlns="http://www.w3.org/2000/svg"
         role="img" aria-labelledby="circleTitle">
      <title id="circleTitle">A pink circle outlined in purple</title>
      <circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
    </svg>
  </body>
</html>

Try it Yourself »

Let's understand the code:

An inline SVG always starts with an <svg> tag and ends with </svg>.
width and height set the size of the SVG box on the page (in CSS pixels).
viewBox="0 0 300 200" defines the internal coordinate system: the values are min-x min-y width height. The browser scales these user units to fit the displayed width/height, so a viewBox is what makes the graphic truly scalable and responsive. (Drop the width/height and the SVG will stretch to fill its container while keeping the viewBox aspect ratio.)
xmlns="http://www.w3.org/2000/svg" declares the SVG namespace. It is required when the SVG is served as a standalone .svg file; inside HTML5 the browser usually infers it, but including it keeps the markup portable.
The <circle> element draws a circle. cx and cy are the x/y coordinates of its center (defaulting to 0,0 if omitted), and r is the radius.
stroke and stroke-width control the outline — here a 5px purple border. fill sets the interior color, here pink.

SVG has a set of basic shape elements you combine to build a graphic. See the SVG shape elements list below.

Danger

SVG is XML, so every element must be properly closed. Self-closing tags like <circle ... /> need the trailing slash, and container tags like <svg> need a matching </svg>.

Accessibility for inline SVG

Decorative SVG can be hidden from assistive technology with aria-hidden="true". When the graphic carries meaning, expose it:

Add role="img" so screen readers treat the whole <svg> as a single image.
Give it a <title> (a short accessible name) and, if needed, a <desc> (a longer description), then reference them with aria-labelledby.

<svg viewBox="0 0 100 100" role="img" aria-labelledby="t d"
     xmlns="http://www.w3.org/2000/svg">
  <title id="t">Sales chart</title>
  <desc id="d">Bar chart showing a 20% rise in Q4 sales.</desc>
  <rect x="10" y="40" width="20" height="50" fill="teal" />
</svg>

Note that <title> and <desc> are special SVG elements, not visible text — <title> is not the same as the HTML <title> in the document head.

Embedding an external `.svg` file

Inline markup bloats your HTML and can't be cached separately. When you have a reusable asset, keep the SVG in its own file.svg and reference it. There are four common ways to do that.

As an image with `<img>`

The simplest and most widely supported approach. The SVG behaves like any other image — it is cached, lazy-loadable, and easy to use.

<img src="logo.svg" width="120" height="40" alt="Company logo" />

Trade-offs: you cannot reach the SVG's internals from the page's CSS or JavaScript, and scripts inside the SVG don't run. This is usually exactly what you want for icons and logos. Always provide alt text. See the HTML <img> and images guide.

As an object with `<object>`

<object> loads the SVG as a separate document, so its internal scripts run and you can reach into it via contentDocument. It also offers natural fallback content between the tags.

<object type="image/svg+xml" data="diagram.svg" width="300" height="200">
  <img src="diagram.png" alt="Diagram fallback" />
</object>

Trade-offs: scripting across the boundary is subject to the same-origin policy (CORS), and styling the SVG from the parent page's stylesheet doesn't apply. Read more in the HTML <object> tag chapter.

As an embed with `<embed>`

<embed> also loads the SVG as an external document. It is similar to <object> but cannot provide fallback content (it has no closing tag and no child nodes).

<embed type="image/svg+xml" src="diagram.svg" width="300" height="200" />

Prefer <object> over <embed> when you need a fallback. See the HTML <embed> tag for details.

As a CSS `background-image`

When the SVG is purely decorative, set it as a CSS background. It is cached and keeps your HTML clean, but it is invisible to assistive technology and unreachable by script.

<style>
  .hero {
    width: 300px;
    height: 200px;
    background-image: url("pattern.svg");
    background-size: cover;
  }
</style>
<div class="hero"></div>

You can even inline a tiny SVG as a data URI: background-image: url('data:image/svg+xml,...').

Inline SVG vs. external file

Capability	Inline `<svg>`	External (`img`/`object`/`embed`/CSS)
Style shapes with page CSS	Yes	No (only `<object>`/`<embed>` via internal CSS)
Script individual shapes from the page	Yes	Limited / blocked by CORS
Cached separately from the HTML	No	Yes
Reusable across pages without copy-paste	No	Yes
Keeps HTML small	No	Yes

Rule of thumb: reach for inline SVG when you need to animate, theme, or interact with the graphic (icons that change color on hover, interactive charts). Use an external <img src="*.svg"> for static logos and decorative images you reuse across the site.

SVG vs. raster images

SVG is a vector format; PNG, JPEG, GIF, and WebP are raster (pixel) formats.

Resolution independence. SVG scales to any size with no blur and no separate @2x/@3x files — ideal for icons, logos, and line art on high-DPI screens.
Small files for simple art. Flat graphics with a few shapes are often far smaller as SVG, and the text inside them stays selectable and searchable.
Editable and scriptable. SVG is text, so it diffs in version control and can be animated.

When SVG is the wrong choice: photographs and richly detailed images. A photo described as thousands of shapes would be huge and slow to render — reach for JPEG or WebP instead. SVG also shines for crisp geometry, while complex per-pixel effects belong on raster formats or the <canvas> element.

SVG shape elements

Inline SVG provides a set of ready-made shapes you combine to build graphics:

rectangle <rect> — rectangles and rounded rectangles
circle <circle> — circles defined by a center and radius
ellipse <ellipse> — ovals with separate x/y radii
line <line> — a straight segment between two points
polyline <polyline> — a connected series of straight segments
polygon <polygon> — a closed shape from a list of points
path <path> — arbitrary lines and curves, the most flexible shape

Practice

Which method lets you style and script individual SVG shapes with the page's own CSS and JavaScript?

Writing the SVG inline with an <svg> element in the HTML.Embedding the SVG with <img src='logo.svg'>.Setting the SVG as a CSS background-image.Referencing the SVG file with <embed>.

Inline SVG

Accessibility for inline SVG

Embedding an external .svg file

As an image with <img>

As an object with <object>

As an embed with <embed>

As a CSS background-image