We all could use a little help making SVG the leanest and meanest.

Posted with images on my blog

This article contains SVG tools I reach for depending on need.
As the rifleman's creed goes: “there are many like it but this one is mine”.

I like this list.

Preamble

My affair with SVG began back when Adobe offered PGML. I loved flash, but figured open standards would win the browser wars . You can read about SVG's origins here.

Once W3C released the SVG draft: I figured it would own the web and be supported by all major browsers within months (it took years). Nevertheless, my courtship began.

Fortunately SVG was more useful than just internet use.
By 2003, I had toyed with SVG in my studies.
By 2005, I had finally used SVG commercially thanks to Red Hat (and UTF-8).

SVG assists me in many tasks – from websites, to presentations, to apps, to toolchains.

Here's what I use today: Some are online tools, some are scripts, some are desktop apps, some are libraries. All incredibly powerful (and/or fun) for the right situation.
So here goes, get your bookmark tool of choice fired up:

SVGOMG

The webinterface to SVGO is so handy, I also use SVGO directly in apps and on the commandline. Everybody should have local access to it.

npm install -g svgo

If you use webpack, snowpack, vite-svg-plugin etc you likely use it too.
The plugins are fascinating and have bailed me out many times.

There's also SVG Cleaner which has some compelling benefits over SVGO.

SVG Path Editor

I use this now more than even Inkscape for simple illustrations, and I really wish the preview would let me add my CSS. But still, this thing is pure GOLD!
When finishing an illustration I often return to this tool and go path by path to reduce unnessecary coordinates and operators. Stealing a few decimals here and there, replacing cubic bezier path operators with more optimal ones like quadratics or arcs.

SVG path editor will dramatically improve your understanding of the SVG path system.
Also try out this SVG path visualizer I put the heart from this article in it's URL param - very handy when teaching SVG.

SVG Crop

Remove the extra margin from around your SVG content so the file is easy to work with.
SVGcrop.com resizes the SVG artboard by changing the viewBox=".. attribute
It's not 100% bulletproof (invisible shapes like clippaths will affect the viewBox) but handy all the same.

SVG URL Encoder

Inline SVG into CSS - hey it's a gnarly technique but I still find myself throwing SVG into pseudo elements all the time. Think of the saved HTTP request!
This tool from Yoksel makes it super easy!

Relative clip-path

For turning SVG paths into CSS-friendly clip-path coordinates. Super handy.

SVG Fitler Builder

Creating complex SVG Filters is incredibly hard, Thankfully we have this brilliant tool.
There's an alternative SVG Filter Constructor by Yoksel with a less intimidating interface that's worth a look.
Actually Boxy SVG editor has a great compositing editor which is easy to use too.

SVG Gradient Map Builder

Who doesn't love Duotone effects? SVG Gradient Map filters make them achievable native on the web.
There's just one annoying catch. when you are coding these you need to convert your R G and B into separate channels and divide by 255 then place them your R G and B numbers for different colours next to eachother - it feels kind of unnatural.
This tool makes creating a custom filter easy.

If you want to automate this, I also wrote a CodePen that converts any array into swatches and a duotone effect.

Inkscape

Isn't the evolution of open source desktop applications awesome?
Gill > Sodipodi > Inkscape
I've loved this journey and especially love where it is now.
Run it on your linux machine, your mac .. its brilliant for creative exploration, and especially illustration.
I've used Inkscape since it's inception. Demoed it around the planet and pleaded for top designers to consider it. I could go on and on but let me just say it's the very best tool for illustration of complex paths. and leave the rest up to your imagination.

Penpot

Early days to call this a Figma killer - But I do find it does most of what I want out of Figma (for free and freedom). Super impressed and excited to see where this project goes.

RawGraphs

RAWGraphs
Brilliant way to pre-render beautiful data graphics, create the layout in rawgraphs then style with your own CSS.

Boxy Editor

At first sight, boxy looks like yet another svg-edit clone. But open up the panels and start editing (start using the i and o keys) and you'll see why it's fantastic for small projects.

librSVG

This is a blazingly fast library to work with SVG files (used in ImageMagick and heaps more). If you are a performance-driven developer, RSVG convert in particular will blow your mind. Also you should follow Federico Mena-Quintero Who is dragging RSVG into the future with Rust.

Worthy mention goes to reSVG which is a super performant and powerful alternative to rSVG.

Imagetracer JS

There are many bitmap to vector tracers like potrace, autotrace etc. Imagetracer is the most promising for web developers and has a few tricks up it's sleeve.
Handy to have on the CLI too:

imagetracerjs/nodecli>node nodecli ../in.png outfilename out.svg scale 10

2geom

If you're building an app that needs to perform fast and accurate 2d computational geometry (boolean operations and way way more) you'll end up grateful for Nathan Hurst and all other contributors who made lib2geom possible.
Fun fact, Inkscape uses 2geom under the hood and also powers the amazing live path effects etc.

Single-purpose SVG generator tools

Blob Maker and Wave Maker - both part of the super cool haikei app
Noise maker nice patterns of directional lines or dots
Arc Wave Maker nifty example of repeating arc paths
Snowflakes Random snowflakes
Snowflake Painter Design a snowflake with lines

What else?

Well there's lots of nifty things I havent personally climbed into.

Canvas2SVG - I have a feeling I'll get to know this library well someday.
Apache Batik - I used it quite a bit in the early days but it never took root in my toolchain.

SVGJS It offers compelling shortcuts, I'm just a fan of vanilla JS. This also goes for SNAP SVG

Thank you SVG

So there you have it, the best tools to help you with SVG.
By the way, all the images in this article were super-tiny inlined SVG - open web inspector and see for yourself.

On a personal note:
There are heroes I'd like to recognise; friends who moved SVG forward directly or indirectly - at least in my universe:
Cam Mcormack, Raph Levien, Chris Lilley, Carl Worth, Liam Quinn, Nathan Hurst, Peter Moulder, Tavmjong Bah, Bryce Harrington, Aaron Spike, Jon Cruz, Bulia Byak, Ted Gould, Doug Schepers, Dom Lachowicz, Dodji Seketeli, Owen Taylor and so many more.