In last week’s edition, we looked at tools for working JSON and so this week we’re pivoting to something a little more visual, with tools for scalable vector graphics (or SVGs to you and me).
As always, watch the video below to see them in action or read on and visit for yourself.
[VIDEO EMBED]
1. SVG.js
SVG.js is a lightweight library for manipulating and animating SVGs with JavaScript. The API is clean and chainable, so you can create, transform, and animate elements in just a few lines. If you’ve ever tried writing raw SVG markup by hand, you’ll understand the pain point this is a solution for.
🔗 https://svgjs.dev/docs/3.2/#svg-js
2. svg.wtf
The oddly-but-memorably-named svg.wtf is a browser-based SVG editor that lets edit the file’s code on one side, and see the result live on the other. No sign-up, no install, just paste and go.
3. SVG Gobbler
SVG Gobbler is a browser extension that finds every SVG on the page you’re viewing and lets you optimise, download, copy, or export them. It’s incredibly handy when you spot an icon or graphic on a site and want to grab it cleanly, though of course we only recommend this for experimentation or personal projects and be sure to stay within the bounds of copyright.
🔗 https://github.com/rossmoody/svg-gobbler
4. SVGFM
SVGFM is a visual playground for experimenting with and chaining SVG filter effects, and let’s see you see the results in real-time, too. It takes something that’s usually painful to work with and makes it genuinely fun to experiment with.
🔗 https://svgfm.chriskirknielsen.com/
5. SVGL
SVGL is a curated collection of SVG logos for well-known brands, in icon-form. Search, preview, and copy out with a single click.
We hope you found this article useful, and be sure to check back for the next edition soon and send in your favourite tools for shoutout.