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!

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.