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

61–70 of 113 posts

Re: SVG Tutorial

#61

Post by jarek-foksa »

sampullman wrote: post #10
mi_lk wrote: post #6

What’s the usual practice — do people code in SVG directly or they draw in for example Figma and generate a SVG file?

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.

Re: SVG Tutorial

#62

Post by allan_s »

HunorBorbely wrote: post #59
gwnywg wrote: post #49

On day 5 they draw an ornament with motif. Funny how it's rendered in Firefox on Android on my phone- none of the images contains motif clipped to the ornament :)

Ouch. Some browsers might not support every feature. Gradients also have some issues. Luckily it seems to be all right so far in desktop browsers.

Thanks a lot for your website it's really nicely written. Can you add a disclaimer for this one to say it does not work on firefox android (i also hit the issue ^^)

Re: SVG Tutorial

#63

Post by simonw »

HunorBorbely wrote: post #60
simonw wrote: post #58

The advent calendar UI is nice but makes it hard to quickly browse the available content. Here's a full list of the articles: - How to Draw Basic Shapes with SVG - https://svg-tutorial.com/svg/basic-shapes - How to Build a Christmas Tree with SVG - https://svg-tutorial.com/svg/polygon - How to Make a Gingerbread Figure with SVG - https://svg-tutorial.com/svg/gingerbread-figure - How to Build a House with SVG - https:…

Lol :) Maybe I should just put this below the calendar. What do you think?

That would be great!

Re: SVG Tutorial

#65

Post by whatever_yeah »

Very cool stuff, and great work. Minor UI nitpicks (my personal bugbear):

- Lesson content section has unnecessary horizontal scrollbar visible

- No visual distinguishing or handling for scrollable area (vs the finished display area) had me trying to scroll with my mouse hovering on the lefthand side often, and momentarily confused why it wouldn't go. Make the whole main body section scroll the content, ideally.

Re: SVG Tutorial

#66

Post by sampullman »

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.

Looks great! I vaguely recall checking it out at some point but must have forgotten to bookmark.

It seems like a fairly straightforward mapping of UI -> SVG features, which must have taken a ton of effort. I'll have to take a closer look at the animation tool, I've often wondered if web technologies would ever get close to Flash's capabilities.

Re: SVG Tutorial

#67

Post by epiccoleman »

This is really cool! SVG is such a neat and flexible format, I'll definitely be taking some time to work through these tutorials, as it's directly related to some side projects I have going.

Like some of the other commenters here, I've found a lot of fun in building React components that are backed by SVG. React and JSX make it easy to add the interaction, and SVG lets you do some pretty cool UIs that wouldn't be easily possible with just HTML.

I actually have published a React component that renders an interactive "Circle of Fifths," which I built for a music theory side project I was working on (although this project is currently languishing among many other half-baked repos). There's still a lot to do with the component, but it's in a usable state[1].

I wrote what I think is probably my best blog post[2] about the process of figuring out how to build the Circle of Fifths with SVG. I'm particularly proud of the little explainer section in the middle that follows the drawing of a somewhat complex element.

I'm currently building out a fretboard diagram generator using a very similar approach, and having that post on hand for reference has been pretty useful. This is maybe my favorite thing about writing up the stuff I work on, it's nice to be able to "replay" how I thought through a problem.

[1]: https://github.com/epiccoleman/react-circle-of-fifths

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

Re: SVG Tutorial

#68

Post by massifist »

I just switched over to SVGs from bitmap images. I was using PNG images for different icons which worked fine until I had to upscale to higher resolutions. The SVGs work great and are probably smaller too (depending on the complexity).

I want to render them to a canvas with different (dynamic) color configurations and I'm exploring different ways to do this.

Re: SVG Tutorial

#69

Post by epiccoleman »

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.

Re: SVG Tutorial

#70

Post by ChrisMarshallNY »

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

Post reply on HN