SVG for Web Developers: Inline SVG, Sprites, and Animation

SVG vs Raster Images

SVG (Scalable Vector Graphics) describes shapes mathematically, so they scale infinitely without pixelation. This makes SVG ideal for logos, icons, illustrations, and diagrams — any graphic that needs to look sharp at every size from a 16px favicon to a 4K display.

Raster formats (PNG, WebP, JPEG) store pixel grids. They are better for photographs and complex imagery where the math would be too expensive.

The viewBox Attribute

viewBox defines the coordinate system of the SVG's content. It takes four values: min-x min-y width height.

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

With viewBox="0 0 24 24", the SVG's coordinate space is 24×24 units. You can then scale the element with CSS to any pixel size — the browser handles the scaling, not the SVG coordinates.

Ways to Use SVG on the Web

1. Inline SVG

Embed the SVG markup directly in HTML. Pros: full CSS and JS access, no extra HTTP request, easily animated. Cons: inflates HTML, not cached separately.

2. img tag

<img src="/icons/logo.svg" alt="Logo" width="120" height="40">

Cached by the browser, simple markup. Cons: cannot be styled with CSS (external context), no JS access.

3. CSS background-image

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

Works well for decorative icons. Same limitations as img — no CSS style access.

4. SVG Sprites

A sprite is a single SVG file containing multiple symbols. Reference individual symbols with <use>:

<!-- sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
</svg>

<!-- Usage anywhere in HTML -->
<svg width="24" height="24">
  <use href="/sprite.svg#icon-home" />
</svg>

Sprites give you caching benefits plus the ability to style icons with CSS fill and stroke.

Common SVG Elements

• <path> — the most versatile; draws any shape using path data (d attribute)
• <circle> — cx, cy, r attributes
• <rect> — x, y, width, height, rx (border radius)
• <line> — x1, y1, x2, y2
• <polyline> / <polygon> — open/closed point sequences
• <text> — SVG text; can follow a path with <textPath>
• <g> — group element; transforms and styles apply to all children
• <defs> — defines reusable elements (gradients, filters, symbols)

CSS Animation in SVG

/* Animate a path stroke (drawing effect) */
.path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 1.5s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

The stroke-dasharray trick works by making the entire path a dash that equals the path length, then animating the offset from full to zero — creating a drawing effect.

SVG Optimization

Design tools export SVG with redundant metadata, comments, and unnecessary attributes. Always optimize before deployment:

• SVGO: The standard CLI optimizer — removes metadata, collapses groups, minifies paths
• Inline optimizations: Remove xmlns:xlink if unused; replace deprecated xlink:href with href
• Simplify paths: Reduce decimal precision (3 decimal places is usually enough)
• Remove hidden layers: Design tool exports often include invisible layers

Accessibility

For decorative SVGs, add aria-hidden="true". For meaningful icons, use role="img" and a <title> element:

<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Download file</title>
  <path d="..." />
</svg>