Browser not showing the correct SVG

0
votes

Well, this is a weird one.

I have web page with several svg images.

(I also detect not supported svg browsers and display a regular image instead, but I guess it is not relevant here).

Sometimes (I found it so far in Chrome OSX and Windows), the browser displays another svg instead of the one mentioned in the html .

Assuming I have to svg files linked from my page, logo.svg and logo2.svg, it might display logo2.svg intead of logo.svg. I've inspected the elements , and all seems to be fine. HTML referes to one svg, while the browser displays a different svg (located on another part of the html) instead.

Any idea ? 

<a href="Home">
       <div style="float:left;width:170px;height:154px;">
           <object class="svg-default" data="/images/logo.svg" type="image/svg+xml" style="width:100%; height:100%;z-index:1000;">
           </object>
           <img class="svg-fallback" src="/images/logo.png" style="width: 151px; height: 41px; display: none;">
        </div>        
    </a>
1
csssvg
Sounds like crbug.com/352762 (affects <object> and <embed>). If you replace <object> with <iframe> it should work. – Erik Dahlström
Hi Erik,Thanks for the comment. Seems like this is the reason. – Ranch
And why don't you add it as an answer ? – Ranch

1 Answers

0
votes

Maybe you can dynamically insert the div element with the <object> as its child. And when you want to show another svg, remove the previous div & insert a new div with updated svg.