What is SVG?

  • SVG stands for Scalable Vector Graphics
  • It‘s been an open, W3C spec since 1999!
  • It’s just XML – so plain (somewhat readable) text
  • The graphic is described with mathematically-declared HTML-like elements

Why use SVG?

  • It’s often much smaller than raster formats like PNG
  • Resolution independent, so will look sharp on iPhone 98
  • Which means we only need 1 file for all devices/screens
  • They can be manipulated with CSS and JavaScript


  • Hand-optimising SVGs is incredibly important
  • Our CMS image processor doesn't automatically minify and optimise SVGs like it does with raster images
  • Not all images are suited to SVG. Some are too complex
  • We have to use “presentational attributes” to style them
  • We can't use all SVG features cross-platform

What makes an SVG?

  • <circle> – Draws a circle
  • <defs> – Define elements for reference
  • <ellipse> – Draws an ellipse
  • <g> – Groups elements
  • <linearGradient> – Defines a linear gradient
  • <path> – Draws a generic, free-form shape
  • <rect> – Draws a rectangle

Common Elements

<svg width="100%" height="100%" viewBox="0 0 380 500">
  <g id="shapes">
    <rect x="20" y="20" width="140" height="140" fill="#f00"/>
    <circle cx="90" cy="253" r="70" fill="#f00"/>
    <path d="M90,346l70,140l-140,0l70,-140Z" fill="#f00"/>
  <g id="paths">
      d="M 220 20 L 360 20 L 360 160 L 220 160 L 220 20 Z"
      d="M220,253c0,-38.66 31.34,-70 70,-70c38.66,0 70,31.34
         70,70c0,38.66 -31.34,70 -70,70c-38.66,0 -70,-31.34 -70,-70Z"
    <path d="M290,346l70,140l-140,0l70,-140Z" fill="#0f0"/>

Exported directly

<svg viewBox="0 0 380 500">
  <g fill="red">
    <path d="M20 20h140v140H20z"/>
    <circle cx="90" cy="253" r="70"/>
    <path d="M90 346l70 140H20l70-140z"/>
  <g fill="#0f0">
    <path d="M220 20h140v140H220V20zM220 253c0-38.66 31.34-70
             70-70s70 31.34 70 70-31.34 70-70 70-70-31.34-70-70zM290
             346l70 140H220l70-140z"/>

After minifying with svgo

  • Delete all unused layers & groups
  • Convert strokes to fills
  • Simplify the amount of nodes and shapes used
  • Remove unnecessary nodes of obscured paths
  • Redraw shapes as necessary (<paths> to <circles> etc)
  • Combine shapes of identical colours (where applicable)
  • Reduce amount of fractional pixels for node positions

Manual optimisation


Example time!

Supplied at 125kb

Optimised to 37kb
(49kb before optimising with svgo)

But, Matt! How?!

  • 69 elements
  • Unnecessarily complicated
  • Broken Blacktown text


  • 9 elements
  • Fixed bad node alignment
  • Simplified obscured shapes


Less is more!



Sizing and positioning

  • Images should be aligned and visually
    (not mathematically) centred for the context
    in which they sit
  • For generic images that can be swapped out as necessary, use a 100×100 square canvas
  • For others, make the smallest, known dimension 100px
  • Find the visual centre of your images with

So SVG for everything?

  • The image has a lot of complex gradients, filters
    and effects that can't be reproduced easily
  • The image has hundreds or thousands of nodes
  • We only have a PNG. Never encode a PNG in an SVG

Nope! Use PNG when…

Use commonsense. Test the filesize

Thank you!



By Matt Stow


A quick primer on SVG and how best to optimise them

  • 2,778