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.
OK I saved the best for last for you: Draw SVG rope using JavaScript (and it’s not just because there is an excellent CodePen demo) from Stanko Tadić. And not just rope like a line that maybe has some basic physics, but real-looking twisted rope, like the kind that might be holding a large ship to dock. The journey, which is excellently documented, involves really digging into the SVG APIs, doing interesting math, and knowing about fancy algorithms and stuff (see “Chaikin’s method” for rounding). I like it when you can tell someone is clearly captivated by an idea, gets it all figured out, then documents it so well the output and the explanation are equally interesting.
The post Chris’ Corner: Fresh SVG Drop appeared first on CodePen Blog.