FreeTool
Image Tools

SVG Guide for Developers: Scalable Graphics That Work Everywhere

Learn how SVG works, how to optimize SVG files for the web, inline vs external usage patterns, and how to animate and manipulate SVGs with CSS and JavaScript.

7 min read

Colorful vector illustrations on a screen

SVG (Scalable Vector Graphics) is the only image format natively understood by browsers as structured, styleable, scriptable XML. A logo in SVG renders crisply on a 1× monitor, a 4K display, and a printed billboard — all from the same file. Understanding SVG makes you a more capable frontend developer.

What makes SVG different

Raster formats (JPEG, PNG, WebP) store images as a grid of pixels. Scale them up and you get blur. SVG stores images as mathematical descriptions of shapes:

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

This renders a blue circle with "Hello" text — at any size, perfectly sharp.

When to use SVG:

  • Logos and icons (must stay sharp at all sizes)
  • Illustrations and diagrams
  • Charts and data visualizations (D3.js outputs SVG)
  • Animations and interactive graphics
  • UI icons (far better than icon fonts)

When NOT to use SVG:

  • Photographs and complex photorealistic images (use JPEG/WebP)
  • Screenshots (use PNG)
  • When the SVG has thousands of nodes (becomes slower than Canvas)

Core SVG elements

Shapes

<!-- Rectangle -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

<!-- Circle -->
<circle cx="50" cy="50" r="30" fill="#3b82f6"/>

<!-- Ellipse -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

<!-- Line -->
<line x1="0" y1="0" x2="100" y2="100" stroke="#1e293b" stroke-width="2"/>

<!-- Polygon -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- Polyline (open shape) -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

Paths — the universal shape

The <path> element can describe any shape using a mini-language of move, line, curve, and arc commands:

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

Path commands:

  • M x,y — Move to (pen up)
  • L x,y — Line to
  • H x — Horizontal line
  • V y — Vertical line
  • Q cx,cy x,y — Quadratic bezier curve
  • C cx1,cy1 cx2,cy2 x,y — Cubic bezier curve
  • A rx,ry rot large-arc sweep x,y — Arc
  • Z — Close path

You rarely write paths by hand — design tools export them. But reading them helps with debugging and optimization.

The viewBox: responsive SVGs

The viewBox attribute is the key to responsive SVGs:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Content drawn in a 200×100 coordinate space -->
</svg>

With no width/height on the element, the SVG fills its container like a responsive image. Set width: 100% in CSS and it scales perfectly.

.logo svg {
  width: 100%;
  height: auto;
}

Three ways to use SVG on the web

1. External file (<img>)

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

✅ Simple, cached, works everywhere
❌ Cannot style with CSS, cannot script

2. CSS background

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

✅ Good for decorative icons
❌ No CSS styling of SVG internals, no accessibility

3. Inline SVG (most powerful)

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Next
</button>

✅ Full CSS control, scriptable, uses currentColor to inherit text color
❌ Not cached, increases HTML size

For icons in UI components, inline SVG is the best choice. Sprite sheets (a single <svg> with <symbol> elements and <use> references) give you caching with styleability.

Styling SVG with CSS

Inline SVGs respond to CSS like any HTML element:

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* controls currentColor */
}

.icon:hover {
  color: #1d4ed8;
}

In the SVG, use currentColor instead of hardcoded colors:

<path fill="currentColor" d="..."/>
<path stroke="currentColor" d="..."/>

Now the icon color is controlled entirely by CSS — dark mode, hover states, and theming just work.

CSS animations on SVG

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray and stroke-dashoffset are SVG's most powerful animation properties — they enable drawing animations where paths appear to draw themselves.

Optimizing SVG files

Design tools export SVGs with unnecessary metadata, comments, and editor IDs. A typical exported SVG might be 15 KB; optimized, it could be 3 KB.

What to remove:

  • <?xml version="1.0"?> declaration (not needed inline)
  • xmlns:xlink, xmlns:dc, Adobe/Inkscape metadata namespaces
  • id attributes only used by the editor
  • Comments and whitespace
  • Redundant group elements <g>
  • Default attribute values (fill="black", opacity="1")

Tools like SVGO automate this. When you need a raster version for platforms that don't support SVG, convert to PNG with our SVG to PNG converter.

Accessibility

SVGs used as meaningful content need accessible descriptions:

<svg role="img" aria-labelledby="title desc">
  <title id="title">Revenue chart</title>
  <desc id="desc">Bar chart showing monthly revenue growing from $10k in January to $45k in June 2026</desc>
  <!-- chart content -->
</svg>

Decorative SVGs (icons next to labeled buttons) should be hidden from screen readers:

<svg aria-hidden="true" focusable="false">...</svg>

Quick reference: useful SVG attributes

Attribute What it does
viewBox="x y w h" Defines coordinate system
fill Shape fill color (none, hex, currentColor)
stroke Outline color
stroke-width Outline thickness
stroke-linecap Line end style: butt, round, square
stroke-linejoin Corner style: miter, round, bevel
opacity Element transparency (0–1)
transform translate(), rotate(), scale(), skew()
clip-path Mask content to a shape
filter Apply SVG filters (blur, drop-shadow, etc.)

SVG is one of the web's most underutilized tools. Once you understand the coordinate system and styling model, you can build icons, illustrations, charts, and animations that look perfect at every size and respond dynamically to user interaction.

Back to all articlesBrowse tools