If you are trying to use SVG like <img src="image.svg"> or as a CSS background-image, and the file is linked to correctly and everything seems right, but the browser isn’t displaying it, it might be because your server is serving it with an incorrect content-type.
Add this to your .htaccess file at the root to fix it:
AddType image/svg+xml .svg .svgz
why not showing svg on safari
I use AWS to serve my asset files, including the external svg file where all my images are defined. These SVGs are not rendering for me, and it doesn’t seem to be a content-type issue. Is there a known issue in regards to serving an SVG file cross origin?
Do you get errors in the console? How are you using the SVG? Demo page?
Hi Noah,
I’m having exactly this issue now. Did you have any solutions?
I found the issue with my app, the original image is not broken, only the resized images are broken, I guess that something is wrong with Image Magick
Thank you!!
In my situation, I also hadn’t defined a width or height to the SVG in the HTML so it was rendering the SVG at 0px by 0px.
The below code worked for me: (provided a PNG backup for IE8 and below)
Thank you very much!
SVG image was not showing on Website hosted on 1und1 Webserver. Entering “AddType…” into .htaccess solved the problem!
Thanks
I did my change on a weblogic server. Works great
done here
C:\weblogic10\domain-pb-7.0.2-Dev\config\mimemappings.properties
svg=image/svg+xml
I just came across this problem where when designing and having live preview in chrome I didn’t see svgs when used as img.
Solution was dead easy – adblock plus switched off on /localhost solved it all.
Hope that helps
Not htaccess problem, but I also had similar issues while using blob to serve SVG files. Browsers like Safari (Mac & iOS) and Chrome (iOS) do not accept complex MIME type now, such as “image/svg+xml;charset=utf-8”. Mac version of Chrome treats it as usual though. If you have problems with using blob url to load SVG, simply set “image/svg+xml” like this article said should work for all platforms.
I am also fixing this document now: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas, since this original one doesn’t work on Safari.
Hey, there’s another problem beyond this.
Some Windows server not render SVG files.
To allow HOST that use Windows as OS:
Create a “web.config” file in root folder with this code:
<configuration><system.webServer>
<staticContent>
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
</system.webServer>
</configuration>
This solution solves the problem in Windows host.
Isn’t that the same as adding the addType to the .htaccess file?
AddType image/svg+xml svg
AddType image/svg+xml svgz
I have been trying to enable compression on the svg file format for Google Page Speed, but having difficulties doing so. Any clue of how to do that?
Great solution, fixed my issue with a Fasthosts Windows server issue. Thanks!
Thanks, worked for me.
thanks a lot, chaning the content type did the trick
Thank you! This fix solved my problem!
I added this line of code yesterday it solves my problem but now again svg gonna
I solved added Module apache LoadModule mime_module modules/mod_mime.so