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>
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>
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:
:hovertransitionanimationtransform
HTML
<svg id="black-hole" width="256" height="256" viewBox="0 0 256 256">
<circle cx="120" cy="120" r="50" />
</svg>
#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>
.icon {
color: tomato;
transition: all .25s linear;
}
.icon:hover {
color: orange;
}
Use Spritebot to combine different SVG graphics into a sprite sheet