Feature: support for auto-generating LQIP and SVG loader placeholder images

[adieuadieu]

OK, LQIP can probably already be achieved with sharp, but SVG like the following cannot:

https://video.twimg.com/tweet_video/DMAiijTWkAEBuzb.mp4

Via https://twitter.com/Martin_Adams/status/918772434370748416 and server implementation https://github.com/Schniz/svgify

https://github.com/Schniz/svgify/blob/1d8460d2c3343a9df40ac831842ed5a6f5c658a5/src/svgify.js#L1-L40:

const SVGO = require("svgo");
const { exec } = require("child_process");
const potrace = require("potrace");
const svgo = new SVGO()


const optimize = svg => new Promise((resolve, reject) => {
  svgo.optimize(svg, ({data}) => {
    return resolve(data)
  })
})


const resize = (fileName, maxSize = 200) =>
  new Promise((resolve, reject) => {
    exec(`convert ${fileName} -resize ${maxSize}x${maxSize} ${fileName}.resized`, (err, stdout, stderr) => {
      if (stderr) return reject(stderr);
      return resolve(`${fileName}.resized`);
    });
  });


const trace = (
  file,
  params = {
    color: "#ccc",
    flat: true,
    turnPolicy: "majority",
    turdSize: 100,
    optTolerance: 0.4
  }
) => {
  return new Promise((resolve, reject) => {
    potrace.trace(file, params, (err, svg) => {
      if (err) return reject(err);
      return resolve(svg);
    });
  }).then(svg => optimize(svg));
};


module.exports = file => resize(file).then(trace);
module.exports.resize = resize;
module.exports.trace = trace;