Inline SVG in Firefox

Question

I'm a bit stumped with this one. I'm rendering SVG visualizations using Protovis, a JS library, and it works perfectly well in Chrome as well as Firefox. I save the rendered SVG on my server and try to re-render it in a "gallery" view using a PHP function, and this fails in Firefox. All I see is the text in the SVG, but not the SVG.

I save the full svg content, like so:

<svg height="220" width="880" stroke-width="1.5" stroke="none" fill="none" font-family="sans-serif" font-size="10px"><g transform="translate(30, 10)"><line stroke-width="1" 

I've tried using <object> but all that does is prompt Firefox to download a plugin it can't find.

It works in FF4 beta, but I can't see why it won't work even in Firefox 3.6. Is this something I ought to give up on? You can see a demo here:

http://www.rioleo.org/protoviewer (click on "gallery")

Thanks once again!

Festus

have you tried header("Content-type: image/svg+xml"); – Unpretentious

doesn't that render the page non-viewable though? – Festus

Answer 1

Inline SVG only works in Firefox in two situations:

• Firefox has the experimental HTML5 parser enabled (ie. you're using a 4.0 nightly)
• The document being parsed is not HTML but XHTML (Content-type: application/xhtml+xml)

The object approach suggested by Rob should work, as long as the separate SVG file is coming from your server with Content-type: image/svg+xml and you use the correct syntax:

<object data="foo.svg" type="image/svg+xml" width="400" height="300">

See Damian Cugley's article 'SVG: object or embed?' for details of some other options, or use SVGWeb.

Valencia

Why won't it work if I change the content-type meta tag in the file to xhtml+xml? – Festus

@Festus It's nothing to do with the meta tag, the content-type that matters is in a HTTP header sent by the web server. This is usually controllable from a server side scripting language, as per pastjean's comment. If you're not using a server side scriping language, check your web server configuration, or try changing the file extension to .xhtml. – Valencia

Answer 2

Make sure you are using the correct attributes with the object element and the end tag:

<object data="yourimage.svg"></object>

Sawyer

Good point, and I made the changes and now it looks like an iFrame in both Chrome and Firefox (the code is still there in the "gallery" tab if you want to see), the last box. – Festus

Answer 3

This example may be useful for you, explanation. SVG rendering support on load time and MIME text/html is a supported feature of ItsNat Java web framework, anyway it was inspired on this JS code, the latter can be useful for you in your context (PHP).

Eulalie