SVG for the Web: Complete Guide 2026

SVG (Scalable Vector Graphics) is the only image format on the web that is both infinite resolution and text-based. A single SVG logo looks perfect on a mobile screen, a 4K monitor, and a printed billboard, without any quality loss. Understanding when and how to use SVG is essential for building fast, sharp, modern websites.

What makes SVG different from JPEG, PNG, or WebP?

All other common web image formats are raster: they store pixel data at a fixed resolution. Enlarge them beyond their original size and they blur. SVG is fundamentally different, it is a vector format that stores mathematical descriptions of shapes, curves, and text. The browser draws the image at whatever size is needed, always at perfect sharpness.

When to use SVG

• Logos and brand marks: the most important use case, a single SVG file works at all sizes
• Icons and UI elements: icon sets, navigation icons, button icons, SVG is lighter and sharper than PNG icon sprites
• Diagrams, charts, infographics: anything with lines, shapes, and text benefits enormously from vector format
• Illustrations with flat or gradient colour: hand-drawn style illustrations export cleanly to SVG
• Animated graphics: CSS-animated SVGs are lightweight alternatives to GIF or video for simple motion

When NOT to use SVG

• Photographs: SVG has no efficient way to represent photographic content. A photo embedded in SVG is just a base64-encoded raster image, use JPEG/WebP/AVIF instead
• Very complex illustrations: a highly detailed SVG with thousands of paths can be larger and slower to render than an equivalent WebP. Profile before choosing

Three ways to embed SVG in HTML

1. As an <img> tag (external file)

<img src="logo.svg" alt="Company logo" width="200" height="60">

Simple and cacheable. The SVG cannot be styled with CSS from the parent page. Good for logos and decorative images.

2. Inline SVG (directly in HTML)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
</svg>

The SVG markup lives in the HTML. You can target its elements with CSS and JavaScript, great for interactive icons or theme-aware illustrations that should change colour with dark mode.

3. As a CSS background

background-image: url('icon.svg');

Useful for decorative backgrounds or when using SVG as a CSS mask. Cannot be styled dynamically.

Optimising SVG files

SVGs exported from design tools (Illustrator, Figma, Inkscape) often contain unnecessary metadata, comments, and redundant attributes. Always run SVGs through an optimiser before deploying:

• SVGO: the standard command-line SVG optimiser. Can reduce file size by 40–70%
• Figma / Sketch export settings: use "Optimized" export settings in your design tool
• Online tools: svgomg.net provides a visual interface to SVGO

SVG accessibility

SVGs used as images need proper accessibility markup:

<!-- For decorative SVGs -->
<img src="decoration.svg" alt="" role="presentation">

<!-- For informative SVGs -->
<img src="chart.svg" alt="Bar chart showing sales increasing 40% in Q4">

<!-- For inline SVGs -->
<svg role="img" aria-labelledby="title">
  <title id="title">Company logo</title>
  ...
</svg>