Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG images not displaying on certain web servers

Tags:

apache

svg

I'm having issues displaying .svg images within my html files on certain servers. This baffles me as I thought it was dictated by the browser as to whether or not the svg images get rendered, yet the browser remains the same. I'm using the following string to display them:

<img src='path/to/image.svg' alt='image' /> 

On one RHEL6 server, it displays, on another RHEL5 server, it will not. The versions of httpd are 2.2.15-9.el6 and 2.2.3-53.el5 respectively. The web browser has remained consistent with Google Chrome 12.0.742.122. Is there something between the servers that will dictate whether or not an svg image gets rendered?

Error logs don't report anything, access logs give the .svg files a status of 200 and 304.

like image 957
Scott Avatar asked Jul 25 '11 14:07

Scott


3 Answers

The SVG image should be getting served with MIME type image/svg+xml, so I would recommend checking that first. One way to check the MIME type being served is to use wget to get the image. Here's an example of the output of wget. Note where it displays the MIME type:

jacob@jacob-laptop:~/tmp$ wget http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg
--2011-07-25 11:32:04--  http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg
Resolving croczilla.com... 77.92.68.237
Connecting to croczilla.com|77.92.68.237|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 31187 (30K) [image/svg+xml]
Saving to: `butterfly.svg'

100%[====================================================================>] 31,187      84.5K/s   in 0.4s    

If the MIME type is image/svg+xml in both cases, then I would diff the content of both documents to see if there are differences between them.

Also, while this does not answer your question, you should also be aware that not all browsers support using an HTML img tag to render SVG. The reason for this is that, typically, img tags have used less security than object or embed tags. You can read here for more info on this: Reliably detecting <img> tag support for SVG

like image 92
jbeard4 Avatar answered Nov 04 '22 01:11

jbeard4


jbeard4 answer is right, but I'd like to complement it: in order to fix, you'd have to make your server serve SVG images as image/svg+xml. On Apache, you can do that by adding these two lines to .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Via http://kaioa.com/node/45

like image 25
Nighto Avatar answered Nov 04 '22 01:11

Nighto


Insert apache option this

`<filesMatch "\.(svg|svgz)$">
    FileETag None
    <ifModule mod_headers.c>
        Header set Content-type "image/svg+xml"
    </ifModule>
</filesMatch>`

before line of <Directory "/LocalServer/cgi-bin">

like image 20
Mana Chaiyawan Avatar answered Nov 04 '22 02:11

Mana Chaiyawan