Show HN: Make external SVG files styleable with CSS through injection

How does it handle IDs if the same SVG is included multiple times or if different SVGs use the same IDs? With SVG, if you want to use gradients, filters, patterns, symbols, etc. there is no other way than using IDs. And if they are not handled properly, and webpack certainly does not do it properly, you may run into trouble with more complex SVGs, dynamic adding of SVGs, etc.

You are right, you should use an SVG sanitizer if you intend to inject SVGs that are not fully under your control. The sanitizer can be applied before actual injection takes place, so a mischievous SVG can do harm.

Yep, that looks very similar, but more focused on React. It also seems to handle IDs properly, so for React development it looks like a good choice.

I needed something very similar for a project we had a map of users and their blips either needed to have their avatars in the middle and their profile color as the border of the blip or blips for groups of users when zoomed out where the middle of the blip would have the number of users in that cluster.

The way it was solved in the older version of the project which we had to rewrite was that they automatically generated these blips each time a user changed their profile color or avatar and they had no server-side clustering so they'd always send the data for every user for a specific zoom level (which was not very optimal for large numbers of users, needless to say).

So I ended up using a template engine on the front-end for the SVG files. The choice in the ended fell to Nunjucks, since we were already using Symfony with Twig on the back-end and the syntax for Nunjuck is more or less the same. I made a template for the blips that would change either render a cluster marker and expect a user number as a variable or a user marker that would expect a hex color and the URL to a profile photo. Nunjucks took care of the grabbing the template and rendering each blip with the content for LeafletJS.

In normal situations it will just fetch the SVG from the browser cache the second time it is loaded.

Server side injection with PHP is certainly possible, but this usually does not take care of the IDs properly, so you may run into trouble in some cases. Also, for dynamic web pages server side injection could be difficult.