SVG not working when access on localhost. Why?

Question

Does anybody know why the same code from this page http://emacsformacosx.com/ would not render when hosted on a local tomcat server?

I am trying to play with some SVG but can't see to make it work locally. Any ideas?

Answer 1

You probably need to set up your server to serve the proper MIME type for SVG: image/svg+xml

More info here: http://www.planetsvg.com/tools/mime.php

Answer 2

The page is XHTML, so it should be served with an appropriate Content-Type header. If the page is served as text/html, then Firefox and Chrome (the only two I've checked in) won't recognise the XML namespaces necessary for the SVG to work.

Although the live page is being served with the header

Content-Type: text/xml; charset=UTF-8

this is not, strictly speaking, correct. In my tests, serving it with

Content-Type: application/xhtml+xml; charset=UTF-8

causes it to render correctly, and is the appropriate type for XHTML.

Note that you'll have to detect Internet Explorer (and other browsers that don't understand XHTML) on the server and change the content type to text/html - if presented with the application/xhtml+xml content type IE will prompt the user to download the file; for text/xml it will show the pretty-printed XML document tree (although occasionally it will get confused and manage to display the HTML correctly through content sniffing).

EDIT: as codedread says, if you want to serve raw SVG files you'll need to use the SVG content type, but in this case the file is in fact XHTML with inline SVG in a separate namespace, so the XHTML type is correct.

Answer 3

As NickFitz and codedread have mentioned, for embedded SVG to work your page needs to be served as application/xhtml+xml. There are at least three ways of achieving this with Tomcat:

1. Edit your server or application web.xml to change the default MIME type, or the MIME type for a particular file extension.
2. If your page is a JSP, set the contentType in the page directive
3. If you want to accommodate IE users, set the contentType dynamically based on the HTTP_ACCEPT header sent in the HTTP request (I blogged this approach in the context of mobile devices).

Alternatively, split your SVG content into a separate files, then it won't matter what content type your page is. IE won't render the SVG, but it will at least show the rest of the page. You can take all the SVG out of the page and the link to it, though there are still some browser compatibility issues.

Finally, if you just want to look at a static page with embedded SVG off your local hard disk with no servers involved, changing the file extension from .html to .xhtml may work.