CODEWITHSUNDEEP
google-chromesvg
vee
vee

Reputation: 69

SVG won't display

I'm trying to get this simple code to work:

<a href="#" target="_blank" style="display: inline-block;">
    <object data="icons/chrome.svg" type="image/svg+xml" style="pointer-events: none;">
        fallback text
    </object>
</a>

When I use

data="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg"

it works. However when I save that exact file onto my own server and reference it as above, it just shows the fallback text in Firefox. In Chrome it downloads the file when I open the page (which proves that the file link is correct).

Anyone know what's going on here?

Upvotes: 4

Views: 34608

Answers (2)

Scrooge McDuck
Scrooge McDuck

Reputation: 394

I was experiencing the first of the problems described by @r3mainer.

On my lighttpd server the problem was caused by the missing

  ".svg"          =>      "image/svg+xml",

line in the mimetype.assign section of the lighttpd configuration file.

Upvotes: 0

r3mainer
r3mainer

Reputation: 24547

I can think of four possibilities:

  1. Your server is using the wrong MIME type for SVG images. (Can be fixed by adding AddType image/svg+xml svg to your .htaccess file; other methods discussed here)

  2. You saved the SVG file somewhere else and it doesn't exist at icons/chrome.svg. (Try navigating straight to the SVG file at icons/chrome.svg. Does it display in your browser?)

  3. You saved the file with insufficient permissions, resulting in your web server being unable to access the file. (Can be fixed by navigating to the icons directory and typing chmod 0644 chrome.svg at the command line prompt.)

  4. The file you downloaded from nocookie.net isn't actually an SVG file at all. (Try opening it inside a text editor.)

Upvotes: 9

Related Questions