0

I have created the following SVG file:

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="150" height="150">
    <rect
        x="5"
        y="5"
        width="140"
        height="140"
        style="fill:white;stroke:black;stroke-width:1"
        id="rect2" 
    />
    <image
        y="50"
        x="80"
        id="image76"
        xlink:href='https://image.flaticon.com/icons/svg/46/46441.svg'
        preserveAspectRatio="none"
        height="60"
        width="60" 
    />
    <image
        y="50"
        x="10"
        id="image76"
        xlink:href='https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Android_robot.png/646px-Android_robot.png'
        preserveAspectRatio="none"
        height="60"
        width="60"
    />
</svg>

I've managed to display it using the object tag like the following and it works fine:

<object type="image/svg+xml" data="image.svg"></object>

The result is like this:

enter image description here

However, when I try to use the img tag I have the following result:

<img src="image.svg"/>

enter image description here

When I try to display this svg file with the img tag, the images that are inside it disappear. I know it happens because I'm using addresses like https://image.flaticon.com/icons/svg/46/46441.svg and https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Android_robot.png/646px-Android_robot.png for my images instead of writing a base64 image inside this svg. But because it's possible with the object tag I'm curious to know if it's also possible with the img tag. Is it possible to make the img tag open svg files like this one? Or is it a limitation of the img tag?

Community
  • 1
  • 1
Rafael Muynarsk
  • 614
  • 2
  • 7
  • 21

1 Answers1

1

No documents loaded in <img> can not request any external resource, can not execute scripts, can not receive any user event.

For your bitmap image, you'd have to embedded it as a data: URI in the svg itself.

Kaiido
  • 123,334
  • 13
  • 219
  • 285