I finally get how SVGs work

Thanks for sharing my post, Theo! Glad it was helpful. 😄

Inkscape doesn't mush everything together into one path element. But instead it adds layer and metadata elements that might bloat the file size. It's not that bloated, but for icons embedded on websites you want it as small as possible. So then I manually strip anything unnecessary. But since inkscape is based on SVG you have direct control over the exact elements that you get. IIRC you can even give them the id/class attributes that you want directly in inkscape. Also inkscape is open source AND can be used to render SVGs via command line options without opening a window. So I use inkscape in some Makefiles to "compile" SVGs to PNG at various sizes etc.

Side note: this whole video is why I disagreed with an earlier take that SVG code doesn't belong in React. You unlock soooo much power by dynamically rendering SVG code using React - but yeah, you lose all of it when everything in your SVG is one illegible path element.

I'm jealous of how good that blog looks and how much effort he puts into it. I hope I can build something like that one day if I stay dedicated and make the time.

I’m just over halfway through and I’ve already learnt so much from this video. Thanks Josh (and Theo)

finally a non AI related vid...

svg filters is a huuuge topic to cover. one of the useful parts about it is that it allows you to create custom css filters (proper shadows and background blurs are the most useful)

21:05 "That strokes had that level of customization"

I've done a decent amount of work with Canvas in the past, and I had no idea how much crossover there was between them and SVGs. This makes them so much more approachable! Thanks for finding/showing this off!

1:56 I hardly skip Theo’s ads. They come as information than ads to me