Container with viewBox

The viewBox attribute defines the coordinate system.

<svg viewBox="0 0 100 100"></svg>

Values are minimum x and y coordinates, then width and height.

viewBox examples

<!-- Normal:   --> <svg viewBox="0 0 100 100"></svg>
<!-- Larger:   --> <svg viewBox="0 0 200 200"></svg>
<!-- Smaller:  --> <svg viewBox="0 0 50 50"></svg>
<!-- Negative: --> <svg viewBox="-50 -50 100 100"></svg>
<!-- Mixed:    --> <svg viewBox="-25 50 75 50"></svg>

Further reading: Understanding SVG Coordinate Systems →

Optional: Dimensions

By default, SVGs will attempt to fill their container regardless of viewBox. You can specify dimensions to make the asset behave more like an img would.

<svg width="100" height="100" viewBox="0 0 100 100"></svg>

Optional: preserveAspectRatio

Tells the browser how to handle dimensions that contradict viewBox.

<svg></svg>
<svg preserveAspectRatio="none"></svg>
<svg preserveAspectRatio="xMidYMin"></svg>
<svg preserveAspectRatio="xMidYMax"></svg>
<svg preserveAspectRatio="xMidYMid slice"></svg>

More examples: preserveAspectRatio on MDN →

Re-usable elements

<svg viewBox="0 0 340 100">
  <circle id="orange-circle" fill="#F26941" cx="50" cy="50" r="50"/>
  <use xlink:href="#orange-circle" x="120"/>
  <use xlink:href="#orange-circle" x="240"/>
</svg>

Defined elements for later use

<svg viewBox="0 0 340 100">
  <defs>
    <circle id="circle" cx="50" cy="50" r="50"/>
  </defs>
  <use xlink:href="#circle" fill="#0F1C3F" x="0" />
  <use xlink:href="#circle" fill="#5A7BDD" x="120"/>
  <use xlink:href="#circle" fill="#F26941" x="240"/>
</svg>

Further reading: Structuring, Grouping, and Referencing in SVG →

Symbols

Re-usable groups with their own viewBox and preserveAspectRatio attributes.

Welcome to Cloud Four

<svg>
  <symbol id="cloud-four" viewBox="0 0 24 24">
    <!-- paths and stuff -->
  </symbol>
</svg>

<!-- Later on in the same document... -->
<h1>
  <svg class="icon"> <!-- Look ma, no viewbox! -->
    <use xlink:href="#cloud-four"/>
  </svg>
  Welcome to Cloud Four
</h1>

Further reading: SVG symbol a Good Choice for Icons →

Practical examples

Icon sprite

Icons inherit parent color except when color is explicitly defined.

Fancy download button

Animates with CSS and GSAP.

Familiar lock and sign

Uses masks and text paths, animates on click with GSAP.

Odds and ends

Embedding techniques

Fallbacks

<svg>
  <!-- Older browsers render as img: -->
  <image src="fallback.png" xlink:href="" width="100%">
</svg>

<object type="image/svg+xml" data="example.svg">
  <!-- Fallback content -->
</object>

<picture>
  <source type="image/svg+xml" srcset="example.svg">
  <img src="fallback.png">
</picture>

.example {
  background-image: url("fallback.png");
}
.svg .example { /* Modernizr */
  background-image: url("example.svg");
}

Some browser inconsistencies

• Firefox handles proportional transform-origin differently than other browsers, though a fix is coming.

• IE does not support external content without a polyfill.

• Prior to Android 4.4, the default Android browser does not support masking.

• Opera Mini and Opera Mobile versions earlier than 12.1 pixelate SVG graphics that are scaled up.

Useful tools

• svg-sprite: Assembles multiple files into SVG sprites.
• IcoMoon: Web app for assembling SVG icons into sprites.
• svgo: Popular and powerful optimizer.
• SVGOMG: Browser-based GUI for SVGO.
• svg4everybody: Polyfill for SVG external content.

Further reading

• CSS-Tricks’ now-classic Using SVG →
• A Practical Guide to SVGs on the web →
• Sara Soueidan’s SVG articles →
• WebPlatform’s Smarter SVG Overview →
• Mozilla’s SVG reference →