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

41–50 of 113 posts

Re: SVG Tutorial

#41

Post by otteromkram »

shepherdjerred wrote: post #38

Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything. This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Le…

Yeah, there are lots of tools to help with this. Why post a link that is off topic?

Might be hard to believe, but some folks want to learn stuff and understand how things work under the hood, which is a group that OP's site appears to target.

Re: SVG Tutorial

#42

Post by CharlesW »

otteromkram wrote: post #41
shepherdjerred wrote: post #38

Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything. This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Le…

Yeah, there are lots of tools to help with this. Why post a link that is off topic? Might be hard to believe, but some folks want to learn stuff and understand how things work under the hood, which is a group that OP's site appears to target.

> Why post a link that is off topic?

Examining the output seems like another interesting way to learn SVG until one can speak it natively.

Re: SVG Tutorial

#43

Post by edw519 »

HunorBorbely wrote: post #40
edw519 wrote: post #34

This is fantastic! I especially like the examples with curves, which I continue to struggle with, along with clipping. Personally, I'm partial to path which can do almost anything and tends to be less verbose than other methods. Long time student, but I see that I still have lots to learn. I suck so much at drawing and dislike images so much that for ease and performance, I built my entire side project with svg. Afte…

Thank you, I'm glad it helped. Cool comics!

Thank you, Hunor. I found your CodePen. Wow. Looks like I'll be busy today :-)

Re: SVG Tutorial

#44

Post by haroldp »

solardev wrote: post #25
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?

As a frontend dev who also works in UX and graphics from time to time, I find it helpful to be able to do both, looking at SVGs as both a vector graphics format and a human-readable XML. IME the workflow depends more on whether any SVG is meant to be illustrative (like art) or quantitative (like charts) or interactive and animated/mutable (like a game). For something like this bell example ( https://svg-tutorial.com/…

> And for things like the ringer (is that what you call it? the orange ball thing at the bottom of the bell that strikes the bell to make the sound)

The "clapper".

I am still on the steep end of the SVG learning curve, but also generally start in Illustrator and then export, clean up, and hand-code the details.

Re: SVG Tutorial

#45

Post by fy20 »

otteromkram wrote: post #41
shepherdjerred wrote: post #38

Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything. This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Le…

Yeah, there are lots of tools to help with this. Why post a link that is off topic? Might be hard to believe, but some folks want to learn stuff and understand how things work under the hood, which is a group that OP's site appears to target.

Actually I've been working on a task that needs me to generate SVGs today, and satori looks like it's going to be much easier to achieve what I want. So thanks shepherdjerred!

Re: SVG Tutorial

#46

Post by lghh »

otteromkram wrote: post #41
shepherdjerred wrote: post #38

Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything. This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Le…

Yeah, there are lots of tools to help with this. Why post a link that is off topic? Might be hard to believe, but some folks want to learn stuff and understand how things work under the hood, which is a group that OP's site appears to target.

The parent comment was just offering alternative approaches to the problem that the thread's link addresses. That seems like a perfect use for a comment on this thread. It's the furthest thing from "off topic".

> Might be hard to believe

This is condescending and unhelpful.

Re: SVG Tutorial

#47

Post by omoikane »

chrisfinazzo wrote: post #19

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.

> Alignment is a trip

Inkscape's alignment functions works for me. For things where I needed more precision, what I do is press ctrl+shift+x and type in the coordinates there. (Inkscape's XML editor seem to crash very often for me, but it's workable if I remember to save after every edit).

Re: SVG Tutorial

#48

Post by bambax »

chrismorgan wrote: post #33
bambax wrote: post #20

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)

You don’t even need the second , you can just render the normally and use it in the clipPath: - + - + (Personally I’d also drop the -wrapping. Never did understand why structuring them that way is recommended, I don’t think it actually gets you anything except for the vanishingly rare case where you want to put something that would render if it were not in a tag—I say “vanishingly rare” because situations like you sh…

I like to do the defs in one svg in one part of the html page, and use them elsewhere in other svgs. It's clean and readable that way. But to each their own I guess!

Re: SVG Tutorial

#49

Post by gwnywg »

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 :)
Post reply on HN