
Show HN: Make external SVG files styleable with CSS through injection - jansan
https://github.com/iconfu/svg-inject
======
dstroot
This is possible in React apps bootstrapped with "create-react-app". create-
react-app version 2.0 added a lot of new features. One of the new features is
added the svgr webpack loader to wrap SVGs in React components as a named
export. This lets you either grab the filename from the default export or grab
a wrapped SVG component depending on your needs.

In other words you can do this in react now without any extra "stuff". Syntax:

import { ReactComponent as Logo } from './logo.svg';

~~~
jansan
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.

------
graphememes
My first thought was nefarious cross-site injection capabilities.

1\. Upload huge sets of normal SVG files.

2\. Once adoption grows, swap them out for nefarious SVGs.

3\. Wait.

~~~
jansan
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.

~~~
est31
Or just use subresource integrity: [https://developer.mozilla.org/en-
US/docs/Web/Security/Subres...](https://developer.mozilla.org/en-
US/docs/Web/Security/Subresource_Integrity)

------
ryanjodonnell
Cool! I also use [https://github.com/gilbarbara/react-
inlinesvg](https://github.com/gilbarbara/react-inlinesvg) for my react based
project to accomplish a similar result

~~~
jansan
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.

------
bhhaskin
I use something like this for work. One downside is that it will download the
SVG twice. Also if you are using PHP (i.e. wordpress) you can just PHP to
fetch the SVG content and dump it to the page before render.

~~~
beezischillin
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.

------
thex10
I like your approach (can work with simple HTML attributes!) and it seems
fairly robust and well-documented. Thanks for sharing!

------
nepeckman
I was actually just looking for something like this! This looks like a really
solid library.

