google chrome - SVG won't display

Question

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?

Answer 1

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.)