Learn SVG with 25 examples – How to code images in HTML

Re:Learn SVG with 25 examples – How to code images in HTML by johnfn on Thursday December 07, 2023 @01:32PM (#38559945)

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!

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by notpushkin on Thursday December 07, 2023 @03:38PM (#38561497)

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.

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by epiccoleman on Thursday December 07, 2023 @02:37PM (#38560785)

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.

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by paulddraper on Thursday December 07, 2023 @04:54PM (#38562347)

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.

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by epiccoleman on Thursday December 07, 2023 @05:09PM (#38562508)

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.

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by johnfn on Thursday December 07, 2023 @07:18PM (#38563740)

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!

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by epiccoleman on Friday December 08, 2023 @08:14AM (#38568604)

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.

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by Tagbert on Friday December 08, 2023 @01:31AM (#38566030)

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

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by HunorBorbely on Thursday December 07, 2023 @01:41PM (#38560052)

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

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by emorning3 on Thursday December 07, 2023 @06:37PM (#38563308)

Ditto.

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

Works great.

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by albert_e on Thursday December 07, 2023 @10:49PM (#38565219)

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

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by HunorBorbely on Friday December 08, 2023 @04:33AM (#38567039)

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.

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by epiccoleman on Friday December 08, 2023 @08:23AM (#38568687)

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

[ Parent | on HN ]

Re:Learn SVG with 25 examples – How to code images in HTML by epiccoleman on Friday December 08, 2023 @11:47AM (#38571057)

* following post in the series

[ Parent | on HN ]