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