[{"data":1,"prerenderedAt":193},["ShallowReactive",2],{"project-19000419":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":33,"aspects":34,"strip":38,"post_text":41,"what":42,"said":51,"maker_in_thread":106,"shape":112,"grid":116,"attempts":147,"same_week":156,"maker_shows":31,"maker_hidden":186,"reader_version":187,"card":188},"19000419","svg-inject","Make external SVG files styleable with CSS through injection","title","Show HN: Make external SVG files styleable with CSS through injection","https:\u002F\u002Fgithub.com\u002Ficonfu\u002Fsvg-inject","github.com","jansan",1548438781,2019,52,12,790,2195,36,"notable","languages","front-end library","library",[24,25,26,27],"svg injection","css svg styling","inline svg","svg ids","debated",0,{"positive":31,"neutral":32,"mixed":32,"critical":31},2,1,6,{"idea":35,"privacy":36,"performance":37},{"positive":32,"critical":32},{"positive":29,"critical":32},{"positive":29,"critical":29},[32,29,32,29,29,39,29,39,29,29,40,40],3,5,null,{"problem":43,"audience":41,"pricing":41,"motivation":41,"time_to_build":41,"stack":49,"openness":50,"stage":50,"team_size":50},{"value":44,"source":45,"evidence":46},"External SVG files cannot be styled with CSS directly","inferred",[47],{"id":48},"post",[],"unknown",{"praise":52,"objections":65,"requests":82,"questions":83,"alternatives":88},[53],{"value":54,"source":55,"evidence":56},"Solid, well-documented library","commenter",[57,61],{"id":58,"by":59,"text":60},"19001879","thex10","I like your approach (can work with simple HTML attributes!) and it seems fairly robust and well-documented. Thanks for sharing!",{"id":62,"by":63,"text":64},"19003523","nepeckman","I was actually just looking for something like this! This looks like a really solid library.",[66,76],{"value":67,"source":55,"evidence":68},"Injected SVGs could be a security risk; a sanitizer is needed for untrusted files",[69,73],{"id":70,"by":71,"text":72},"19002723","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.",{"id":74,"by":11,"text":75},"19002845","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…",{"value":77,"source":55,"evidence":78},"Handling of duplicate IDs in SVGs is a concern",[79],{"id":80,"by":11,"text":81},"19002811","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.…",[],[84],{"value":85,"source":55,"evidence":86},"How does it handle IDs when the same SVG is included multiple times?",[87],{"id":80,"by":11,"text":81},[89,96],{"value":90,"source":55,"evidence":91},"svgr via create-react-app",[92],{"id":93,"by":94,"text":95},"19002571","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…",{"value":97,"source":55,"evidence":98},"react-inlinesvg",[99,103],{"id":100,"by":101,"text":102},"19001790","ryanjodonnell","Cool! I also use https:\u002F\u002Fgithub.com\u002Fgilbarbara\u002Freact-inlinesvg for my react based project to accomplish a similar result",{"id":104,"by":11,"text":105},"19002901","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.",{"comments":107,"answered":29,"key":108},4,[109,110,111],{"id":80,"text":81},{"id":74,"text":75},{"id":104,"text":105},{"commenters":113,"max_depth":39,"maker_replies":107,"first_comment_mins":114,"lifespan_hours":115},9,118,13,[117,119,121,123,125,129,131,132,136,140,143,145],[93,29,32,118,94,29],"project\u002Fcritical\u002Fidea",[80,29,29,120,11,32],"commenter\u002Fneutral\u002Fexecution",[70,32,32,122,71,29],"project\u002Fcritical\u002Fprivacy",[74,32,29,124,11,32],"project\u002Fneutral\u002Fprivacy",[126,32,29,127,128,29],"19004500","commenter\u002Fneutral\u002Fprivacy","est31",[100,31,39,130,101,29],"project\u002Fneutral\u002Fnone",[104,31,29,120,11,32],[133,39,39,134,135,29],"19003805","project\u002Fmixed\u002Fperformance","bhhaskin",[137,39,29,138,139,29],"19003890","other\u002Fneutral\u002Fnone","beezischillin",[141,39,29,142,11,32],"19005265","project\u002Fneutral\u002Fperformance",[58,107,40,144,59,29],"project\u002Fpositive\u002Fidea",[62,40,40,146,63,29],"project\u002Fpositive\u002Fnone",[148,151,155],{"id":149,"t":150,"points":32,"comments":32},"17884878",1535717953,{"id":152,"t":153,"points":154,"comments":39},"18282511",1540294996,10,{"id":4,"t":12,"points":14,"comments":15},[157,162,166,171,176,181],{"id":158,"name":159,"points":160,"category":161},"19025560","Open Startups (postmake.io\u002Fopen)",475,"data",{"id":163,"name":164,"points":165,"category":20},"19017270","X-spreadsheet",347,{"id":167,"name":168,"points":169,"category":170},"19025709","AiFiddle",216,"ai",{"id":172,"name":173,"points":174,"category":175},"19023196","Apprise",163,"infrastructure",{"id":177,"name":178,"points":179,"category":180},"18997160","MadCO2",146,"hardware",{"id":182,"name":183,"points":184,"category":185},"19013445","Notepin",144,"productivity",false,"v2",{"id":189,"name":5,"line":6,"ai":186,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":190,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":191,"url":9,"mix":192,"praise":54,"objection":67,"sub":21},19000419,[24,25,26,27],"101003030055",[31,32,32,31],1794036574316]