4 ms·

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

52 points by jansan 8y ago

ryanjodonnell 8y ago
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 8y ago
  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.
thex10 8y ago
I like your approach (can work with simple HTML attributes!) and it seems fairly robust and well-documented. Thanks for sharing!
dstroot 8y ago
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 8y ago
  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.
  - deleted 8y ago
    [deleted]
graphememes 8y ago
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 8y ago
  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 8y ago
    Or just use subresource integrity: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity https://developer.mozilla.org/en-US/docs/Web/Security/Subres...
nepeckman 8y ago
I was actually just looking for something like this! This looks like a really solid library.
bhhaskin 8y ago
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 8y ago
  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.
- jansan 8y ago
  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.

52 points by jansan 8y ago

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 8y ago
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.

thex10 8y ago

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

dstroot 8y ago

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 8y ago
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.
- deleted 8y ago
  [deleted]

graphememes 8y ago

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 8y ago
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 8y ago
  Or just use subresource integrity: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity https://developer.mozilla.org/en-US/docs/Web/Security/Subres...

nepeckman 8y ago

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

bhhaskin 8y ago

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 8y ago
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.
jansan 8y ago
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.