Practical SVG


  • Confession: I was aware of SVG’s existence for years before I realized that was possible, in part because early implemen-tations of SVG required the object or iframe element. SVG support on the HTML img element came much later (and with caveats).
  • Where did this dog.svg file come from, though? Well, the Noun Project is a particularly great source of such images ( There are lots of other places online to get your hands on vector graphics, too. Pretty much all stock photography sites let you filter search results by “vector,” which is exactly what you need for SVG.
  • When downloading from the Noun Project, you have the option of downloading the PNG or SVG version. If you down-load both, you’ll wind up with two files:
    • icon_364.png
    • icon_364.svg
  •  They’re both the same image of a dog. If you link to either of them from an img tag, you’ll get the same image of the same dog. So what’s the difference?
  • One important difference is file size. The PNG version is 40 KB and the SVG version is 2 KB—literally twenty times smaller! We’ll come back to this later.

 What you will learn:

  • All different ways we can use SVG on the web right away so that it doesn’t feel so mysterious.
  • Softwares to create SVG file.
  • Building an icon system using SVG.
  • Introduce to some SVG build tools.

Who should read this book:

New or experienced designer who know SVG or want to learn it.