Advanced SVG · Web Design 2

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>

SVG: Line A

The width, height & viewBox are always necessary. The xmlns attribute is required only when the SVG is in a separate file.

SVG: Line B

The <circle> element will draw a circle to the screen. It needs a few different attributes:

cx — the centre “x” coordinate
cy — the centre “y” coordinate
r — the radius of the circle

**Notice that this must have a closing slash (/) at the end inside the element. If we compare this to another self-closing tag: the <img> tag, the image doesn’t need the slash because its HTML, but the SVG elements does because its XML.

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: Line B

We can paste the sprite sheet into the top of our HTML—notice how there is nothing inside the sprite sheet except <symbol> objects.

HTML: Line C

Each symbol must have two pieces of information:

An id—this is how we call to the icon and display it
A viewBox—each <symbol> requires a unique viewBox, but the surrounding <svg> tag does not

HTML: Line M

We can then import an SVG symbol into another <svg> graphic with the <use> tag. The xlink:href points to the id of the <symbol> we want to display.

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

HTML: Line D

If we completely remove the fill from a symbol we can control its colour in the CSS.

To remove the fill set it to absolute black in Illustrator, #000000, then when exported it’ll get automatically removed.

CSS: Lines B–C

We can add the color attribute (assuming we’ve included modules.css) to adjust the fill of the SVG symbol. Without modules.css we’d have to specify fill directly.

And, of course, transitions work perfectly well too.

Why color works instead of fill?

We can use color instead of fill when modules.css is included because it has a little snippet of code to allow it.

svg {
  fill: currentColor;
}

This snipped of code changes the fill to be the value of the current color

SVGs are just code

Writing SVG

SVGs use CSS!

Styles on tags

Why have an extra file?

SVG interactivity

SVG symbols

Using SVG for icons

Videos & tutorials