Drop #171 (2023-01-05): Three SVG Utils For Thee

svgasm; svg.path; svg2pdf (Rust)

I'm a big fan of scalable vector graphics (SVG) likely due to also being one of those weirdos who actually likes XML (in certain contexts). SVG composition mental model just seems to “make sense”.

The D3 JS library also helped keep my SVG crush alive, since that's one of the primary data visualization output formats for it.

Today's Drop features a few relatively new-ish utilities that do some fun and useful things with and to SVG files, along with an SVG surprise in the closer.

svgasm

Photo by Birmingham Museums Trust on Unsplash

svgasm is a proof-of-concept “SVG assembler” that can generate self-contained, animated SVG files from multiple still SVG files with CSS keyframes animation to play frames in sequence.

While the SVGs are self-contained, this utility is not, and uses different dependent utilities to:

• Produce a single animated SVG file that is viewable in all modern browsers

• Execute SVG cleaner svgcleaner (by default) or svgo to minify each SVG file.

• Execute bitmap tracer potrace (by default) or autotrace, or primitive to convert raster image input to SVG.

• Execute image processor graphicsmagick (by default) or imagemagick to convert GIF animation to frames.

Since Subtack is brain dead I cannot put the SVG examples inline. Therefore, you'll have to hit the GH to see just what magic is capable with this workflow, as the author shows multiple examples of spinning bitmap GIF animations into SVG gold.

svg.path

Photo by Michael Payne on Unsplash

Folks who don't deal with SVGs regularly might not know how often one has the need to be able to parse them, and especially the need to make SVG path strings into something usable in a non-SVG context.

This is a sample path string that draws a square:

<path
  d = "M 10 10 H 90 V 90 H 10 Z"
  fill = "transparent"
  stroke = "black"/>

So unhelpful (outside SVG uses).

There are many utilities/hacks to turn that into something usable. Svg.path is a newer kid on the block and has a very nice path parser written in python (most of the ones I've seen are in javascript) and has a pretty straightforward API. This means you have easy programmatic access to path commands that you can then translate to any other environment’s graphical commands/operators. No more ugly, hacky regex, and no extra dependencies outside python.

svg2pdf (Rust)

Photo by Nick Fewings on Unsplash

Of the three utilities in today's drop, this is my fav.

The svg2pdf crate allows one to convert non-interactive SVG files to either standalone PDF files or Form XObjects that can be embedded in another PDF file and used just like (vector) images.

It has robust SVG feature support for such a nascent creation:

• Path drawing with fills and strokes

• Gradients

• Patterns

• Clip paths

• Masks

• Transformation matrices

• Respecting the keepAspectRatio attribute

• Raster images and nested SVGs

I've made this part of my “new system default installs” scripts and can guarantee it'll see almost weekly use, especially since it has a CLI version baked in.

FIN

I asked ChatGPT to make a song about SVG using The Jackson 5's “ABC” as a guide. Here are the results:

Verse 1:
SVG stands for Scalable Vector Graphics
It's a way to draw images on the web
You can make shapes, lines, and text too
With just a few lines of code, it's not hard to do

Chorus:
SVG, SVG, that's easy as 1, 2, 3
Simple as do, re, mi, SVG, baby, can't you see?

Verse 2:
You can customize every aspect, no pixelation
Resize it big or small, no degradation
It's an XML-based format, open and flexible
Compatible with all modern browsers, it's incredible

Chorus:
SVG, SVG, that's easy as 1, 2, 3
Simple as do, re, mi, SVG, baby, can't you see?

Bridge:
Animation, interactivity, filters and masks
SVG can do all that, just give it a chance
It's lightweight and efficient, a smart choice for design
SVG, SVG, it's one of a kind

Chorus:
SVG, SVG, that's easy as 1, 2, 3
Simple as do, re, mi, SVG, baby, can't you see?

I then asked it to embed a portion of those lyrics in an SVG file, and this is what it did.

☮