A quick introduction to SVG icon and different ways to use them: separate files or embedded in the HTML.

Go fullscreen: ⌃⌥F

SVG icons

SVG symbols

  • Just like Illustrator there can be symbols in SVG
  • We can create a symbol library—a sprite sheet
  • And use the symbols many times in our website

Makes for a great icon sets

Using SVG for icons

  • Icons can be at the top of the HTML
    or
  • Icons can be in a separate file

A separate file is usually better for performance & maintenance because it can be shared, edited and reused.

HTML
<!-- At the top of the HTML -->
<svg hidden>
  <symbol id="the-circle" viewBox="0 0 48 48">
    <circle cx="24" cy="24" r="22" fill="tomato" />
  </symbol>
  <symbol id="the-triangle" viewBox="0 0 48 48">
    <polygon points="24,2 46,46 2,46" fill="yellowgreen" />
  </symbol>
</svg>

<!-- Further down the HTML -->
<i class="icon i-128">
  <svg><use xlink:href="#the-triangle" /></svg>
</i>

<i class="icon i-128">
  <svg><use xlink:href="#the-circle" /></svg>
</i>

<i class="icon i-24">
  <svg><use xlink:href="#the-triangle" /></svg>
</i>
HTML
<!-- Icons in a separate sprite sheet -->
<i class="icon i-96">
  <svg><use xlink:href="images/icons.svg#the-circle" /></svg>
</i>

<i class="icon i-128">
  <svg><use xlink:href="images/icons.svg#the-triangle" /></svg>
</i>

<i class="icon i-48">
  <svg><use xlink:href="images/icons.svg#the-circle" /></svg>
</i>
HTML
<!-- No `fill` attributes in the symbol -->
<svg hidden>
  <symbol id="the-circle" viewBox="0 0 48 48">
    <circle cx="24" cy="24" r="22" />
  </symbol>
</svg>

<i class="icon i-128">
  <svg><use xlink:href="#the-circle" /></svg>
</i>
CSS
.icon {
  color: tomato;
  transition: all .25s linear;
}
.icon:hover {
  color: orange;
}

Use Spritebot to combine different SVG graphics into a sprite sheet

Start

A quick introduction to SVG icon and different ways to use them: separate files or embedded in the HTML.