May 5, 2026 Smashing Newsletter: Issue #557
This newsletter issue was sent out to 176.434 subscribers on Tuesday, May 5, 2026.
Editorial
Nowadays, we can use CSS and SVG to animate and style paths individually, change parts of an image on focus/tap, and use all kinds of filters — even raster graphics inside of SVG to improve performance. What a time to live!
Today, we’d like to celebrate just that. In this issue, you’ll find plenty of SVG freebies, techniques, and useful tools — from favicons, filters, and editors, to all sorts of doodles and optimization strategies. We hope you’ll be inspired!
And because we cannot get enough of CSS and SVG, it’s about time we do another Smashing Meets to celebrate the mighty Style Sheet, and share the excitement we feel. We’ve invited three absolute CSS experts to share their stories, tools, tips, and practices with you, and we can hardly wait!
As usual, we have friendly conferences and online workshops coming up soon on all things frontend and UX:
- Cascading Style Systems: Resilient & Maintainable CSS Dev
with Miriam Suzanne. June 2–10 - Design Patterns For AI Interfaces UX
with Vitaly Friedman. Jun 16–30 - The Modern UX Practitioner UX
with Paul Boag. June 24 – July 2 - Design Patterns For Complex UIs and Enterprise UX UX
with Vitaly Friedman. Sep 2–3 - Naming Design Systems DS
with Samantha Gordashko. Sep 8–22 - Live UX Training UX
with Vitaly Friedman. Sep 11 – Oct 12 - Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - Jump to all workshops →
For now, though, happy SVGing!
— Iris
1. SVG Favicons
With SVG favicons being well-supported now, the days when you had to deal with dozens of files in your head element just to deliver a favicon that works across browsers are finally over. Paweł Grzybek shares a simple SVG favicons setup that solves all the resolution drama, works in most browsers, and adapts to user appearance preferences.
2. SVG Optimization And Accessibility
SVGs are super powerful, and with a few tweaks, you can make them even better. David Bushell wrote a practical guide in which he shares how he optimizes SVGs — both for performance and for accessibility.
If you want to dive deeper into SVG accessibility, also be sure to check out the guide that the A11y Collective team published. It explores WCAG-compliant techniques for making SVGs more inclusive, from choosing the right markup pattern to providing meaningful text alternatives.
3. SVG Doodles
Whether it’s arrows or geometric, organic, and abstract shapes, SVG Doodles is a treasure chest of more than 190 hand-made SVGs. Created by Michael Andreuzza, you can customize the doodles to your liking and, once you’re happy with the result, copy and paste them into your HTML or Figma projects, or use them in your slides and prints.
4. Friendly Introduction To SVG
SVG offers so many possibilities that it’s easy to get overwhelmed, particularly if you’re still at the very beginning of your SVG journey. So, where to begin to not get lost in the rabbit hole? Josh W. Comeau wrote a friendly introduction to SVG that provides a solid foundation for your SVG adventures. It covers everything from basic SVG shapes to animated strokes and cool tricks you can use right away.
5. SVG Filters
You haven’t gotten around to wrapping your head around SVG filters yet? Then Ana Tudor’s beginner-friendly guide is for you. It covers all the things she wishes she had read when she was getting started, from setting up a hidden <svg> element that only contains filters to chaining filter primitives and controlling color handling and filter regions.
6. SVG Editors
There’s probably no better way to learn how SVG code works than by experimenting. A great place to do that is SVG.wtf. Amelia Wattenberger created the visual editor where you can click and drag shapes and use pen and pencil tools to create an SVG. As you do so, you can see the code updating in real time.
Another handy SVG editor is the SVG Filter Maker. Created by Christopher Kirk Nielsen, it lets you build out your SVG filters visually in a node graph editor.
7. Accessible UX Research, Now Shipping 📚
We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally shipping worldwide! Get the book right away or order the eBook for instant download.
Accessible UX Research is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Download a free sample (PDF, 2.3MB) or get the book right away.
8. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- Cascading Style Systems: Resilient & Maintainable CSS Dev
with Miriam Suzanne. June 2–10 - Design Patterns For AI Interfaces UX
with Vitaly Friedman. Jun 16–30 - The Modern UX Practitioner UX
with Paul Boag. June 24 – July 2 - Design Patterns For Complex UIs and Enterprise UX UX
with Vitaly Friedman. Sep 2–3 - Naming Design Systems DS
with Samantha Gordashko. Sep 8–22 - Live UX Training UX
with Vitaly Friedman. Sep 11 – Oct 12 - Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - Jump to all workshops →
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.