CODEWITHSUNDEEP
htmlsvgweb
Iru Dog
Iru Dog

Reputation: 61

Cannot display SVG used by <object> in browser

I'm trying to set up the vector web application on my server https://vector.cnjabber.net/ , but I've found that the SVG used by <object> (I think they're generated by javascripts.) cannot be displayed in browser. However, the official app at https://riot.im displays all the SVG files correctly. I made a small test on my server:

https://cnjabber.net/test/index.html

I use <img src="..."/> and <object type="svg+xml" data="..."></object> to use an svg file, but the browser only shows the <img src="..."> image, the Firefox's Developer tool only says "Could not load the image". Chromium and Qupzilla also fail to load it. If I open the html file locally with file:///some/path/index.html, it works fine.

I've searched on the web, and checked I have set up the MIME type correctly in lighttpd. Can anyone tell me what's the problem?

Upvotes: 0

Views: 1890

Answers (2)

Iru Dog
Iru Dog

Reputation: 61

I finally know what had happened. This time I use the console in Firefox developer tools.picture And I found that it's X-Frame-Options: DENY that caused the problem.

Upvotes: 2

Maverick Jones
Maverick Jones

Reputation: 434

I think your problem may lie with type="xvg+xml" which should be type="image/svg+xml" Also, it should be structured like this:

<object type="image/svg+xml" src="yourimage.svg">
    <img src="yourfallbackimage.png" alt="Your browser does not support SVG"/>
</object>

If the SVG is static (not interactive) then you can simply use the img tag and it should load the image fine:

<img src="yourimage.svg"/>

Upvotes: 1

Related Questions