in SVG doesn't display when called in tag

Question

I am facing a really weird behavior with an svg file, it won't display the image included (but the vectors are displayed) when called alone but when I add the svg directly above, it displays the image in the img tag.

Here is a basic SVG file with an image included :

<?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 1080 1080" width="4252" height="2997" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
        <image style="overflow:visible;" width="4252" height="2997" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/a3/Wikipedia-logo-v2-square.svg?uselang=fr"  transform="matrix(0.24 0 0 0.24 19.92 177.84)">
        </image>
        <g>
            <g>
                <path d="M431.8,273.6c0,23.8,0,47.5,0,71.3c0,23.9,0,47.7,0,71.6c0,13.4,0,26.8,0,40.1c0,0.8,0.7,1.5,1.5,1.5
                    c22.8,0.9,45.7,1.6,68.5,2.1c22.8,0.5,45.5,0.8,68.3,0.9c12.9,0,25.8,0,38.6-0.1c0.8,0,1.5-0.7,1.5-1.5
                    c-0.9-26.8-8.8-52.7-15.4-78.5c-6.7-26.6-11.4-53.6-13.6-81c-1.3-15.3-1.8-30.7-1.6-46.1c0-0.8-0.7-1.6-1.5-1.5
                    c-18.1,1.8-36.3,3.6-54.4,5.4c-18.1,1.8-36.3,3.6-54.4,5.4c-10.3,1-20.5,2-30.8,3c-1.9,0.2-1.9,3.2,0,3
                    c18.1-1.8,36.3-3.6,54.4-5.4c18.1-1.8,36.3-3.6,54.4-5.4c10.3-1,20.5-2,30.8-3c-0.5-0.5-1-1-1.5-1.5c-0.4,27.4,1.6,54.8,5.8,81.9
                    c2.1,13.5,4.8,26.9,8,40.2c3.2,13.1,6.9,26,10,39.1c3.5,14.6,6.2,29.4,6.7,44.4c0.5-0.5,1-1,1.5-1.5c-22.8,0.1-45.7,0.1-68.5-0.2
                    c-22.8-0.3-45.5-0.7-68.3-1.4c-12.9-0.4-25.7-0.8-38.6-1.3c0.5,0.5,1,1,1.5,1.5c0-23.8,0-47.5,0-71.3c0-23.9,0-47.7,0-71.6
                    c0-13.4,0-26.8,0-40.1C434.8,271.6,431.8,271.6,431.8,273.6L431.8,273.6z"/>
            </g>
        </g>
    </svg>

Here is the template :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <body style=" height:100%; padding:0px !important;">

    <div class="mb-4 dontBreak" style="display:block; page-break-inside: avoid !important;">
      <img src="url/to/svg.svg" style="width:1000px; height:500px; border:2px solid blue;" class="ml-auto mr-auto dontBreak" />

      <!-- If I remove this part below, the wiki logo won't show in the img tag above  -->
        <?xml version="1.0" encoding="utf-8"?>
        
        <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 1080 1080" width="400" height="400" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
        <image style="overflow:visible;" width="4252" height="2997" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/a3/Wikipedia-logo-v2-square.svg?uselang=fr"  transform="matrix(0.24 0 0 0.24 19.92 177.84)">
        </image>
        <g>
            <g>
                <path d="M431.8,273.6c0,23.8,0,47.5,0,71.3c0,23.9,0,47.7,0,71.6c0,13.4,0,26.8,0,40.1c0,0.8,0.7,1.5,1.5,1.5
                    c22.8,0.9,45.7,1.6,68.5,2.1c22.8,0.5,45.5,0.8,68.3,0.9c12.9,0,25.8,0,38.6-0.1c0.8,0,1.5-0.7,1.5-1.5
                    c-0.9-26.8-8.8-52.7-15.4-78.5c-6.7-26.6-11.4-53.6-13.6-81c-1.3-15.3-1.8-30.7-1.6-46.1c0-0.8-0.7-1.6-1.5-1.5
                    c-18.1,1.8-36.3,3.6-54.4,5.4c-18.1,1.8-36.3,3.6-54.4,5.4c-10.3,1-20.5,2-30.8,3c-1.9,0.2-1.9,3.2,0,3
                    c18.1-1.8,36.3-3.6,54.4-5.4c18.1-1.8,36.3-3.6,54.4-5.4c10.3-1,20.5-2,30.8-3c-0.5-0.5-1-1-1.5-1.5c-0.4,27.4,1.6,54.8,5.8,81.9
                    c2.1,13.5,4.8,26.9,8,40.2c3.2,13.1,6.9,26,10,39.1c3.5,14.6,6.2,29.4,6.7,44.4c0.5-0.5,1-1,1.5-1.5c-22.8,0.1-45.7,0.1-68.5-0.2
                    c-22.8-0.3-45.5-0.7-68.3-1.4c-12.9-0.4-25.7-0.8-38.6-1.3c0.5,0.5,1,1,1.5,1.5c0-23.8,0-47.5,0-71.3c0-23.9,0-47.7,0-71.6
                    c0-13.4,0-26.8,0-40.1C434.8,271.6,431.8,271.6,431.8,273.6L431.8,273.6z"/>
            </g>
        </g>

      </svg>
      
   </div>

  </body>

</html>

And by the way, when I include the SVG directly, it doesn't display, it only displays the image in the tag.

Any idea ?

EDIT : This is not duplicate of How many levels of recursion does SVG support? because I don't have any recursion in the SVG. I am trying to display one single SVG with only one image tag inside an img tag.

I don't think image links are allowed to append things like "?uselang=fr" try it without that. — Michael Mullany, May 27 '23 at 09:52
Thank you for your comment Michael, but I just tried it doesn't change a thing (I wish it did). Actually, I had a base64 img at first in the tag and I had the same behavior.. — Marilou, May 27 '23 at 09:59
EDIT : This is not duplicate of "How many levels of recursion does SVG support?" because I don't have any recursion in the SVG. I am trying to display one single SVG with only one image tag inside an img tag. If recursion there is, it would be about the img tag so not related to the topic mentionned — Marilou, May 27 '23 at 13:35
The ?XML declaration is optional in a standalone SVG file, so you don't need it unless you're using a non UTF-8 or UTF-16 character set. But if you do include it, then I think you need to capitalize correctly. That utf-8 should be UTF-8. You should probably add "px" to your height and width. — Michael Mullany, May 27 '23 at 16:36
You have SVG referencing SVG. That's what the other question calls recursion. All SVG used as an image must be complete in a single file and not reference any other files. — Robert Longson, May 28 '23 at 07:13

in SVG doesn't display when called in tag

0 Answers0