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

11–20 of 113 posts

Re: SVG Tutorial

#11

Post by Waterluvian »

rahimnathwani wrote: post #8
Waterluvian wrote: post #4

One of the things that kinda clicked for me recently was learning that I can inline SVG tags in a react application as if they were JSX tags. I dunno specifically if that’s first class or webpack is covering it, but it really feels good in a few cases to make an SVG component with some logic built in. So now I can have an SVG and some react-driven logic modifies its shape, colour, omitting sections of it, etc.

This is good for simple SVGs, or cases where you will have many variations. But when you online SVG code, the browser can't cache the image. So if the SVGs are larger, or have only a few variations, you may prefer to have a separate endpoint for each image variant. https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...

Yep! As always, there’s both pros and cons to a programming approach and a necessity to understand them.

Re: SVG Tutorial

#12

Post by HunorBorbely »

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?

For more complex graphics you would probably still use a designer tool. But for some simple ones, you can probably code them yourself. Like if you need an arrow or a hamburger menu icon, you can just jump straight into code. Sometimes I also just start with pen and paper and then figure out the coordinates from there, and adjust till it looks good enough.

Re: SVG Tutorial

#13

Post by kevindamm »

thakoppno wrote: post #5
sircastor wrote: post #2

Several years ago I was working on an interface and we were using SVGs for some graphics. We had two color schemes but one of the graphics was only in one of them, so I walk across the hall to get the hex codes for the other color. The design guy was blown away when we popped open the svg file and simply find-and-replaced all the colors to get the second color.

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

ah, the classic sneakernet

Re: SVG Tutorial

#14

Post by HunorBorbely »

kamikaz1k wrote: post #3

This is really neat! New SVG concept per lesson. Thanks for sharing! As usual, a lot of these things I could learn if I decided to, but it’s nice when someone puts it together in a pretty package and shows up on HN.

Thank you. Let me know if you have any feedback. It's still under fine-tuning. And of course if you share it, that helps a lot :)

Re: SVG Tutorial

#15

Post by proto_codex »

Love this resource! I've coded a few inline svgs in react for some fun svg interactivity, and its a lot of fun to play with.

The tag is especially useful, as it allows you to put normal html inside svg, so you can use html for things that html does better (links, images, basic flexbox styling etc) within a svg art project.

For the author, btw, a few links on the site are not working: your bio.link on the bottom of the page, and in Day 11: How to Draw Quadratic Bézier Curves with SVG, there is a link to an interactive bezier curve demo that is down.

Re: SVG Tutorial

#16

Post by HunorBorbely »

Waterluvian wrote: post #4

One of the things that kinda clicked for me recently was learning that I can inline SVG tags in a react application as if they were JSX tags. I dunno specifically if that’s first class or webpack is covering it, but it really feels good in a few cases to make an SVG component with some logic built in. So now I can have an SVG and some react-driven logic modifies its shape, colour, omitting sections of it, etc.

Yes, since HTML5 you can inline an SVG. You don't need Webpack or anything like that, it just works.

One of the examples in this tutorial is also a data-driven diagram generated from React. You can do pretty cool things by combining the two.

Re: SVG Tutorial

#17

Post by HunorBorbely »

proto_codex wrote: post #15

Love this resource! I've coded a few inline svgs in react for some fun svg interactivity, and its a lot of fun to play with. The tag is especially useful, as it allows you to put normal html inside svg, so you can use html for things that html does better (links, images, basic flexbox styling etc) within a svg art project. For the author, btw, a few links on the site are not working: your bio.link on the bottom of th…

Damn, something is always broken. Let me look into it.

As for foreignObject, I also didn't knew about it. That's awesome

Re: SVG Tutorial

#18

Post by jrumbut »

HunorBorbely wrote: post #14
kamikaz1k wrote: post #3

This is really neat! New SVG concept per lesson. Thanks for sharing! As usual, a lot of these things I could learn if I decided to, but it’s nice when someone puts it together in a pretty package and shows up on HN.

Thank you. Let me know if you have any feedback. It's still under fine-tuning. And of course if you share it, that helps a lot :)

This is very cool and fun!

For Day 10, I don't see a snowman. I think you lose the background somewhere so it's white on white, I'm on my phone though so I can't dig in too far.

Re: SVG Tutorial

#19

Post by chrisfinazzo »

Very nice. It would be nice to see an example or two with text + an image, as this is the battle I'm currently fighting.

Alignment is a trip, let me tell you...

While I've played around with Inkscape, I'm definitely on the "writing XML" side of the fence in order to create what I need.

Re: SVG Tutorial

#20

Post by bambax »

All in all, excellent ressource! Great and super clear examples.

Minor nitpick @clip-path; they propose the following code:
But that means describing the big circle twice. If you want to change the size of the circle you will have to modify it in two places. Since we're already using defs it would be better to write this IMHO:
(rest unchanged)
Post reply on HN