SVG Stroker and SVG Stroker Fill scripts using vtracer

[mrfragger]

I use vtracer in a couple of scripts to generate svg animation without any javascript.
A few galleries can be seen here http://geektips.rf.gd/stickers/

I did learn that to keep svg sizes reduced is to use vtracer polygon rather than spline or pixel. Also do svgo optimization and also reduce decimal precision to just one digit. Using vivus (is a javascript library) but vivus instant is pure CSS / SMIL but it has to create css pathlength for each path and svg is rather big like over 1MiB. It is nice the One-by-One and especially if you alternate-reverse animate it and duplicate paths with tac (reverse cat) anyway. However, Vivus Instant has no command line although you can run it locally to process thousands of images is just not feasible. Also you can't have any fill colors or it'll bomb unlike the way I do it.

SVG Stroker fill I experimented with many different svg resultions like 128x128, 256x265, 512x512, 768x768 and ultimately settled on 160x160. All svgs are ~30KiB. I gave up with svgz since your webserver you need to change the config to allow them. But svgs are automatically gzip to client so only 20% is sent to client so bandwith is negligible.

This is the vtracer portion of the script for SVG Stroker Fill (I run a gmic graphic novel filter first)
f in *.jpg; do vtracer-linux -i "$f" -o "${f%%.*}.svg" -f 2 -p 7 -g 16 -m polygon; done

For SVG Stroker I do a gmic stencil filter and it animates just the strokes.

Thanks for making vtracer open source and all the articles written and I delved into them quite a few months ago when I got into this svg animation stuff.

[tyt2y3]

Thanks for posting this and congrats on what you have made! It is interesting.

However, I don't quite understand the entire pipeline. What is your setup?

Just to share a bit, I think > 10 years ago I was experimenting with a shape interpolation algorithm for vector animation.

[mrfragger]

You're about 9 years ahead of me..hehe. Yeah I always like anything vector for it's scalibility and trying to explain the advantages to a non-computer person it's futile I've discovered. Here are the two scripts I came up with.

SVG Stroker (April 10, 2023) in case any one wants to use it. You can run the script or just copy and paste it. Doesn't work good on family photos but think it works pretty decent on almost any computer generated AI images. Avoid images that are blurry, darkish, grainy or just a landscape with no object to focus on.

Just put any jpg or png images of any size ...hopefully larger than 512x512 into the directory with the dist/ as a subdirectory.

svgo.config.js

module.exports = {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupNumericValues: false,
          removeViewBox: false,
          removeHiddenElems: false,
          moveElemsAttrsToGroup: false,
          moveGroupAttrsToElems: false,
        },
      },
    },
  ],
};

svgstroker.zip

svgstrokerfill.zip
SVG Stroker fill is the script I wrote to generate masonry, svg animation galleries. Need pdfimages (only if wish to extract jpgs from PDFs), rename (perl app), imgp (resizes images), gmic-cli (applies Graphic Novel filter), vtracer (converts images to svg), parallel (uses cpu cores to process quicker), identify (imagemagick) (gets resolution of thumbnails), svgo (reduces svg file size ~40%) along with svgo.config.js (included in zip, change path accordingly). And the html files under dist directory.

Put any combination of png, jpg (these will be deleted so use copies) and/or some pdfs (with images) in root svgstroker fill directory then run script.

svgo I found hard to reduce decimal precision in command line plus it won't do some path animation attributes which I also wanted reduced to just 1 decimal so sed takes care of that.

[tyt2y3]

I see! Thank you for making my day