Hacker News Reader

Comment by johnfn | Hacker News Reader

SVG + React is really underrated, IMO. You get all the power and abstractions of React, but instead of rendering DOM, you can render arbitrary graphics. I've used this for rendering graphs and charts, and for a certain subset of use-cases, it demolishes Canvas. For instance, if you need a little bit of interactivity, but you don't need anything too graphically crazy like per-pixel manipulation.

e.g., doing hover effects in Canvas is a huge pain because you have to do all the work to figure out which element the mouse is on top of. With SVG you just use builtins like onmouseover!

View on HN

Totally - the fact that you can hook up click listeners and use CSS to style SVG just like it's regular ol' html feels pretty magical at times, and React / JSX makes it really easy to utilize.

Agreed.

One of the biggest downsides is that there is none of the percentage-based sizing that you get with HTML. Otherwise, it could replace HTML for virtually everything.

True - although in certain ways, this can be an advantage. When I've built SVG components, I use viewbox with height and width constants to define the SVG's "internal" dimensions, and then if you want to do something like finding the midpoint, you just do the right math on your constants. Then, the component can easily be scaled via CSS.

The problem, of course, is that there's not really a good way to do dynamic sizing if you want to be able to change the aspect ratio, which is where layout engines like Grid and Flex become so useful in HTML / CSS. But in my (fairly limited) experience, if I'm reaching for SVG it's because I need the tight control that comes with it, so it hasn't been an issue for my own projects.

Yeah and, worse comes to worst, you can just use foreignObject to bounce back to HTML, do something with flexbox, and then go back to SVG!

Yeah - foreignObject is super interesting, I had never heard of it before this thread. I even have a potential use case for it one of my projects, definitely need to check it out.

That and the rudimentary handling of multi-line and blocks of text in SVG.

Is there a good primer to this topic?

This sounds like an area I would enjoy a lot but am barely a beginner in React. Any working examples that might give me the right direction / inspiration ? Thanks

It's not exactly a primer, but my blog post[1] that I linked elsewhere in the thread is, I think, a pretty good example. It goes through some SVG basics, and then the following post in the theory talks through adding interactivity via event listeners hooked up in a React-y way.[2]

I can't promise that it's like, the best code or the best approach to the problem, but I did get the component working, which is worth something. Check it out - I'd love to hear what you think!

[1]: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...

[2]: https://epiccoleman.com/posts/2023-04-14-circle-of-fifths-in...

* following post in the series

Day 24 is a basic example of React + SVG. Once you get the basics of React you can just start coding images based on this tutorial.

I've made an image segmentation + tagging component with Preact.js and SVG for a client – turned out pretty neat. Can recommend for this kind of applications.

Totally. There are many cases when HTML Canvas is way more performant, but if you don't build the next Figma, then working with SVG is way more convenient

Ditto.

I code the patterns that I cut on my GlowForge using React & SVG.

Works great.

Reply on news.ycombinator.com