4 ms·

If I can have only one question, it would no doubt be “why”?

abritinthebay 9y ago
We do this at my work - it allows easy programmatic inclusion. We wouldn’t do it if browsers weren’t a buggy mess with the USE tag though (Chrome in particular is a dumpster fire of SVG bugs).
- tehno 9y ago
  Yeah, USE tag is pretty buggy across browsers. Also, sometime you just need to inline SVG, for example if you want some icon path fill color to change on mouse-over. Easy with inline SVG and CSS rule. Can't really do that (well) with external .svg.
  - abritinthebay 9y ago
    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.
    - Already__Taken 9y ago
      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...
      - abritinthebay 9y ago
        It seems they stop work as soon as a feature hits SVG - CSS Animation, Canvas, WebGL... all have open SVG bugs. Some years old.
  - josteink 9y ago
    > Easy with inline SVG and CSS rule. Can't really do that (well) with external .svg. I can see that easily solved much better, cleanly and not to mention lightweight with some CSS rather simple pre-processors in the build process. Or is your argument that you already have a (React-based) build-process and you'd want to align this with what you have, rather than creating something new and different along-side everything else (despite the result being suboptimal)?
bromuro 9y ago
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
- kuschku 9y ago
  You know you can use CSS and JS for that?
  - rmetzler 9y ago
    How would I go to represent rectangles, circles, text and lines with CSS and JavaScript? With Canvas? Is React able to render to canvas? Sometimes SVG is a good fit for the graphics needed.
    - kuschku 9y ago
      I meant styling the SVG — instead of replacing SVG with react (slow), use CSS to modify properties of the SVG DOM. That is significantly faster.
  - bromuro 9y ago
    > 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.
    - kuschku 9y ago
      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.

We do this at my work - it allows easy programmatic inclusion. We wouldn’t do it if browsers weren’t a buggy mess with the USE tag though (Chrome in particular is a dumpster fire of SVG bugs).

tehno 9y ago
Yeah, USE tag is pretty buggy across browsers. Also, sometime you just need to inline SVG, for example if you want some icon path fill color to change on mouse-over. Easy with inline SVG and CSS rule. Can't really do that (well) with external .svg.
- abritinthebay 9y ago
  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.
  - Already__Taken 9y ago
    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...
    - abritinthebay 9y ago
      It seems they stop work as soon as a feature hits SVG - CSS Animation, Canvas, WebGL... all have open SVG bugs. Some years old.
- josteink 9y ago
  > Easy with inline SVG and CSS rule. Can't really do that (well) with external .svg. I can see that easily solved much better, cleanly and not to mention lightweight with some CSS rather simple pre-processors in the build process. Or is your argument that you already have a (React-based) build-process and you'd want to align this with what you have, rather than creating something new and different along-side everything else (despite the result being suboptimal)?

bromuro 9y ago

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

kuschku 9y ago
You know you can use CSS and JS for that?
- rmetzler 9y ago
  How would I go to represent rectangles, circles, text and lines with CSS and JavaScript? With Canvas? Is React able to render to canvas? Sometimes SVG is a good fit for the graphics needed.
  - kuschku 9y ago
    I meant styling the SVG — instead of replacing SVG with react (slow), use CSS to modify properties of the SVG DOM. That is significantly faster.
- bromuro 9y ago
  > 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.
  - kuschku 9y ago
    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.