#todayilearned

by @jm3 · aka John Manoogian3

Frequent, bite-size mini-milestone updates as I fast-forward merge* my front-end web development skills up to 2019 levels. Learn more

Inline-ing SVG

Posted at — Jun 16, 2019

A quirk of how the DOM and img src attributes work is that SVGs referenced using an <img src=...> cannot be later styled with CSS, e.g. to add a fill color or a stroke. Only “inline” (inline to the page DOM, i.e. embedded literally as XML with the HTML document) SVGs can be styled in this way. So that’s one advantage to inlining.

Another advantage of inlining is the lack of a separate network call to fetch the SVG; it’s already inline.

I created a Hugo shortcode to auto-line SVG art from within a content post. It looks like this:

<figure>
{{ readFile (print "static/img/" (index .Params 0) ".svg") | safeHTML }}
</figure>