5 ms·
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 us
by johnfn 3y ago
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!
- HunorBorbely 3y agoTotally. 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
- epiccoleman 3y agoTotally - 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.
- paulddraper 3y agoAgreed. 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.
- epiccoleman 3y agoTrue - 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.
- johnfn 3y agoYeah 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!
- epiccoleman 3y agoYeah - 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.
- Tagbert 3y agoThat and the rudimentary handling of multi-line and blocks of text in SVG.
- notpushkin 3y agoI'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.
- emorning3 3y agoDitto. I code the patterns that I cut on my GlowForge using React & SVG. Works great.
- albert_e 3y agoIs 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
- HunorBorbely 3y agoDay 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.
- epiccoleman 3y agoIt'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-fifths https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth... [2]: https://epiccoleman.com/posts/2023-04-14-circle-of-fifths-interactivity https://epiccoleman.com/posts/2023-04-14-circle-of-fifths-in...
- epiccoleman 3y ago* following post in the series