Understanding viewBox in SVG Sprites

Understanding viewBox in SVG Sprites

The viewBox attribute is one of the most important yet commonly misunderstood parts of SVG sprites. It defines the coordinate system for the graphics inside a <symbol> and controls how icons scale when rendered at different sizes.

What viewBox Does

The viewBox attribute has four values: min-x min-y width height. It defines a rectangular area in SVG coordinate space that maps to the rendered viewport:

viewBox="0 0 24 24"
         │ │  │  │
         │ │  │  └── height of coordinate system
         │ │  └───── width of coordinate system
         │ └──────── y origin
         └────────── x origin

viewBox on <symbol> vs <svg>

In a sprite system, each <symbol> has its own viewBox:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <!-- 24x24 grid icon -->
  <symbol id="icon-grid" viewBox="0 0 24 24">
    <rect x="3" y="3" width="7" height="7"/>
    <rect x="14" y="3" width="7" height="7"/>
    <rect x="3" y="14" width="7" height="7"/>
    <rect x="14" y="14" width="7" height="7"/>
  </symbol>

  <!-- 16x16 arrow icon from a different source -->
  <symbol id="icon-arrow" viewBox="0 0 16 16">
    <path d="M8 1l7 7-7 7M1 8h14"/>
  </symbol>
</svg>

Each symbol scales independently based on its viewBox. When you render them at the same size:

<svg width="24" height="24"><use href="#icon-grid"/></svg>
<svg width="24" height="24"><use href="#icon-arrow"/></svg>

Both icons fill the 24x24 pixel area correctly because the viewBox handles the coordinate mapping.

Normalizing viewBox

When combining icons from different sources, you might want to normalize them to a common viewBox. The SVG Sprite Generator's "Custom viewBox" option does this. However, be careful: forcing a viewBox change on icons designed for a different grid can cause alignment issues.

A better approach is to re-design icons on a common grid (usually 24x24) rather than forcing viewBox changes. If you must mix grids, keep the original viewBox on each symbol.

Aspect Ratio

If the viewBox aspect ratio differs from the rendered SVG dimensions, the preserveAspectRatio attribute controls alignment. The default xMidYMid meet centers the icon and scales it to fit:

<symbol id="icon-wide" viewBox="0 0 48 24"
        preserveAspectRatio="xMidYMid meet">
  <!-- Wide icon content -->
</symbol>

For icon sprites, you rarely need to change this — icons are typically square.

Common viewBox Sizes

• 24x24 — Material Design, Lucide, Heroicons
• 20x20 — Mini variant of Heroicons
• 16x16 — Octicons (GitHub), small UI icons
• 512x512 — Font Awesome SVGs (larger coordinate space)

Larger coordinate spaces allow for more detail but produce larger path data.