Add support for SVG and <image> tag

[Rasso Hilber]

Hi there, have been using this for ages, thanks so much! For a current project, I need to detect when images inside an SVG are loaded:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <image class="lazyload" xlink:href="./images/image-1.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"></image>
  </g>
  <g clip-path="url(#ic__mask)">
    <image class="lazyload" xlink:href="./images/image-1.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"></image>
  </g>
</svg>

...would be a very nice thing if you would add support for images with xlink:href in imagesloaded :)

[David DeSandro]

Thanks for this feature request.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

[Rasso Hilber]

...seems like the upcoming SVG 2 standard is dropping the requirement for the xlink: prefix. So the solution would have to check for both xlink:href or href attributes.

I hope I'm not the only one needing this ;)

[Neuropass]

@hirasso I gotta ask. Why would you have an img inside an SVG?

[Rasso Hilber]

@neuropass https://ophelis.de/en/themen/akustik/ > scroll down a bit, the interactive image compare toy :)

It's just great for advanced masking of images.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image