Support for SVGs

[kylefox]

It would be nice if the image preview plugin supported SVGs. 🙏

I had a look at the code but couldn't figure out how to hook into the API to add this functionality.

But something like this will read an SVG file and draw it to a canvas element:

const reader = new FileReader()

reader.onload = function() {
  const img = new Image()
  img.onload = function() {
    canvas.getContext('2d').drawImage(img, 0, 0)
  }
  img.src = reader.result
}

reader.readAsDataURL(svgFile)

[rikschennink]

I was planning to render SVGs as is without converting them to Bitmap data. But want to test performance first.

[kylefox]

Yeah, rendering an SVG directly would be ideal. But I saw the existing implementation drew everything to a canvas, so I thought it might be simpler to keep that mechanism.

Just out of curiosity, what's the reason to draw to a <canvas> rather than an <img>?

[rikschennink]

It currently decodes images in a worker thread and then renders the decoded version of the image to a resized canvas. For small images this doesn't really make much of a difference but for very big images this saves the main thread from freezing. This logic also corrects an incorrect JPEG orientation. I'm also thinking, but this is a guess, that animating a small canvas on the GPU is faster than animating a big image.

[rikschennink]

Just published version 1.1.0 of the image preview plugin. It adds SVG support.

[kylefox]

Once again, works like a charm 👏