Advanced SVG

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;
}

Videos & tutorials

Start

Advanced SVG

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