Smashing Newsletter: Issue #294

Editorial

How often do you need to do just one simple thing, but it’s just a bit too time-consuming to do manually? Little tools and helpers are wonderful &mdah; but only when you know where to find them once you need them. SVG is a great example for that. Sometimes you want just to refine the image with filters a little, or crop your SVGs, or perhaps trace your bitmap images and generate a good-enough-SVG out of them.

In this newsletter, we highlight some of the useful little SVG tools that you might want to have close once you need them. You’ll find plenty of them in our article on SVG generators, all curated and organized alphabetically. We hope you’ll find them useful. And we’d love to hear from you about the tools that we’ve missed in the comments to the article.

Smashing Meets on April 27 — Meet our free online meet-up on April 17, with a friendly community and hands-on live sessions.

In the Smashing universe, we have quite a few things going on as well. We have our free online Smashing Meet-up in April &mdah; a friendly hands-on event where we’ll be improving design, accessibility and code of an NGO, live. Get a free ticket, and invite your friends to join in as well &mdah; along with hundreds of people around the world! It will be fun! We’d love to see you there.

We’re also very, very close to the 2000th member in our Smashing Family &mdah; a friendly community, with plenty of eBooks, workshops discounts, goodies and lovely, smart folks. By joining as member #2000, you can win either a podcast microphone or noise-cancelling headphones, alongside your very own Smashing caricature. Join the family &mdah; it’s worth it!

Stay smashing, and now back to SVGs!
— Vitaly (@smashingmag)

1. SVG Warping Generator

If you’d like to play with SVG text by warping, bending or distorting it, doing so manually might be quite time-consuming. Warp SVG allows you to adjust the number of anchor points to drag them for warping, but you can also adjust the smoothness level to ensure the outcome doesn’t appear broken.

There are plenty of nifty ways to do that, e.g. by holding Space, you can simply adjust the text around the canvas. A tutorial and the entire code are both available on GitHub so you can give it a try right away! (vf)

2. SVG Filters Color Matrix Mixer

SVG filters (and CSS filters) are often used to refine bitmap images via blur or color manipulation. However, they can do much more than that. An SVG filter is defined within a <filter> element and we can use one or more filter primitives within it. But just like SVG filters are very powerful, so it can be difficult to find just the right combination of those filters to achieve a desired visual effect.

SVG Color Matrix Mixer is a little tool by Rik Schennink that allows you to visually generate complex color matrix filters for any component on the page and then use the feColorMatrix SVG filter as a value for the CSS filter property to change the color of your HTML elements. The tool also provides a snippet of code for the filter to be applied on the spot.

Need something way more sophisticated? Well, you can also use JustCode SVG Filters for basic and complex effects and SVG Filters Builder, a visual tool for pretty much all nerdy SVG filtering needs. (vf)

3. SVG Cropping Tools

What if you’ve received a couple of SVG files from an illustrator or a third-party, but then realize that it contains quite a bit of blank space around the illustration, causing unnecessary empty space around the illustration once placed on a page? Or perhaps the images are all in slightly different sizes, and you need to normalize them? Of course, there is a tool just for that.

Maks Surguy’s SVG Cropper allows you to remove blank space easily. You upload an SVG file and the tool finds the dimensions of the SVG contents and manipulates the viewBox of the SVG accordingly. You can drag the handles of the canvas to define just the right viewbox but also opt-in for closed paths only, as well as clean paths, lighten them and simplify them. (vf)

4. Upcoming Front-End & UX Workshops

SVG is awesome, and we can get better at it by learning together! Join us in one of our workshops &mdah; they are packed with practical examples, video recordings and friendly Q&A sessions. There’s a Web Performance Masterclass coming up soon, a workshop dedicated to all of the Designing The Perfect Navigation, and so many other workshops to choose from.

Each and every workshop has been a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others &mdah; just sayin’! ;-)

5. JPG/PNG → SVG Transformation

What if you have a bitmap image, and you’d like to transform it to a vector counterpart, perhaps to slightly animate it? It’s impossible to “convert” one into another, but we can trace them to produce a vector alternative. Fortunately, there isn’t a shortage of tools that allow you to do just that &mdah; and every vector editor will have some sort of a feature like that. By default, many of these tools will use Potrace, or a similar library.

PicSVG is one of the many online tools out there. You can upload an image up to 4 Mb in size, and the tool will try to trace the image for you. SVGurt additionally provides plenty of knobs and controls to adjust the SVG by removing some noise, filling the gaps, and refining strokes. It’s also available as a CLI tool.

You can even take it a step further with dynamic SVG placeholders, by generating small SVG placeholders, animating them and transitioning from them to an actual image with a fade-in CSS transition. Also available as a gatsby-image component. A little bit too much overhead? Well, Blurhash is a great alternative, too. (vf)

6. SVG Animation Tools

The beauty of SVG lies in its nature: with plain text in front of you, you can animate, transition and morph paths as well as composite animations by working directly with the code. However, we don’t have to write each animation from scratch. SVGArtista is a free tool by Sergej Skrjanec and Ana Travas that already includes some basic fill and stroke animations. You can define an animation easing and animation direction, duration and delays. The generated code can be minified, and it uses Autoprefixer by default as well.

SVGator is a dedicated editor for SVG animations with plenty of dedicated panels for everything from skewing to stroke path and filters, but in a free version the timeline is restricted to 10 seconds, and only easing functions are available.

If you’d like to play directly with the code, GSAP is a fantastic tool to animate with JavaScript &mdah; be it SVG, CSS properties, React, Canvas or anything else. Plus, you can also look into SVG.js which is lightweight and dedicated specifically for manipulating and animating SVG. And if you are looking for the After Effect-alike quality of animations, Lottie is definitely worth looking at &mdah; both for the web, and for iOS, Android and React Native. (vf)

7. SVG Assets Manager

So you have plenty of SVGs scattered all across your machine. How do you keep track of them? How do you know what is where, and how do you find one easily? SVGX is a free desktop SVG asset manager which allows you to keep all SVGs in one place. You can bookmark, search and preview SVG icons, live-edit the SVG markup, preview the icons in dark mode and copy/paste markup and CSS with one click. By default it also uses SVGO for SVG optimizations. Available for Mac and Windows.

If you need an alternative, Iconset is similar, but without the code part. You can drag icons from Iconset directly into Sketch, Figma, Adobe XD and pretty much anything else, without plugin or extension installs. Plus, you can also sync icons across devices via Dropbox or similar services, and publish and share your icon sets. Available for Mac and Windows.

And of course if you need just the right icons, you’ll probably find them on SVGRepo, Iconfinder and Vecteezy. All these sites provide literally thousands and thousands of icons, free and commercial, for pretty much all the needs you might have. (vf)

March 30, 2021 Smashing Newsletter: Issue #294

Previous Issues