Using SVG as placeholders — More Image Loading Techniques - JMPerez Blog

Basic Pattern Repository

A nice little collection of very simple—and very lightweight—SVGs to use as background patterns.

Swipey image grids.

This is how you write up a technique! Cassie takes an SVG pattern she used on the Clearleft “services” page and explains it in step-by-step detail, complete with explanatory animated diagrams.

Making single color SVG icons work in dark mode

Another good reason to use the currentColor value in SVGs.

abc to SVG | CSS-Tricks

Aw, this is so nice! Chris points to the way that The Session generates sheet music from abc text:

The SVG conversion is made possible entirely in JavaScript by an open source library. That’s the progressive enhancement part. Store and ship the basic format, and let the browser enhance the experience, if it can (it can).

Here’s another way of thinking of it: I was contacted by a blind user of The Session who hadn’t come across abc notation before. Once they realised how it worked, they said it was like having alt text for sheet music! 🤯

Boxy SVG

This is impressive—a fully featured graphics app for creating SVGS right in your browser.