Smashing Newsletter #294: SVG Generators and Tools

With SVG filters, cropping tools, SVG assets manager, tet warping generators, animation and SVG transformation. Issue #294 Tue, March 30, 2021 View in the browser 💨 

Smashing Newsletter

Ahoy Smashing Friends,

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 — 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 — 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 — 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 — 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 — 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.

SVG Warping Generator

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

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)


From our sponsor

Learn How To Get A Free Web Database

Get Your Free Web Database Creator With Kintone
Need a web database for your Hackathon project? Read through this step-by-step tutorial to learn how to spin up web databases quickly for your projects using drag-and-drop GUI! Get your free developer license now!


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.

SVG Cropper

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 — 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.

Smashing Online Events

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 — 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 — 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.

SVGurt

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)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


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

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 — 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 — 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.

Iconset

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)


8. New On Smashing Job Board


9. Our Current Most Popular Articles


That’s All, Folks!

Wow, you’ve made it this far! We hope you’ve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve!

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

unsubscribe update preferences view in your browser


Older messages

Smashing Newsletter #293: Jamstack, Headless, Static Site Generators

Tuesday, March 23, 2021

With static site generators, headless CMS, the state of Jamstack and how to choose if headless options are a good fit for your projects. Issue #293 • Tue, March 23, 2021 • View in the browser 💨

Smashing Newsletter #292: JavaScript, Bundlers, Frameworks

Tuesday, March 16, 2021

With vanilla JavaScript snippets, bundlers, on migrating JavaScript to TypeScript, and how to choose a JavaScript framework. Issue #292 • Tue, March 16, 2021 • View in the browser Smashing Newsletter G

New Live Workshops On Front-End & Design

Thursday, March 4, 2021

Live workshops on web performance, design systems, CSS with Lea Verou, Harry Roberts, Stephanie Eckles and Dan Mall. From front-end to design, to help your boost your skills online. Live workshops on

Smashing Newsletter #290: Email Productivity and Meetings

Tuesday, March 2, 2021

From email productivity to better code reviews, consistent color schemes and better scheduling. Issue #290 • Tue, March 2, 2021 • View in the browser Smashing Newsletter Ahoy Dear Friends, We all want

Smashing Newsletter #289: Front-End Accessibility

Tuesday, February 23, 2021

With accessible modals, tabs, autocomplete, icons, keyboard navigation and user preferences. Issue #289 • Tue, Feb. 23, 2021 • View in the browser 💨 Smashing Newsletter Howdy, Building accessible pages

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript

What Will Back-To-Normal Look Like?

Friday, June 18, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

UX/UI Portfolios, Feels, Bear Plus Snowflake, Optical Size, Aspect Ratio

Friday, June 18, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 18 2021 The problem with UX/UI portfolios markboulton.co.

RWD Weekly #462— the one about the little yellow book

Friday, June 18, 2021

No preview text for you this week, you've got to commit to reading this one by opening it first :) Read online Hello again, welcome back to RWD Weekly #462 happy Friday! This week I've been

Meet Image Optimization, A New Smashing Book

Thursday, June 17, 2021

Meet Addy Osmani's new book on image optimization: from formats and compression to delivery and maintenance. Brand new book: Image Optimization by Addy Osmani. Dearest Friend, How do we deliver

🔥 Dashing Mobile UI Designs and more

Thursday, June 17, 2021

Round Up The Newest UpLabs Weekly Freebies 🤠 Check out some fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. The New Super Fast Way to Build a Website

Holly Hunt Reinvents Herself Once Again

Thursday, June 17, 2021

Plus, a houseplant sells for almost $20000 at auction (image) Architectural Digest AD PRO Logo house plant - philodendron Think You Love Houseplants? This One Just Sold for Almost $20000 Read More →

✏ 3 Ways to Design More Inclusively, What is a Design System?2021 Fun Typefaces, and more...

Thursday, June 17, 2021

3 Ways to Design More Inclusively WEBDESIGNERDEPOT.COM COMMENTS What is a Design System? ROBERTCREATIVE.COM COMMENTS Animal Crossing Font FONTSPANDA.COM COMMENTS Some Fun Typefaces for 2021 KOTTKE.ORG

✏ Issue #491: Google Page Experience Update, 22 Exciting New Tools for Designers, Diversity In Design, Invision Freehand, and more…

Thursday, June 17, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #491 JUNE 17, 2021 Work at the Intersection of Data, Design, and Technology Prepare for a range of dynamic communication roles in Northwestern