6

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!

Rio
  • 11,734
  • 21
  • 62
  • 104

3 Answers3

4

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.

robertc
  • 69,665
  • 18
  • 184
  • 170
  • Why won't it work if I change the content-type meta tag in the file to xhtml+xml? – Rio Dec 15 '10 at 22:07
  • @Rio 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`. – robertc Dec 16 '10 at 00:39
0

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

<object data="yourimage.svg"></object>
Rob
  • 13,342
  • 26
  • 40
  • 60
  • 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. – Rio Dec 12 '10 at 05:23
0

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).

jmarranz
  • 6,381
  • 2
  • 18
  • 10