Practical SVG

WE’VE BEEN USING ICONS on websites since the dawn of...websites. Styles come and go, but the functionality of icons is here to stay. They aid in quick visual differentiation and assist in conveying meaning—even across languages and cultures.

Take a look at a fairly simple page on GitHub.com (FIG 3.1).

All told, nearly two dozen icons there.

We could make each of those icons an image, like 
icon_pencil.svg, and use them in our HTML like this:

<li>

  <a href="">

    <img src="icons/icon_pencil.svg">

That works. There is nothing inherently wrong with using img. But it does mean that each unique image is a separate network request. That is, when a ...