SVG injection idea

A really cool feature of SVGs is that you can style them with CSS. However, that only works if they’re injected straight into the DOM using the <svg> element, not if they’re included using an <img> tag.

Since including image markup in your HTML documents is a bit cumbersome, people have developed SVG inlining plugins that take an <img> tag and replace it by the equivalent <svg>. For example:

My idea: could this be done server-side with Meteor? Basically go over each templates in your app as part of the build process, find every .svg image, and replace it by the SVG file’s contents?

If so, are there any packages that implement this kind of thing I could look at?

2 Likes

Maybe these could be starting points: