views:

620

answers:

1

I am attempting to display a dynamically created SVG inline in a dojo based application and am running into some difficulty.

When I navigate directly to the SVG, it renders fine in Firefox 3.5/3.6 and Chrome, but when I inline it, verifying I have the right DOCTYPE and XML namespaces, both Firefox and Chrome just display a pile of text from within the SVG. I then attempted to change my content type served up to force it to be application/xhtml+xml but when forced into a XHTML valid mode, both Firefox and Chrome refuse to give dojo access to everything in the DOM that is required for it to work.

The start of my document is:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

And my inline SVG starts as:

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="1394">

I have also attempted to display the SVG stand alone through an <img> tag, which seems to work fine in Chrome, but Firefox 3.5/3.6 refuses to display the SVG in a dijit.ContentPane, though again navigating directly to the document displays the picture. For this I used:

<img src="test_svg.php" />

And my standalone document starts with:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
<svg xmlns:svg="http://www.w3.org/2000/svg" 
  xmlns="http://www.w3.org/2000/svg" 
  version="1.0" width="480" height="1394">

And I set the following header:

Content-Type: image/svg+xml

I would use dojox.gfx but I have a rather lot of server side code to generate the SVG that I wouldn't be too keen on trying to translate to dojox.gfx and I am pretty sure that some of the styling I do with the SVG is not easily supported under dojox.gfx.

+2  A: 
Eugene Lazutkin
My understanding is that won't work. I will give it a try, but I think I need to use `document.createElementNS` and then add then add the child to a node. From the examples I have seen, it needs to be done for every node created which could be accomplished by java script, which is something I am consider. If it works with just one node for the whole document, then I will give it a go. It isn't a public apps, so I have control over the browsers of choice.
Kitson
Give it a try. ;-)
Eugene Lazutkin
Ok, I finally got my application to a point where I could give it a try... A normal `dijit.ConentPane.href = "test.svg"` which performs and XHR GET and add it as a node as well as `document.createElementNS` with an XHR GET of the file works fine in FireFox 3.6 with an HTML5 document, but neither method works in Chrome. So I am sorry, it doesn't work.
Kitson
OK, the next resort is <embed>. I updated my answer.
Eugene Lazutkin
Well, Firefox 3.6, it works like a charm and the `<svg>` is joined as a child of the `<embed>` tag. The exact same thing in Chrome, Chrome seems to parse the tag, but it just sits there and doesn't even GET the URI.
Kitson
I didn't get it: did it or did it not work for you in Chrome? It works for me --- I just tried it. And I tried in Opera --- it works too. Probably you are doing something wrong.
Eugene Lazutkin
How, fundamentally could I be doing something wrong when it clearly works in one browser and not another. It could be anything from the `DOCTYPE` (html/HTML5 in my case) to the Content-Type served up by the web server. I will continue to look into seeing if I can fix it, but as it stands now, it doesn't work. I will try it in Safari later today and see if it is a WebKit issue.
Kitson
I agree with you --- most probably I do something wrong if it works for me in all browsers I mentioned. :-)
Eugene Lazutkin
Unlike somebody else we both know I have a link to a demo, which demonstrates that embed works. I updated the answer. Just take a look and see if it works for you, and see what you did differently. Obviously we all expect to see all gory details of your experiment. I can't wait to see your example, so I can help you to find what is wrong with it.
Eugene Lazutkin
Heh, got -2 on trying to help with this question everybody else is ignoring. That'll teach me! ;-)
Eugene Lazutkin
I only gave you -1 because your example didn't work for me... Someone else must have given you the other, so obviously I am not alone. I do appreciate your helping, but as you point out, everyone is ignoring this, so I am going to undo my -1 and accept the answer to not affect your precious rating and just work on the problem myself. It teaches me that community based help ain't all it is cracked up to be.
Kitson
I don't really care about the rating, hence a smile in my message. I am more interested in *why* it didn't work for you. So far I didn't see any hints on how to reproduce your case. Does SVG Primer's example work for you?Regarding the community-based help. It works mostly for simple questions (== newbies). For an expert advise you are better off exploring different (specialized) venues. Your questions is a generic SVG question suitable for an SVG community. The only reason I saw it because I monitor questions tagged with "dojo" and I am the original author of dojox.gfx.
Eugene Lazutkin