W3docs
en
Log in

SVG Intro

Learn what SVG is, how its coordinate system works, when to choose it over Canvas or raster images, and three ways to embed SVG in HTML.

SVG (Scalable Vector Graphics) describes two-dimensional graphics in XML. Instead of storing a grid of colored pixels (the way JPEG, PNG, or GIF do), an SVG file stores the instructions for drawing shapes — lines, curves, circles, rectangles, and text. The browser reads those instructions and renders the image fresh at whatever size it is displayed, so the result stays crisp at any zoom level or screen resolution.

SVG is a W3C recommendation and integrates with other standards such as the DOM, CSS, and JavaScript. Because every shape is a real element in the document, you can style it with CSS, animate it, and respond to clicks and hovers just like any other HTML element.

This page explains how SVG works inside an HTML page, how its coordinate system is laid out, when to reach for SVG instead of Canvas or a raster image, and the three standard ways to embed an SVG document.

How SVG works in an HTML page

An SVG image is itself a small XML document. The root <svg> element holds child shape elements, and the browser paints them in source order — later elements draw on top of earlier ones, the same way layers stack in a paint program.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

The coordinate system

SVG uses a coordinate grid whose origin (0, 0) is the top-left corner. The x-axis grows to the right and the y-axis grows downward — note that this differs from the y-up convention you may know from math class.

  • The width and height attributes on <svg> set the size of the drawing area in pixels.
  • A viewBox attribute (for example viewBox="0 0 100 100") defines the internal coordinate space, letting the same drawing scale to fit any rendered size.

In the example above, the circle's center is at (50, 50) — the middle of a 100×100 canvas — and its radius reaches 40 units outward in every direction.

Reading the <circle> attributes

Each attribute on the <circle> element controls one aspect of how it is drawn:

AttributeMeaning
cxx-coordinate of the circle's center (50)
cyy-coordinate of the circle's center (50)
rradius of the circle in user units (40)
strokecolor of the outline (green)
stroke-widththickness of the outline in user units (4)
fillcolor filling the inside of the shape (yellow)

Learn more about painting outlines in SVG stroking, and see every shape and attribute in the SVG reference.

SVG vs. Canvas vs. raster images

Choosing the right technology depends on what you are drawing and how it will change.

  • SVG is best for graphics that must stay sharp at any size and that you want to style, animate, or make interactive: icons, logos, charts, diagrams, and maps. Each shape is a DOM node, so it is accessible and easy to script. It can get slow when a scene contains tens of thousands of individual elements.
  • Canvas draws pixels onto a bitmap with JavaScript. It has no DOM per shape, which makes it efficient for fast-changing scenes with many objects — games, particle effects, and real-time data visualizations — but the result does not scale without re-drawing and is harder to make accessible.
  • Raster images (JPEG, PNG, GIF, WebP) store fixed pixels. They are the right choice for photographs and complex textures, but they blur or pixelate when scaled up and weigh more at high resolutions.

A simple rule of thumb: use SVG for resolution-independent, scriptable vector art; use Canvas for high-frequency pixel rendering; use raster formats for photographs.

Embedding SVG in HTML

SVG files use the .svg extension and are supported by all modern browsers. There are three common ways to place SVG on a page, each with its own trade-offs.

Inline <svg>

Write the SVG markup directly inside your HTML. This gives you full access to every shape, so you can style it with CSS and animate or script individual elements from the same page.

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>

<img> with an SVG source

Point an <img> element at an external .svg file. This is simple and cacheable, but the SVG is treated as a flat image: its internal elements cannot be styled or scripted from the host page.

<img src="circle.svg" width="100" height="100" alt="A yellow circle outlined in green" />

The <object> element

The <object> element loads the SVG as a separate document while still exposing its DOM to scripts, and it lets you provide fallback content for browsers that fail to load it.

<object data="circle.svg" type="image/svg+xml" width="100" height="100">
  Your browser does not support SVG.
</object>

For more on the inline element itself, see the HTML <svg> tag and SVG in HTML5.

Creating SVG images

You can write SVG by hand in any text editor, which is practical for icons and simple shapes. For artwork with many curves and paths, a drawing program such as Inkscape is usually more convenient — it exports clean .svg files you can then refine by hand. To draw curved shapes by code, start with the SVG path element, and for straight segments see the SVG line element.

Making SVG accessible

When an SVG conveys meaning, give assistive technology something to read. The approach depends on how the SVG is embedded:

  • For inline <svg>, add a <title> (and an optional longer <desc>) as the first children, and mark the root with role="img". Referencing the title with aria-labelledby ties the accessible name to the element.
<svg role="img" aria-labelledby="circleTitle"
     xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <title id="circleTitle">A yellow circle outlined in green</title>
  <desc>A solid yellow disk with a four-pixel green border, used as a status indicator.</desc>
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
  • For an SVG loaded through <img>, use a descriptive alt attribute, exactly as you would for any image.
  • If the graphic is purely decorative, hide it from assistive technology with aria-hidden="true" (inline) or an empty alt="" (on <img>) so screen readers skip it.

You can also add accessible text inside a drawing with the SVG text element.

Advantages of using SVG

Compared with raster formats such as JPEG and GIF, SVG offers several benefits:

  • SVG images can be generated and modified with any text editor.
  • SVG images can be scripted, indexed, searched, and compressed.
  • You can print SVG images with high quality at any resolution.
  • SVG images can be scaled and zoomed without losing quality.
  • Each shape is part of the DOM, so it can be styled with CSS and animated.
  • SVG is an open W3C standard.

Practice

Practice
What can you tell about SVG in HTML?
What can you tell about SVG in HTML?
Practice
Which statements about embedding and using SVG are correct?
Which statements about embedding and using SVG are correct?
Was this page helpful?