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?

Accepted Answer

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.

SVG not working when access on localhost. Why?

Solution

Problem