I’m going to do an SVG issue here, because I find that technology persistently interesting. It’s a bit of a superpower for front-end developers who know how it works and can leverage it when needed to pull of interesting effects. For example, this compelling line drawing scroll effect is powered by SVG features.
There have been some really cool SVG tools I’ve only just seen recently, and some great writing about SVG techniques. Warms my little heart to see SVG still being actively explored even as it sits rather dormant from a standards point of view.
Let’s start with some tools and resources, since those are easy to digest and if you really love one of them you’ll be all like thanks CodePen Spark, you’re a good newsletter and ya know that’s what we’re in it for.
Tech Icons
SVG icons tend to be single-color as a trend, but actual logos tend to involve brand colors and can often be multi-color. I like how it’s super easy to use, offering both downloads and quick copy-and-paste.
Durves
I can’t explain it but sometimes you need an SVG of a grid of dots that are waving. This allows you to control all the Aspects of that. Has some tearable cloth vibes.
svghub
Squiggles, scribbles, shapes and… other stuff.
I love this because they are the kind of things that are perfect for vector art, but that you don’t typically find in things like icon sets. One click to copy right to clipboard or download.
SVGMix
Big one! 193 Icon collections. I do like that they are grouped in collections, so in case you need a bunch of assets, there is a good chance they’ll go together aesthetically. I’m a big Noun Project guy, but find it isn’t quite as well organized into collections.
OK I suppose we’d better move on to some techniques and explanations.
SVG Gradients: Solving Curved Challenges
How do you get a color gradient to follow the path of SVG artwork? Michael Sydney Moore solved it by breaking up the art into smaller sections and applying gradients to each section.
This is an interesting contrast to another technique that Ksenia Kondrashova explains.
SVG viewBox
The viewBox on SVG is pretty simple really: it sets up the visible coordinate system where everything else is drawn. Interestingly, you can change it at any time, and it effectively acts as a camera, especially if you animate it.
Brad Woods has perhaps the best explanation of it I’ve ever seen, via an interactive post.
Making noisy SVGs
Turns out <feTurbulence> is up to the job of making a noise effect in SVG, but there is a little more to it to make it nice, as Daniel Immke writes up:
To create noise, I used the
<feTurbulence>filter which is explicitly for generating artificial textures but required quite a bit of fiddling to get to my liking. Then, I had to use other filter effects to eliminate color variance and blend naturally with the fill color selected, and finally apply the filter to the circle.
Noise sometimes feels like the perfect way to chill out the mathematical sharpness of vector art.
Also — did you know there is a weird trick to make noise with CSS gradients?
Responsive SVGs
There is a technique in this post from Nils Binder where he stretches just a part of an SVG according to variable content elsewhere and I love it.
Speaking of responsive… did you know the illustration in Ethan’s original article was responsive in itself?
Making SVG Loading Spinners: An Interactive Guide
This is part of what makes SVG so attractive to me: simple primitives that all combine together to do elegant things. Here, to make a specific kind of fun spinner, Sébastien Noël uses
<circle>with astrokestroke-dasharrayto control exactly how the stroke should be dashedstroke-linecapto control the nice look of the dashed partsstroke-dashoffetto control the position of the dashes@keyframeanimation to animate thestroke-dasharraymaking it feel like a spinner.
Icon transcendence: customizing icons to complement fonts
This one is from the “I hope your client has a lot of money” files. I love the idea but it’s wild. The idea is that SVG icons could swap out to match the vibe of the font they are next to.
But by “swap out”, really, somehow, it’s the same source icon.
Although these icons look quite differently visually, they were actually crafted by using the single source icon you saw above as a reference. For each of the fonts here, we’ve modified that source icon, thus producing a custom icon that better matches the style and mood of each font: