4 ms·

SVG works so fantastically well with React -- it's just part of the DOM, after all. Unless there are performance concerns, that reason alone would make me choos

SVG works so fantastically well with React -- it's just part of the DOM, after all. Unless there are performance concerns, that reason alone would make me choose it over Canvas every time. Shameless plug, one of my first experiments with SVG+react (+cljs): https://polymeris.github.io/carlos/ https://polymeris.github.io/carlos/ Done in one day, without knowing the tech.

meagher 9y ago
Made this Chernoff ~Fish~ generator (http://meagher.co/chernoff-fish/ http://meagher.co/chernoff-fish/) with React and SVG. They are a great pair!
smcnally 9y ago
Very cool. You might need a seizure warning - [core.cljs] https://github.com/polymeris/carlos/blob/master/src/carlos/core.cljs https://github.com/polymeris/carlos/blob/master/src/carlos/c... and [svg.cljs] https://github.com/polymeris/carlos/blob/master/src/carlos/svg.cljs https://github.com/polymeris/carlos/blob/master/src/carlos/s... Look clear enough for me to follow. Thank you. Will work on this, too: (:require [carlos.core :as core])) * edit: clearer even unrendered
Sophistifunk 9y ago
Agreed. Going with SVG instead of something else to render the Jenkins pipeline graph has made our lives much easier when it comes time to make changes since we introduced it. For anybody interested in some example code mixing React and SVG the PipelineGraph component is here: https://github.com/jenkinsci/blueocean-plugin/blob/master/jenkins-design-language/src/js/components/PipelineGraph.jsx https://github.com/jenkinsci/blueocean-plugin/blob/master/je...
abritinthebay 9y ago
We do exactly this (SVG + React) at Bleacher Report. It’s basically the best of every world for us (visuals, code, etc) and we’re trying to convert as much as we can to this (takes a while... we have a LOT of logos for example)
marcus_holmes 9y ago
When I started learning React, I realised a dream of mine could finally come true: a proper Celtic Knotwork generator. Uses SVG and React together in harmony. http://celtic-knotwork.online http://celtic-knotwork.online
- vog 9y ago
  Pardon my ignorance, but aren't these patterns just composed of certain tiles in rows and columns? This is something you can do equally well with raster graphics, so what's the gain of using SVG here?
  - detritus 9y ago
    Scalable vector output?
  - marcus_holmes 9y ago
    I tried that on an earlier version, but there's complications ;) The "double corded" style paints one side of a cord red and the other blue. The problem comes when the pattern changes what side is which. You can play around with it to see - put in some breakpoints and you'll see the "sides" switch on some cells. This can't be done with tiles. The tile manipulation is actually no simpler than drawing SVG, because the hard bit is calculating the entry and exit points for each tertiary cell. And SVG produces better results :) I also plan on doing some more stuff with it someday - like deforming the grid by moving the corners. This is pretty simple with SVG but would be really hard with tiles.
- HolyHaddock 9y ago
  That's delightful, thank you for posting it!
- weavie 9y ago
  Awesome. Is the code for this open source? (I'm just afraid the world could lose this should you decide to take it down some day!)
  - 9y ago
_greim_ 9y ago
Agreed. Elm+SVG is also a dream.
bryanrasmussen 9y ago
I would say not fantastically - it is part of the DOM, but it is 1. XML - so namespaces? 2. SVG has it's own DOM - it builds on an extends the HTML DOM but React only understands the HTML DOM. But I could also say these were minor quibbles.
- ygra 9y ago
  Most of that is a problem in browsers already as well. While SVG works without problems in other XML languages due to namespaces, browsers run it through an HTML parser and certain things are simply required by that parser for no good reason, e.g. that the XLink namespace prefix must be xlink and otherwise it won't work.
- neoeldex 9y ago
  That's just not true, react does understand and is able to create svg elements in the svg namespace.
Vinnl 9y ago
That's actually what got me into React as well - I was initially going to try my hands at a then-alpha of Angular 2, but it couldn't work with SVG. I then decided that React would be nice to try for a hobby project, and there we are: https://agripongit.vincenttunru.com/ https://agripongit.vincenttunru.com/
vanderZwan 9y ago
> Unless there are performance concerns, that reason alone would make me choose it over Canvas every time. I agree, but ironically am one of the few here with a use-case that seems to be in the canvas-is-always-better category, and performance reasons aren't even the only motivation (although that matters too). I'm working on a data browser of huge data sets, and the plotted data needs to maximise the use of the limited available pixels to convey as much information as possible (see [0] for an example). At that point canvas is the more convenient option. [0] http://linnarssonlab.org/flamemaps/ http://linnarssonlab.org/flamemaps/

meagher 9y ago

Made this Chernoff ~Fish~ generator (http://meagher.co/chernoff-fish/ http://meagher.co/chernoff-fish/) with React and SVG. They are a great pair!

smcnally 9y ago

Very cool. You might need a seizure warning - [core.cljs] https://github.com/polymeris/carlos/blob/master/src/carlos/core.cljs https://github.com/polymeris/carlos/blob/master/src/carlos/c... and [svg.cljs] https://github.com/polymeris/carlos/blob/master/src/carlos/svg.cljs https://github.com/polymeris/carlos/blob/master/src/carlos/s... Look clear enough for me to follow. Thank you. Will work on this, too: (:require [carlos.core :as core])) * edit: clearer even unrendered

Sophistifunk 9y ago

Agreed. Going with SVG instead of something else to render the Jenkins pipeline graph has made our lives much easier when it comes time to make changes since we introduced it. For anybody interested in some example code mixing React and SVG the PipelineGraph component is here: https://github.com/jenkinsci/blueocean-plugin/blob/master/jenkins-design-language/src/js/components/PipelineGraph.jsx https://github.com/jenkinsci/blueocean-plugin/blob/master/je...

abritinthebay 9y ago

We do exactly this (SVG + React) at Bleacher Report. It’s basically the best of every world for us (visuals, code, etc) and we’re trying to convert as much as we can to this (takes a while... we have a LOT of logos for example)

marcus_holmes 9y ago

When I started learning React, I realised a dream of mine could finally come true: a proper Celtic Knotwork generator. Uses SVG and React together in harmony. http://celtic-knotwork.online http://celtic-knotwork.online

vog 9y ago
Pardon my ignorance, but aren't these patterns just composed of certain tiles in rows and columns? This is something you can do equally well with raster graphics, so what's the gain of using SVG here?
- detritus 9y ago
  Scalable vector output?
- marcus_holmes 9y ago
  I tried that on an earlier version, but there's complications ;) The "double corded" style paints one side of a cord red and the other blue. The problem comes when the pattern changes what side is which. You can play around with it to see - put in some breakpoints and you'll see the "sides" switch on some cells. This can't be done with tiles. The tile manipulation is actually no simpler than drawing SVG, because the hard bit is calculating the entry and exit points for each tertiary cell. And SVG produces better results :) I also plan on doing some more stuff with it someday - like deforming the grid by moving the corners. This is pretty simple with SVG but would be really hard with tiles.
HolyHaddock 9y ago
That's delightful, thank you for posting it!
weavie 9y ago
Awesome. Is the code for this open source? (I'm just afraid the world could lose this should you decide to take it down some day!)
- 9y ago

_greim_ 9y ago

Agreed. Elm+SVG is also a dream.

bryanrasmussen 9y ago

I would say not fantastically - it is part of the DOM, but it is 1. XML - so namespaces? 2. SVG has it's own DOM - it builds on an extends the HTML DOM but React only understands the HTML DOM. But I could also say these were minor quibbles.

ygra 9y ago
Most of that is a problem in browsers already as well. While SVG works without problems in other XML languages due to namespaces, browsers run it through an HTML parser and certain things are simply required by that parser for no good reason, e.g. that the XLink namespace prefix must be xlink and otherwise it won't work.
neoeldex 9y ago
That's just not true, react does understand and is able to create svg elements in the svg namespace.

Vinnl 9y ago

That's actually what got me into React as well - I was initially going to try my hands at a then-alpha of Angular 2, but it couldn't work with SVG. I then decided that React would be nice to try for a hobby project, and there we are: https://agripongit.vincenttunru.com/ https://agripongit.vincenttunru.com/

vanderZwan 9y ago

> Unless there are performance concerns, that reason alone would make me choose it over Canvas every time. I agree, but ironically am one of the few here with a use-case that seems to be in the canvas-is-always-better category, and performance reasons aren't even the only motivation (although that matters too). I'm working on a data browser of huge data sets, and the plotted data needs to maximise the use of the limited available pixels to convey as much information as possible (see [0] for an example). At that point canvas is the more convenient option. [0] http://linnarssonlab.org/flamemaps/ http://linnarssonlab.org/flamemaps/