#323: SVG Freebies, Techniques and Tools

With grainy SVG gradients, SVG flags, animated credit cards and SVG generators. Issue #323 • October 19, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Olá Smashing Friends, I vividly remember the time when SVG was just coming to the web. It seemed almost magical that you could just look into the source code and adjust the image file on spot (well, perhaps first [visualizing how it’s drawn](. We can animate and style paths individually, and change parts of an image on focus/tap, and use all kinds of [SVG filters]( and even [use raster graphics inside of SVG]( to improve performance. The magical times we are living in! And today, we’d like to celebrate just that. In this issue, you’ll find plenty of little SVG helpers — from SVG flags and grainy SVG gradients to SVG favicon maker and even animated SVG credit cards. We hope you’ll find them useful in your work. [A Smashing Hour with Sara Soueidan]( Quite a Smashing Hour, and you are invited! Join in: [Smashing Hour with Sara Soueidan]( Tue, Nov 9, 5PM CET / 8AM Pacific. Speaking of SVG, join us for [an hour with Sara Soueidan]( to discuss topics ranging from front-end performance and accessibility to birds and cats and pizza — with everything else in between. Free for everyone, of course — so please invite your friends and colleagues to join in, and don’t be late! Also, if you’ve ever wanted to dive deep into all the facets of front-end and UX, we’ve just announced a few [new online workshops]( e.g. on [Dynamic CSS]( with Lea Verou and [Design Management Masterclass]( with Yury Vetrov. These are the workshops worth attending! We sincerely hope to see you there. In the meantime, let’s dive into the magical world of SVG! — Vitaly ([@smashingmag]( --------------------------------------------------------------- 1. Download SVGs With A Single Click What if you want to quickly copy-paste an SVG file form a site without having to set up an entire dev environment to just try things out? Or perhaps you’d love to see the intrinsic size of the SVGs, or at least its aspect ratio? Well, there is no need to manually search for the icon and copy-paste it to start exploring it. [SVG Gobbler]( [SVG Gobbler]( is a handy browser extension that hunts down the SVG content in your current tab, highlights unique attributes about it and gives you the option to download or copy to clipboard. You can download all SVGs at once, or individually. The browser extension is [open source]( and available as a [Chrome extension]( and a [Firefox extension](. Built by Ross Moody. (vf) --------------------------------------------------------------- 2. Grainy SVG Gradients What if you wanted to add some noise to bring a bit of texture to an image? Of course you could export images as PNGs, WebP or AVIFs, but ideally we’d want to add “noise” on top of SVGs, so we can always turn and off noise if we wanted to. [Grainy SVG Gradients]( In his CSS-Tricks article on [grainy gradients]( Jimmy Chion explains how we can generate colorful noise to add texture to a gradient with just a sparkle of CSS and SVG. As Jimmy explains, the idea is to use an SVG filter to create the noise, then apply that noise as a background. Then we layer it underneath a gradient, refine the brightness and contrast, and voilà , you have gradient that gradually dithers away. Issue solved! You can also explore the [Grainy Gradient playground]( that Jimmy has set up. (vf) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- 3. Upcoming Front-End & UX Workshops You might have heard it: we run [online workshops around front-end and design]( be it accessibility, performance, navigation, or landing pages. 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. [Smashing Online Workshops]( Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with [personal and inclusive events](. As always, here’s an overview of our [upcoming workshops]( - [Smart Interface Design Patterns, 2022 Edition]( Design with Vitaly Friedman. Oct. 25–Nov 8. - [Behavioral Design]( Design with Susan & Guthrie Weinschenk. Nov. 3–17. - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. Nov. 4–18. - [Next.js Black Belt]( Dev with Atila Fassina. Nov. 9–24. - [Jump to all online workshops →]( --------------------------------------------------------------- 4. SVG Blob Generator With A Twist There is no shortage in SVG generators out there. They can generate anything from repeating patterns and waves to doodles and geometric shapes with a click on a button. [Ssshape]( however, is slightly different. The tool allows you to customize the output by drawing a custom shape in a box, and then generates the output based on that. Once you have your custom shape, you can fill it with colors and gradients, adjust it and rotate it. Or just use other custom shapes created by someone else. [SVG Blob Generator With A Twist]( A while back, we collected a quite [comprehensive guide to SVG generators]( breaking all tools in sections and groups. We keep updating the guide, adding evem more generators regularly. And if you know of one that is missing there, please let us know on Twitter ([@smashingmag]( and we’ll add it right away. Happy SVG generating! (vf) --------------------------------------------------------------- 5. SVG Flag Icons If you ever needed to add and maintain flags on your website, finding the right ones, in the right style and in the right size might be quite a headache. Luckily, you can rely on a few open-source sets that will probably have all your needs covered. [SVG Flag Icons]( [Flagpack]( for example, includes more than 250 open-source SVG flag icons — from Andorra to Zimbabwe. The set provides options for small, medium and large-sized icons, and they come with several predefined styles. Designers can use the Flagpack in Figma and Sketch (Adobe XD coming soon), and developers can install it directly within their code project (React, Vue, and Svelte are supported). You can [find all icons on GitHub]( too. Alternatively, [flag-icons]( also provides a large collection of all country flags in SVG — but also with the CSS for easy integration. The entire repo is also [available on GitHub]( --------------------------------------------------------------- 6. Animated SVG Debit Card Illustrations What if you could animate a debit card design? Probably not on an actual physical card, but rather for a landing page where you’d like to drive interest towards the card’s design or features? Well that’s an unusual challenge to tackle, and Tom Miller decided to take it on. [SVG Debit Card Illustrations]( In a series of [SVG debit card animations]( Tom uses GreenSock to animate SVG paths and shapes smoothly, so every card literally comes to life on its own, transforming, rotating and scaling beautifully, alongside just a few lines of JavaScript. A wonderful inspiration for your next landing page design! (vf) --------------------------------------------------------------- From our sponsor What If We Told You There Is A Better Way To Find/Fix Code? [Sourcegraph]( We’re constantly indexing every open-source repository with more than 1 star. While you were reading this, we indexed more (2 million+ counting). Whether you’re the one (or not), you can explore the open-code universe in milliseconds — dream big, bend code, or stop bullets. [This is your code wonderland](. --------------------------------------------------------------- 7. Create A Favicon In Seconds Creating a simple, letter-based favicon usually takes up more time than it should. Hossein Sham knows this from experience, so to ease his life — and yours too — he built a free [Favicon Maker]( that makes creating a favicon a matter of seconds. [Free Favicon Maker]( The Favicon Maker helps you make letter- and emoji-based favicons, either as SVG or PNG, depending on your preference. You can select a letter or emoji, a font (Google Fonts are supported), font size, bold or italic variant, as well as the color and shape of the background. Once you’re happy with the result, you can either copy the code directly into your project or download the SVG or PNG file. A small but powerful tool. (cm) --------------------------------------------------------------- #8. Recent Smashing Articles - [Smart CSS Solutions For Common UI Challenges]( - [Tips And Tricks For Evaluating UX/UI Designers]( - [Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study)]( - [Useful React APIs For Building Flexible Components With TypeScript]( --------------------------------------------------------------- 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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](