Getting to grips with SVG markup
SVGs are complex, for sure, but that very complexity gives them their power. And we don't need to know the intricacies of the co-ordinate system to harness that power.
Here is a side-by-side comparison of an icon. The image on the left is an SVG, the one on the right is a raster PNG. They are both roughly the same file size (~1Kb), and at 64px x 64px they look pretty similar. But see how those same files look at double-scale:
An .SVG and .PNG icon, side-by-side
The same files, increased to double-size
...and to 10x the original size
We can use the same SVG file for all sizes, and produce consistently clear and crisp results. To get the same effect with rasterized images, we'd need to create separate files for each size. Each increase in visible size would result in an increase of file size, too. We'd not only be pushing up the number of HTTP requests but also the total page-weight as well.
The basics of the SVG markup language
SVG as a format needn't be scary or intimidating. SVG stands for Scalable Vector Graphic, and the language of SVGs is an XML-derived language like RSS feeds and XHTML[1]. Once you know what tags to look out for, the whole thing gets a lot simpler. Take this simplified SVG markup, for example:
<svg viewBox="0 0 100 100">
<path d="M10 10H90V90H10Z"/>
<circle cx="50" cy="50" r="40"/>
</svg>
Even without being able to read the more technical aspects, there are clues to pick up on. It's clear that the SVG above contains a path (a.k.a. a line) and a circle. Dive a little deeper and you'll see that it's a circle inside a square. The circle has a diameter of 80 ("r" == "radius"), and sits inside a 90 x 90 square (the line joins up with itself to form a shape). Both of these lie in the centre of a 100 x 100 artboard (a.k.a "view box").
Real-world SVGs are more complex, of course. There are plenty of attributes and DOCTYPE declarations to worry about. But the general principle is the same. There is an opening tag (<svg>) and closing tag (</svg>) just like <html>. And we build shapes within the SVG using tags like <path/> and <circle/> and <rect/> (rectangle)[2].
Styling SVGs with CSS
SVGs are complex, for sure, but that very complexity gives them their power. And we don't need to know the intricacies of the co-ordinate system to harness that power. All we need to do is recognize the different elements. This is a language much like HTML, after all, so once we can find the different shapes in an icon we can add classes to them.
<svg viewBox="0 0 100 100">
<path class="outer_square" d="M10 10H90V90H10Z"/>
<circle class="inner_circle" cx="50" cy="50" r="40"/>
</svg>
...which we can then style with CSS:
svg {
background: yellow;
}
.outer_square {
stroke: red;
stroke-width: 1px;
}
.inner_circle {
fill: blue;
}
This gives us a more fine-grained level of control than a single character in an icon font would. We can manipulate the styles of each discrete part of an icon with CSS. Transitions and animations provide an extra level of detail. Our positioning can be much more precise. We have a defined and predictable co-ordinate system to work with. No more fiddling about with baseline alignment of invisible-hitboxed font characters!
There are some fantastically clever and artistic examples of SVG in the wild. The only limits appear to be the creativity and imagination of the developers who build them. A browse through CodePen reveals stunning work, but I'll end with a more simple demonstration of my work.
I've always had a soft-spot for loading graphics, and love to build them myself. I built this one with a two-path SVG and a dash of CSS animation:
See the Pen Hourglass Loader by Tom Hazledine (@tomhazledine) on CodePen.
This is not the place for a debate about the nuances of XHTML vs HTML vs SGML. If that kind of language-geekery is for you, you can learn more about the *ML "family" from Computerphile. ↩︎
You can read more about the inner-workings of SVGs - including a detailed look at how to construct paths using co-ordinates – on the MDN SVG tutorial pages. ↩︎
Related posts
If you enjoyed this article, RoboTom 2000™️ (an LLM-powered bot) thinks you might be interested in these related posts:
Inline SVG icon sprites are (still) not scary.
One of the best things about HTML is that it just works. As with much of the web, things only get weird when designers and developers start adding things.
Similarity score: 90% match. RoboTom says:
Getting started with inline SVG icons
As a typography nerd, using a custom font to serve icons felt really good. However, it turns out inline SVG icons are better in almost every way.
Similarity score: 89% match. RoboTom says: