What Is SVG? A Developer's Guide to Scalable Vector Graphics

SVG (Scalable Vector Graphics) is an XML-based image format that describes images as mathematical shapes rather than pixels. Because vectors are resolution-independent, an SVG looks perfectly sharp at any size — from a 16px favicon to a 4K wallpaper — without any increase in file size.

How SVG Works

Unlike raster formats (PNG, JPEG, WebP) that store a grid of pixels, SVG stores geometric instructions. A circle is described as a center point and radius. A logo is a set of paths with coordinates. The browser renders these instructions at whatever size and resolution is needed.

<!-- A simple SVG icon — an arrow pointing right -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <line x1="5" y1="12" x2="19" y2="12"/>
  <polyline points="12 5 19 12 12 19"/>
</svg>

<!-- This SVG is 200 bytes and renders perfectly at any size:
     16px icon, 64px button icon, 200px illustration — all identical quality -->

Because SVG is XML text, it can be:

• Embedded directly in HTML
• Styled with CSS (color, size, hover effects)
• Manipulated with JavaScript
• Compressed with gzip (text compresses very well)
• Edited in a text editor

SVG vs PNG vs WebP: When to Use Each

Rule of thumb: Use SVG for anything that was created in a vector tool (Figma, Illustrator, Sketch) — icons, logos, illustrations, charts, diagrams. Use WebP (or JPEG) for photographs and images with gradients or photographic complexity.

Anatomy of an SVG File

<svg
  xmlns="http://www.w3.org/2000/svg"   <!-- Required namespace -->
  width="100"                           <!-- Display width (can also be set via CSS) -->
  height="100"                          <!-- Display height -->
  viewBox="0 0 100 100"                 <!-- Coordinate system: minX minY width height -->
  fill="none"                           <!-- Default fill for child elements -->
>
  <!-- Basic shapes -->
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="white"/>
  <rect x="10" y="10" width="30" height="20" fill="red"/>
  <line x1="0" y1="0" x2="100" y2="100" stroke="black"/>
  <polyline points="20,80 40,20 60,80 80,20"/>
  <polygon points="50,10 90,90 10,90"/>

  <!-- Path — the most powerful SVG element -->
  <!-- M=moveto, L=lineto, C=curveto, Z=closepath -->
  <path d="M10,50 C10,20 90,20 90,50 S90,80 10,80 Z" fill="green"/>

  <!-- Text -->
  <text x="50" y="95" text-anchor="middle" font-size="12">Hello</text>

  <!-- Group — apply transforms or styles to multiple elements -->
  <g transform="rotate(45, 50, 50)" opacity="0.5">
    <rect x="40" y="40" width="20" height="20" fill="purple"/>
  </g>
</svg>

The viewBox Attribute Explained

viewBox is the most important — and most misunderstood — SVG attribute. It defines the internal coordinate system, separate from the displayed size.

<!-- viewBox="minX minY width height" -->
<svg width="200" height="200" viewBox="0 0 100 100">
  <!-- Coordinates inside the SVG go from 0,0 to 100,100 -->
  <!-- The browser scales this to fill the 200x200 display area -->
  <circle cx="50" cy="50" r="40"/>
  <!-- This circle appears centered in the 200x200 area, scaled up 2x -->
</svg>

<!-- viewBox lets you scale SVG content independently of display size:
     The same SVG can be used as a 16px icon or a 500px hero image
     by just changing the width/height attributes or CSS -->

Three Ways to Use SVG in HTML

1. Inline SVG (most flexible)

<!-- Paste SVG code directly into HTML -->
<button>
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
  Submit
</button>

<!-- Pros: CSS styleable, JS accessible, no extra HTTP request
     Cons: bloats HTML, can't be cached separately -->

2. Image tag

<img src="/icons/arrow.svg" alt="Arrow right" width="24" height="24">

<!-- Pros: browser caches the file, simple to use
     Cons: CSS can't style internals, JS can't access elements -->

3. CSS background-image

.icon-arrow {
  background-image: url('/icons/arrow.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

/* Or inline as a data URI (useful for small icons) */
.icon-check {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E");
}

Why SVG Files From Design Tools Are Bloated

Exporting an SVG from Figma, Adobe Illustrator, or Inkscape produces a file with significant overhead — metadata, comments, editor namespaces, and structural artifacts that aren't visible in the final image but add substantial file size:

<!-- Bloated SVG export from Illustrator (220 bytes of overhead) -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="24px" height="24px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"
     xml:space="preserve">
  <g id="Layer_2_00000000000000000">
    <g id="icons">
      <path class="st0" d="M5,12h14 M12,5l7,7-7,7"/>
    </g>
  </g>
</svg>

<!-- After optimization (SVGO) — same visual result, 85% smaller -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M5 12h14M12 5l7 7-7 7"/>
</svg>

Common things an SVG optimizer removes: XML declarations, editor comments and metadata, unused namespaces (xmlns:xlink), unnecessary groups, redundant attributes, high-precision decimals in path coordinates (0.12345678 → 0.12), and invisible elements.

Need to optimize an SVG file? Open the SVG Optimizer →