Discover more from hrbrmstr's Daily Drop
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 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
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.
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).
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
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.
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.