Geek Answers Handbook

SVG will not be displayed

I am 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 this exact file on my own server and link to it as mentioned above, it just shows the backup text in Firefox. In Chrome, it loads the file when the page is opened (which proves the correct link to the file).

Does anyone know what is going on here?

+3
source share
1 answer

I can imagine four possibilities:

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

  • You saved the SVG file somewhere else and it does not exist in icons/chrome.svg . (Try to go directly to the SVG file on the /chrome.svg icons. Does it display in your browser?)

  • You saved the file with insufficient permissions, as a result, your web server was unable to access the file. (It can be fixed by going to the icons directory and typing chmod 0644 chrome.svg on the command line.)

  • The file downloaded from nocookie.net is not really an SVG file. (Try opening it in a text editor.)

+5
source

More articles:


All Articles