Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Transform SVG into React components

github.com

Post reply on HN
Print view View original

31–35 of 35 posts

Re: Transform SVG into React components

#31

Post by tracker1 »

Sir_Cmpwn wrote: post #27
iamleppert wrote: post #7

This is doing little more than providing a wrapper around svgo, which is doing all the real work. This is generally a poor use of SVG as well, if your use of SVG is for static assets, don't transform all your SVG into react, leave it as SVG where it can be easily manipulated and editing by the plethora of tools that can work directly with SVG, previewed in the browser, etc. If you need you can inline the SVG into you…

>This is generally a poor use of SVG as well, if your use of SVG is for static assets, don't transform all your SVG into react, leave it as SVG where it can be easily manipulated and editing by the plethora of tools that can work directly with SVG, previewed in the browser, etc. If you need you can inline the SVG into your CSS via a base64 URI, etc. As valid as this seems on the surface, why can't transforming SVG in…

The webpack option for this seems ideal for that even... I'd be far more interested in that than pre-transform steps.

Re: Transform SVG into React components

#32

Post by iamleppert »

oelmekki wrote: post #23
iamleppert wrote: post #7

This is doing little more than providing a wrapper around svgo, which is doing all the real work. This is generally a poor use of SVG as well, if your use of SVG is for static assets, don't transform all your SVG into react, leave it as SVG where it can be easily manipulated and editing by the plethora of tools that can work directly with SVG, previewed in the browser, etc. If you need you can inline the SVG into you…

I love adding my svg as react components, actually. It makes it easy to conditionally toggle parts of it, change text, manage colors, etc. Of course, if you just want to use the svg doc as a static icon, then yes by all mean, a plain file will do. But given the (very small) size of a svg file, caching it as a single resource may not be that useful.

Umm, you should be doing that with CSS. Basically what this means is whenever your application code changes, it busts the cache on all your SVG assets if you use this method.

The only use-case for using SVG with something like react is for data visualization where you are programmatically building up and updating a SVG DOM based on some data.

A good example of this is a flow-chart graph/tree UI done in SVG that is generated from a nested data structure. Its unlikely these elements would be expressed as static assets in the first place.

Even still I would be cautious in using SVG in this way for all but the least trivial things, as react has been optimized to diff HTML structures, not SVG. I'd like to see, for example, how it handles SVG cascade transforms for instance. Its usually not efficient to alter the SVG DOM by inserting/removing nodes, because the layout rules and semantics of SVG is different than HTML.

Re: Transform SVG into React components

#33

Post by bromuro »

kuschku wrote: post #26
bromuro wrote: post #16

Earlier quoted context omitted.

We use SVG as react components to change SVG attributes without the need to change the SVG source, e.g. the color of the icons etc

You know you can use CSS and JS for that?

> You know you can use CSS and JS for that?

No, I didn't. Thanks. /s

There are many cases it's more convenient updating SVG using React.

Re: Transform SVG into React components

#34

Post by abritinthebay »

Already__Taken wrote: post #19
abritinthebay wrote: post #18

Earlier quoted context omitted.

We actually had a nice system for that... but again: browser bugs :( Until browsers collectively get off their asses with SVG (most of these bugs are years old in their big trackers) using React for SVGs is a good workaround.

They won't because it seems like they might as well forge ahead with CSS additions and drop an entirely separate renderer. That's what happened to the SVG Animations. Of course it's not like svg will get removed so Why fight it...

It seems they stop work as soon as a feature hits SVG - CSS Animation, Canvas, WebGL... all have open SVG bugs. Some years old.

Re: Transform SVG into React components

#35

Post by kuschku »

bromuro wrote: post #33
kuschku wrote: post #26

Earlier quoted context omitted.

You know you can use CSS and JS for that?

> You know you can use CSS and JS for that? No, I didn't. Thanks. /s There are many cases it's more convenient updating SVG using React.

Of course it is more convenient, but it's also several orders of magnitude slower.

If you try rendering, say, maps with SVG, this becomes a significant issue.

Post reply on HN