Lemme show off some cool SVG-related things this week. Gotta love SVG. It’s this graphics language built right into the web platform that has a ton of capability and is always right there waiting for us when we need it. Thanks the web!
Portability is a cool SVG feature. You can copy and paste a bit of SVG right into HTML and that’s not only functional but actually, a pretty good way to do it. That way you can style it freely and no additional network request is made.
Ya know… that’s how our icons feature works here on CodePen.
And it’s a decently common way to deliver UX on a set of SVG icons generally. For example, check out Monika Michalczyk’s Shapes project, where you can just click any of them and get all the code right on your clipboard. They paste into Pens really nicely, of course.
Or here’s Robb Knight’s Mac 30th Anniversary Icons which are super cool minimalist representations of Macs over the last many decades.
You can learn the SVG syntax. I guess that’s kinda obvious but maybe not to everybody as SVG is often the output of tools. You can export SVG from Figma and Illustrator and stuff and you didn’t have to learn the syntax, you just use the output.
Just SVG paths alone are fairly complicated and something of a sub-syntax. I wouldn’t say I know it super duper well, but I know enough that I wrote a guide a while back.
Some of the other attributes of SVG elements are a bit more straightforward like
circle essentially has a central point at an X, Y coordinate and then a radius. Sébastien Noël has a new guide on fffuel that helps understand a lot of these syntaxes:
But leave it to yuanchuan (creator of css-doodle) to Experimenting [with] A New Syntax To Write SVG. It’s centered around the idea that the stylistic SVG attributes can be moved to a CSS-like syntax, which doesn’t just select and style SVG, but creates it.