SVG Filters: The Crash Course with Sara Soueidan
When it comes to graphical effects, CSS has come a long way in the last few years with the introduction of CSS filters and blend modes. Yet compared to the effects available in editors like Photoshop, CSS still lags a long way behind. SVG, on the other hand, comes with a set of filter primitives that enable you to recreate Photoshop-grade effects in the browser, using just a few lines of code.
Image: Drew McLellan
In a detail-packed talk at this month’s An Event Apart Boston conference, Sara Soueidan showed us how to do just that. Sara’s first-ever AEA appearance was a tip-filled crash course on SVG filters: why they’re awesome, how they work, and how to use them to create a dazzling range of inspiring and powerful special effects.
While the syntax and attributes of these filters may have seemed intimidating at first, Sara’s natural teaching style helped the designers and developers at AEA quickly grasp how they work—leaving us with plenty of great ideas on how to push the boundaries of what’s possible in our websites.
If you missed it…
While nothing can replace watching Sara in action, these articles can help those who missed her session begin coming to terms with the magical creative possibilities of SVG on today’s web:
- SVG Filters 101, an introduction to SVG filters—how to create them and use them.
- SVG Filter Effects: Outline Text with <feMorphology>
- SVG Filter Effects: Poster Image Effect with <feComponentTransfer
- SVG Filter Effects: Duotone Images with <feComponentTransfer
- SVG Filter Effects: Conforming Text to Surface Texture
- SVG Filter Effects: Creating Texture with <feTurbulence>, did you know SVG can generate and create texture?
Learn more
For more about Sara, check her AEA bio and this nifty interview from a few months ago.
And if you wish you hadn’t missed SVG Filters: The Crash Course, the good news is, you have two more chances to see it: at An Event Apart DC, July 29–31, and An Event Apart San Francisco, December 9–11.
In addition to Sara, both shows feature 16 more industry-leading speakers. Each show is three education-packed days of design, code, and content for UX and front-end specialists. You’ll come away inspired, and ready to get to work.