An introduction to writing SVG code by hand and integrating it with CSS effects like animations & transitions.

Go fullscreen: ⌃⌥F

Advanced SVG

SVGs are just code

We can open them directly in our code editor

They’re completely hackable!

Writing SVG

SVGs look very similar to HTML—but they are XML

  • <svg> — everything goes inside
  • <circle>
  • <rect>
  • <ellipse>
  • etc.
HTML
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
  <circle cx="120" cy="120" r="50" />
  <rect x="0" y="0" width="75" height="75" />
  <ellipse cx="200" cy="200" rx="50" ry="30" />
</svg>

SVGs use CSS!

Most of the visual look of SVGs comes from CSS

Just the properties are a little different

HTML
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
  <circle cx="120" cy="120" r="50" />
  <rect x="0" y="0" width="75" height="75" />
  <ellipse cx="200" cy="200" rx="50" ry="30" />
</svg>
CSS
rect {
  fill: yellow;
}
ellipse {
  fill: limegreen;
  stroke: #000;
  stroke-width: 5px;
}

Styles on tags

We can also write the styles directly on the tags—and when we export from Illustrator that’s what happens

The SVG style attributes can be overwritten by CSS

HTML
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
  <circle fill="limegreen" cx="120" cy="120" r="50" />
</svg>
CSS
circle {
  fill: yellow;
}

Why have an extra file?

The SVG code can be embedded directly in your HTML

Just copy and paste all the SVG code

HTML
<body>
  <svg width="256" height="256" viewBox="0 0 256 256">
    <circle cx="120" cy="120" r="50" />
  </svg>
</body>

SVG interactivity

Embedded SVGs can have effects:

  • :hover
  • transition
  • animation
  • transform
HTML
<svg id="black-hole" width="256" height="256" viewBox="0 0 256 256">
  <circle cx="120" cy="120" r="50" />
</svg>
CSS
#black-hole {
  transition: all .5s linear;
}
#black-hole:hover {
  fill: lightsteelblue;
}

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"></use></svg>
</i>

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

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

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

<i class="icon i-48">
  <svg><use xlink:href="images/icons.svg#the-circle"></use></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"></use></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

An introduction to writing SVG code by hand and integrating it with CSS effects like animations & transitions.