Add support for an svg > image element

[swampthang]

Thanks for the awesome library!

I have need for a cropper that would work on an image contained in an SVG like this - example taken from this page.

<svg width="200" height="200"
  xmlns="http://www.w3.org/2000/svg">
  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>

How difficult would it be to add support for that?

[fengyuanchen]

You can convert the SVG element to Blob URL, and load it with an image element.

For example:

const svg = `<svg xmlns="http://www.w3.org/2000/svg" ...`;
const blob = new Blob([svg], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);
const image = document.createElement('img');

image.src = url;
image.addEventListener('load', () => {
  URL.revokeObjectURL(url);
}, {
  once: true,
});

Source: https://dev.to/benjaminblack/using-a-string-of-svg-as-an-image-source-8mo