svg-inject

Languages and libraries

front-end library

SHOW HN2019

svg-inject

Make external SVG files styleable with CSS through injection

github.com

#svg injection#css svg styling#inline svg#svg ids

52points
12comments
#790of 2,195 in 2019
Top 36%of 2019 by points

How HN took it

DebatedReal support and real criticism

2 positive, 1 neutral or asking, 1 mixed, 2 critical, out of 6 comments about the project. Thread score 0.00.

Idea: 1 for, 1 againstPrivacy: 0 for, 1 against

The thread, comment by comment

Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.

positive neutral or mixed critical about another commenter or something else the maker

What HN said

What people liked

  • Solid, well-documented library

    From 2 comments
    • I like your approach (can work with simple HTML attributes!) and it seems fairly robust and well-documented. Thanks for sharing!
      thex10 on HN
    • I was actually just looking for something like this! This looks like a really solid library.
      nepeckman on HN

Objections

  • Injected SVGs could be a security risk; a sanitizer is needed for untrusted files

    From 2 comments
    • 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.
      graphememes on HN
    • 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…
      jansan on HN
  • Handling of duplicate IDs in SVGs is a concern

    From 1 comment
    • 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.…
      jansan on HN

Questions

  • How does it handle IDs when the same SVG is included multiple times?

    From 1 comment
    • 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.…
      jansan on HN

Alternatives named

  • svgr via create-react-app

    From 1 comment
    • 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…
      dstroot on HN
  • react-inlinesvg

    From 2 comments
    • Cool! I also use https://github.com/gilbarbara/react-inlinesvg for my react based project to accomplish a similar result
      ryanjodonnell on HN
    • 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.
      jansan on HN

Category, keywords, summaries and labels on this page were made by AI (Thread Reader v2) and not checked by hand. Each point links to the comments it came from.

Add a badge to your READMEShown on HackerShow
[![Shown on HackerShow](https://hackershow.org/badge.svg)](https://hackershow.org/show/19000419)