Hacker News Reader

Comment by polymeris | Hacker News Reader

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/ Done in one day, without knowing the tech.

View on HN

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

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?

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.

Scalable vector output?

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!)

Not yet - it's on github (the site runs off Github pages) but I need to prune the repo of private keys before I open-source it. Given the reaction here, I'll try and open it over the weekend :)

That's delightful, thank you for posting it!

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/je...

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/

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

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)

> 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/

Very cool. You might need a seizure warning -

[core.cljs] https://github.com/polymeris/carlos/blob/master/src/carlos/c... and [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

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.

That's just not true, react does understand and is able to create svg elements in the svg namespace.

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.

Agreed. Elm+SVG is also a dream.

Reply on news.ycombinator.com