SVGv1.1.0

viewBox Essentials

<svg viewBox="min-x min-y width height">

• viewBox defines the internal coordinate system
• width/height on define the display size
• Without viewBox, SVG won't scale responsively

<!-- ✅ Scales to any size -->
<svg viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10"/>
</svg>

<!-- ❌ Fixed 24x24, won't scale -->
<svg width="24" height="24">
  <circle cx="12" cy="12" r="10"/>
</svg>

Always include viewBox. Remove fixed width/height for responsive SVGs.

Coordinates Must Match viewBox

Elements outside the viewBox are invisible:

<!-- ❌ Circle at 500,500 but viewBox only covers 0-100 -->
<svg viewBox="0 0 100 100">
  <circle cx="500" cy="500" r="40"/>  <!-- invisible -->
</svg>

<!-- ✅ Circle within viewBox range -->
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"/>
</svg>

Accessibility

Informative SVGs (convey meaning):

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Sales increased 25% in Q4</title>
  <desc id="chart-desc">Bar chart showing quarterly revenue...</desc>
  <!-- paths -->
</svg>

Decorative SVGs (purely visual):

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

Key rules:

• role="img" ensures assistive tech treats it as an image