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

91–100 of 113 posts

Re: SVG Tutorial

#91

Post by paulddraper »

epiccoleman wrote: post #69
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…

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.

Re: SVG Tutorial

#92

Post by allan_s »

jarek-foksa wrote: post #61
sampullman wrote: post #10

Earlier quoted context omitted.

Design people will use their editor of choice - Illustrator/Sketch/Inkscape/etc. Some coders might tweak things using that software, but usually I'll edit the SVG directly, especially if there's interactivity. For complicated shapes/curves I'll sometimes run it through an online editor to help visualize, this is a good one: https://yqnn.github.io/svg-path-editor/

There is also Boxy SVG ( https://boxy-svg.com ) which combines both designer and developer oriented functionality and uses SVG as its native file format. Unlike Illustrator/Sketch/Inkscape it can also create and manipulate SVG animation elements ( https://boxy-svg.com/blog/21 ) - a very powerful feature which is now supported by all major browsers.

I dont mean to be rude but is there a reason why firefox is not supported ? Is it " it will never work there because the mandatory feature X is missing and will never be implemented in firefox " or "some features are broken " in which case a disclaimer "we dont test in firefox so use at your own peril" would be great :)

Re: SVG Tutorial

#93

Post by epiccoleman »

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.

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.

Re: SVG Tutorial

#94

Post by thakoppno »

sircastor wrote: post #51
thakoppno wrote: post #5

Earlier quoted context omitted.

Cool story but would you elaborate on this part? > walk across the hall to get the hex codes for the other color

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?

Re: SVG Tutorial

#96

Post by HunorBorbely »

JamieDawsonCode wrote: post #95

The advent calendar design was such a good idea since you're releasing this in December! My favorite is the clock that tells you your time at 22 and the functioning Christmas lights at 23!

Thank you. The whole project actually started as an advent calendar. Then I started thinking okay, what should be the content of it :)

Re: SVG Tutorial

#97

Post by jarek-foksa »

allan_s wrote: post #92
jarek-foksa wrote: post #61

Earlier quoted context omitted.

There is also Boxy SVG ( https://boxy-svg.com ) which combines both designer and developer oriented functionality and uses SVG as its native file format. Unlike Illustrator/Sketch/Inkscape it can also create and manipulate SVG animation elements ( https://boxy-svg.com/blog/21 ) - a very powerful feature which is now supported by all major browsers.

I dont mean to be rude but is there a reason why firefox is not supported ? Is it " it will never work there because the mandatory feature X is missing and will never be implemented in firefox " or "some features are broken " in which case a disclaimer "we dont test in firefox so use at your own peril" would be great :)

Firefox support is tracked on https://boxy-svg.com/ideas/227/firefox-browser-support, I think it will be added next year.

Re: SVG Tutorial

#98

Post by emorning3 »

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…

Ditto.

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

Works great.

Re: SVG Tutorial

#99

Post by johnfn »

epiccoleman wrote: post #93
paulddraper wrote: post #91

Earlier quoted context omitted.

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

Re: SVG Tutorial

#100

Post by antod »

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

As others have pointed out, elements and tags are different things and always were. An element is the thing comprised of tags and the content between them. eg content is an element.

https://developer.mozilla.org/en-US/docs/Glossary/Tag

Post reply on HN