Inline SVG in HTML, with Firefox 3.5

Question

Hi,

I'm trying to create some mixed HTML/SVG content and having some trouble. The HTML content shows up as expected, but the inline SVG does not. So, I do some experiments.

I find sites which have examples of inline SVG, and they render correctly on my system. So, I "view page source" and copy/paste the HTML/SVG into another local file, and open this file in Firefox. No inline SVG is visible.

I also tried the same experiment with Chrome, same results.

What might I be missing?

Update
Slight change in identity on my part: k montgomery -> kmontgom on use of OpenID.

Anyway thanks to all those who answered. The best solution was in setting the Response.ContentType; this lets me continue on with the WebForms approach for now.

I had contemplated making pure XHTML content in .xml files and using ASP.NET MVC to serve up that content. I may end up doing that in the future.

Now, onward with jQuery, SVG, and making the thing do something.

Thanks for all the help.

Answer 1

Make sure to name the file ".xml" not ".html"

Answer 2

In order for inline SVG to be shown in browsers, the page must be XHTML valid and must be serverd with application/xhtml+xml mime-type server response header.

It is also possible to pull inline SVG content from HTML page as well, see an example of an SVG Tiger image that can also be viewed in Internet Explorer (5.5+)

Answer 3

As Greg said, it needs to be a file that Firefox recognises as an XHTML file, not just regular HTML, which is what that renaming accomplished. In order to get that from a server-side app, you need to set the response's Content-type header to application/xhtml+xml.

Answer 4

Slight change in identity on my part: k montgomery -> kmontgom on use of OpenID.

Anyway thanks to all those who answered. The best solution was in setting the Response.ContentType; this lets me continue on with the WebForms approach for now.

I had contemplated making pure XHTML content in .xml files and using ASP.NET MVC to serve up that content. I may end up doing that in the future.

Now, onward with jQuery, SVG, and making the thing do something.

Thanks for all the help.

Answer 5

An alternative if you don't want to do XHTML is to base64 encode the SVG data.

e.g.

<object type="image/svg+xml" 
        data="data:image/svg+xml;base64,PCFET0NUWVBFI...etc..."></object>

I think this is probably not what you want specifically for your situation, but anyway, may be useful for others.