HTML SVG Tutorial - Scalable Vector Graphics

Understanding HTML SVG Images

SVG, or Scalable Vector Graphics, is an XML-based image format used to create graphics that can scale to different sizes without losing quality.

SVG images can be displayed with the HTML <img> element, embedded directly into HTML as inline <svg> markup, or used in other ways through HTML and CSS.

What Is SVG?

SVG stands for Scalable Vector Graphics. Instead of storing an image as a fixed grid of pixels, SVG describes graphic elements such as shapes, paths, lines, colors, and text using markup.

Because the graphic is mathematically described rather than stored at one fixed pixel resolution, an SVG can usually be displayed at many different sizes while remaining sharp.

Vector vs Raster Images

Raster formats such as JPEG, PNG, WebP, and AVIF are composed of pixels. Enlarging a raster image beyond its original resolution can make individual pixels more noticeable and reduce apparent image quality.

Vector graphics are constructed from shapes and paths that can be recalculated for the required display size. This makes SVG particularly useful for logos, icons, diagrams, illustrations, and other graphics that need to remain sharp at different sizes.

SVG with the <img> Element

An external SVG file can be displayed with the standard HTML <img> element in much the same way as a PNG or JPEG image.

<img src="/img/images/image.svg"
     alt="SVG image example"
     width="600"
     height="600">

When SVG is loaded through <img>, the SVG file behaves like an external image resource. The alt attribute should describe the image's purpose when alternative text is needed.

Scaling SVG Images

One of the main advantages of SVG is the ability to display the same source graphic at very different dimensions without the pixelation associated with enlarging raster images.

<img src="/img/images/image.svg"
     alt="SVG image example"
     width="300"
     height="300">

<img src="/img/images/image.svg"
     alt="SVG image example"
     width="600"
     height="600">

<img src="/img/images/image.svg"
     alt="SVG image example"
     width="1000"
     height="1000">

All three images can use the same SVG file. The browser renders the vector graphic at the requested display size rather than requiring separate 300, 600, and 1000 pixel image files.

Inline SVG

SVG markup can also be placed directly inside an HTML document using the <svg> element. This is known as inline SVG.

<svg width="200" height="200"
     viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="100"
          cy="100"
          r="80"
          fill="#0088cc">
  </circle>
</svg>

Inline SVG makes the graphic part of the document markup, allowing individual SVG elements to be addressed and styled more directly than content inside an SVG loaded through <img>.

SVG Accessibility

When an SVG file is displayed using <img>, use the image's alt attribute according to the same principles used for other HTML images. Meaningful images need useful alternative text, while decorative images can use alt="".

<img src="/img/images/image.svg"
     alt="SVG image example"
     width="600"
     height="600">

Inline SVG has different accessibility considerations because the SVG markup is part of the document itself. Depending on its purpose, an inline SVG may require an accessible name or may need to be hidden from assistive technology when it is purely decorative.

When to Use SVG

SVG is particularly well suited to graphics made from shapes, lines, paths, and text. Logos, interface icons, charts, diagrams, and illustrations are common examples.

SVG is generally not the appropriate format for ordinary photographs or other highly detailed pixel-based imagery. Raster formats such as JPEG, WebP, or AVIF are usually better suited to photographic content.

HTML SVG Example

The following example displays the same SVG file at several sizes. Compare the graphics to see how the SVG remains sharp as its displayed dimensions increase.

Play in Editor

SVG Best Practices

Use SVG for graphics that benefit from resolution-independent scaling, such as logos, icons, diagrams, and illustrations.
Use an appropriate raster image format for photographic content.
Provide suitable alternative text when an SVG is displayed with <img>.
Use alt="" when an SVG loaded through <img> is purely decorative.
Use a suitable viewBox when creating SVG graphics that need to scale.
Keep SVG markup and files as simple as practical to avoid unnecessary file size and complexity.

Summary

SVG is a vector image format that can scale to different dimensions while remaining sharp. External SVG files can be displayed with the HTML <img> element, while SVG markup can also be embedded directly into an HTML document. SVG is especially useful for logos, icons, diagrams, and illustrations where clean scaling is important.