Scott writes up that super smart transclusion trick of his.
Woah! This is one smart hack!
Scott has figured out a way to get all the benefits of pointing to an external SVG file …that then gets embedded. This means you can get all the styling and scripting benefits that only apply to embedded SVGs (like using
The fallback is very graceful indeed: you still get the SVG (just not embedded).
This article by Cassie is so, so good!
First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!
Best of all, I get to work with the super-smart developer who did all this.
Another good reason to use the
currentColor value in SVGs.
Aw, this is so nice! Chris points to the way that The Session generates sheet music from abc text:
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! 🤯
Browser implementations of Sol LeWitt’s conceptual and minimal art, many of which only exist as instructions like this:
Vertical lines, not straight, not touching, covering the wall evenly.
On Ev’s blog, Marcin goes into great detail on theming an interface using CSS custom properties, SVG, HSL, and a smattering of CSS filters.
I was kind of amazed that all of this could happen via CSS and CSS alone: the colours, the transitions, the vectors, and even the images.
In this days of monolithic frameworks, I really like seeing modest but powerful patterns like this—small pieces that we can loosely join.
This is impressive—a fully featured graphics app for creating SVGS right in your browser.
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.
Here’s the maths behind the metaballs (implemented in SVG).
A clever little hack to preserve an aspect ratio for any HTML element.
We use two important attributes:
- SVG knows how to maintain aspect ratio
- CSS grid knows how to make overlapping items affect each other’s size
Paul walks us through the process of making some incremental accessibility improvements to this year’s 24 Ways.
Creating something new will always attract attention and admiration, but there’s an under-celebrated nobility in improving what already exists. While not all changes may be visual, they can have just as much impact.
Liberally licensed SVG illustrations by Katerina Limpitsouni with customisable colour schemes.
Data visualisations created for The Times, complete with code.
edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
These are lovely little SVGs of website logos that are yours for the taking. And if you want to contribute an icon to the collection, go for it …as long as it’s less than 1024 bytes (most of these are waaay less).
Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.
Amber has been investigating which image formats make sense for which situations.
Choosing image format is only one step towards optimising images on the web. There are many, many other steps to consider, and so, so much to learn!
119 slides from Sarah on a wide range of SVG magic (with code).