I have been adding svg images to div tags with the background property in css (example: the treehouse logo on this website). I am having a strange issue I don’t quite understand. The svg file loads just fine in my local host, but when I upload the files into my server and preview the site remotely, the svg image doesn’t load and the browser doesn’t recognize it, as if the file wasn’t there. Am I forgetting to add something to the page so it loads properly?
Paulie’s example gets served with header Content-Type:image/svg+xml
Yours gets served with header Content-Type:text/plain
I think that could be the problem (not sure), Google for how to change the content-type for svg in the response header (because I don’t know how, probably some .htaccess setting if you’re using Apache).
Ok it works now! I don’t quite understand the logic of the solution tho… In order for it to work, I need to add the .htaccess files with the AddType lines in the same directory where the svg images live. That in return will throw that 500 server error that CrocoDillon mentioned. If I reload the URL, delete the .htaccess file, and reload the URL one more time, it will work.
I know this is way late, but I had the same issue. What chuletademarrano said works except I didn’t have to delete the .htaccess file. I just forgot to add the “.” before “htaccess” file name, so it wasn’t working. I added the “.” and it FINALLY worked.