Tip 15: Blessed are the SVGs

Blessed are the SVGs

Blessed are the SVGs, for they shall inherit the Earth!


  • When to use: excellent for logos, icons and simple graphics that use solid colours.
  • Scale: as they are a vector based, they can be expanded to any size without loosing any quality. So if you wanted to advertise your company logo from space on a screen as big as the Milky Way, you could… and it would be nice and clear for any aliens to see (assuming they have eyes).
  • File sizes: generally much smaller than PNGs / JPGs, which is great for website load times.
  • Animation: SVG’s can support simple animations.
  • Quick changes: as SVGs are actually code based, you can easily change the colour or make changes to simple shapes without generating new files / using design software.


  • Photography: as they don’t use pixels, they can’t display photographs in great detail. JPGs and PNGs are still your friend for these.
  • SVGs aren’t compatible with all web browsers (particularly older ones).
  • Converting old assets: although you will technically be able to export an old low quality JPG or PNG as an SVG, don’t expect it to suddenly become a true high quality vector.