This is a great exploration of how to use SVG on the web. It is a very under-utilized technology. One thing that would add to this post is to point out that yo

This is a great exploration of how to use SVG on the web. It is a very under-utilized technology. One thing that would add to this post is to point out that you can define an SVG once in a document and then reference it everywhere else. That way you aren't inlining the actual SVG markup over and over and over. 1. Place your SVG inline anywhere in the document. I usually put all of them in a `<div>` I do `display: none` on. 2. Make sure you assigned each SVG an ID: `<svg id="foobar"><!-- SVG markup --></svg>` 3. Reference that SVG anywhere in your document using `<svg><use xlink:href='#foobar'></svg>` I use it extensively in a Github project (shameless plug) I've been working on lately. https://github.com/pseudosavant/player.html/blob/master/src/player.html#L682 https://github.com/pseudosavant/player.html/blob/master/src/... Edit: The author does link to her great post digging into the details of using `<use>`, but it didn't seem prominent enough that people would check it out. https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/ https://tympanus.net/codrops/2015/07/16/styling-svg-use-cont...