Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

SVG Tutorial

svg-tutorial.com

Post reply on HN
Print view View original

101–110 of 113 posts

Re: SVG Tutorial

#101

Post by albert_e »

johnfn wrote: post #53

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 effe…

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

Re: SVG Tutorial

#102

Post by Tagbert »

paulddraper wrote: post #91
epiccoleman wrote: post #69

Earlier quoted context omitted.

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.

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

Re: SVG Tutorial

#103

Post by HunorBorbely »

albert_e wrote: post #101
johnfn wrote: post #53

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 effe…

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

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.

Re: SVG Tutorial

#104

Post by ChrisMarshallNY »

Archelaos wrote: post #79
ChrisMarshallNY wrote: post #70

That's a great tutorial. One niggle: They refer to the SVG "tag." I had started HTMLing in the mid-1990s, and we always called everything "tags." Then, XHTML came in, and people started screaming at us for calling them "tags." They were elements , dammit! I say "element," these days, but my brain still says "tag."

In XML terminology (where XHTML derives from), "tags" are the delimiters of "elements". So we have "start-tags", "end-tags", and "empty-element-tags".[1] "Element" refers to the composition of the delimiting tags and all of their (nested) content.[2] [1] https://www.w3.org/TR/xml/#sec-starttags [2] https://www.w3.org/TR/xml/#sec-logical-struct

That makes great sense.

I never used "tag" properly, then.

But for complete elements, like or , would it be proper to refer to them as "tags"?

Re: SVG Tutorial

#105

Post by epiccoleman »

johnfn wrote: post #99
epiccoleman wrote: post #93

Earlier quoted context omitted.

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 sizi…

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.

Re: SVG Tutorial

#106

Post by epiccoleman »

albert_e wrote: post #101
johnfn wrote: post #53

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 effe…

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

Re: SVG Tutorial

#107

Post by d1sxeyes »

ChrisMarshallNY wrote: post #104
Archelaos wrote: post #79

Earlier quoted context omitted.

In XML terminology (where XHTML derives from), "tags" are the delimiters of "elements". So we have "start-tags", "end-tags", and "empty-element-tags".[1] "Element" refers to the composition of the delimiting tags and all of their (nested) content.[2] [1] https://www.w3.org/TR/xml/#sec-starttags [2] https://www.w3.org/TR/xml/#sec-logical-struct

That makes great sense. I never used "tag" properly, then. But for complete elements, like or , would it be proper to refer to them as "tags"?

Depends on what you’re talking about, to be honest. The “element” is the “thing”. The “tag” is how you tell the browser what you want.

This is why you have DOM functions like “getElementsByTagName”, which allows you to say “I know the tag name is “hr” (and the tag is ), but I want to get references to all the elements which are defined by that tag.

As a general rule, if you’re thinking about a “thing” on a webpage, you’re think about an element. If you’re thinking about what you need to write to get that element to appear on the webpage, you’re thinking about a tag.

Most of the time, folks will understand what you mean even if you use the wrong one though.

Re: SVG Tutorial

#108

Post by throwfi23432 »

HunorBorbely wrote: post #55

Thank you for the great feedback, I really appreciate it. I fixed some errors you found. Let me know if something still doesn't work. It's still a bit in the process of fine-tuning. For instance, does anyone know why the thumbnail preview does not work on Twitter? It works with the sub-pages.

Not sure if you are talking about link previews. If you are Elon messed with them recently. https://www.socialmediatoday.com/news/x-changing-how-link-pr...

Re: SVG Tutorial

#109

Post by [deleted] »

thakoppno wrote: post #94
sircastor wrote: post #51

Earlier quoted context omitted.

Sorry - that wasn't clear. Across the hall were our Design folks. They had the appropriate colors (in hex) that I needed.

Thanks for clarification. What’s messing with me is that you seemed to have a computer that drew hex colors. Also, you knew the hex value you wanted. Kinda hate second guessing your actions from the 20th century but why did you walk?

[deleted]

Re: SVG Tutorial

#110

Post by epiccoleman »

epiccoleman wrote: post #106
albert_e wrote: post #101

Earlier quoted context omitted.

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 som…

* following post in the series
Post reply on HN