Back to blog
January 20, 20264 min read

What is SVG? Everything Web Developers Need to Know

A comprehensive guide to SVG — what it is, how it works, when to use it, and how to get the most from SVG files in web development.

SVG — Scalable Vector Graphics — is one of the most powerful and flexible image formats available to web developers. Unlike PNG or JPEG images, SVGs aren't made of pixels. They're described in XML markup, which means they can scale to any size without any loss of quality.

If you've ever wondered why that logo looks crisp on a retina display while others look blurry, the answer is almost certainly SVG.

What Does SVG Stand For?

SVG stands for Scalable Vector Graphics. It's an XML-based vector image format developed by the W3C and first published as a recommendation in 2001. The format is now supported in every modern browser.

How SVG Files Work

An SVG file is just a text file containing XML. Here's a simple example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#6366f1"/>
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">
    SVG
  </text>
</svg>

This renders a purple circle with "SVG" text inside it. Unlike a PNG version of the same image, this SVG will look perfectly sharp at any size — 16px or 1600px.

Key SVG elements include:

  • <svg> — the root element that defines the canvas
  • <circle>, <rect>, <path> — basic shapes
  • <text> — scalable text
  • <g> — groups of elements
  • <defs> — reusable definitions like gradients and filters

SVG vs Raster Images

| Property | SVG | PNG/JPEG | |----------|-----|----------| | Scalability | Infinite, lossless | Fixed resolution | | File size (simple) | Smaller | Larger | | File size (complex) | Can be large | Usually smaller | | Editability | Full — it's code | Requires image editor | | Animation | Native CSS/JS | Limited (APNG/GIF) | | Browser support | All modern browsers | Universal |

When to Use SVG

SVG is the right choice for:

  • Logos and brand marks — must look sharp at any size
  • Icons — UI icons scale to any device resolution
  • Illustrations — charts, diagrams, infographics
  • Animations — CSS and JavaScript can animate SVG elements
  • Interactive graphics — hover effects, click handlers

Use PNG or JPEG instead for:

  • Photographs — complex images with millions of colours
  • Screenshots — raster captures of other interfaces
  • Very complex illustrations — when SVG would be larger than a raster equivalent

Using SVG in HTML

There are four main ways to use SVG in web pages:

1. Inline SVG

Paste the SVG code directly into your HTML:

<div class="logo">
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  </svg>
</div>

Pros: full CSS control, no HTTP request, can animate with CSS Cons: increases HTML file size

2. <img> tag

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

Pros: simple, cacheable, good for CMS use Cons: can't style with CSS

3. CSS background-image

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

Pros: great for decorative icons Cons: not accessible, can't be targeted with CSS

4. <object> or <iframe>

<object data="/chart.svg" type="image/svg+xml"></object>

Pros: sandboxed, good for untrusted SVGs Cons: less common, limited scripting

SVG Accessibility

SVG can be made accessible with a few additions:

<svg role="img" aria-label="AnySVG logo">
  <title>AnySVG Logo</title>
  <desc>A purple lightning bolt representing fast SVG tools</desc>
  <!-- ... shapes ... -->
</svg>

Always include a <title> and optionally a <desc> for screen readers.

Optimising SVG Files

SVGs exported from design tools like Figma or Illustrator often contain significant metadata bloat — editor comments, layer names, and redundant attributes that aren't needed for rendering. A freshly exported SVG might be 5× larger than it needs to be.

Use our free SVG Optimiser to strip this bloat automatically. Typical savings are 20–80% without any visual change.

Conclusion

SVG is an essential tool for modern web development. Its resolution independence, editability, and browser support make it the best choice for logos, icons, and illustrations. Once you understand the basics, you'll find yourself reaching for SVG first in most graphic contexts.

Ready to work with SVG? Try our free SVG tools: