Why, when I open my .svg file alone in the browser it does show the picture from xlink:href but inside my website project it does not show the picture from xlink:href?

This is the image from xlink:href --> https://s10.postimg.org/ky5y39vvd/Untitled-19.png

Inside my website project I use either img tag or background-image to link to my .svg file...

The point is I want .svg file to work inside my website project :)

This is my SVG file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
    <title>Text Pattern Fill Example</title>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="120" height="140">
            <image xlink:href="https://s10.postimg.org/e2h45vefd/alex-iby.jpg" x="0" y="0" width="120" height="300"
             transform="translate(135.780723, 50.780723) rotate(90.000000) translate(-55.780723, -60.780723)"
             /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->

        <path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z"  transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>        
  • Did you find a solution to this issue? Sep 27, 2019 at 4:04

2 Answers 2

<embed src="image.svg">

SVG with xlink:href can't show local image inside website. But <embed src=""> or <object data=""></object> html tags works well on this situation.

If you want to use <img src="" /> tag you should place external image in your svg file as base64 string format.

  • 1
    Hi Khainarbyek, welcome to GDSE! I can't really tell if this is an valid answer. Could you edit it to include more information as to how this embed should work and what you mean by "click action is not working"? Thanks!
    – PieBie
    Oct 9, 2019 at 7:12

xlink:href is deprecated. You should instead be using href.


Not the answer you're looking for? Browse other questions tagged or ask your own question.