How does inline SVG in Safari 4 and Firefox 3.6 work?

[wtw]

Hello everyone.

It seems that Raphael manages to make inline SVG work in Safari 4 and
Firefox 3.6, browsers that do not support this without some specific
measures (like setting the Content-Type header to "application/xhtml
+xml" or similar [1]).

I was wondering if anyone could shed some light on how this is done
clientside and what I would need to do to get inline SVG displayed (I
am trying to send some empty HTML to the client, get svg data using
AJAX and put it into the DOM).

I did ask on stackoverflow already [2] but thought that this might be
an even better place. Will answer there if I figure this out.

Thanks a lot, really appreciating it.

[1] http://stackoverflow.com/questions/4420234/inline-svg-in-firefox/4440623#4440623
[2] http://stackoverflow.com/questions/7474010/how-does-raphaeljs-get-inline-svg-to-work-in-firefox-3-6

[Ed Davies]

Raphaël directly manipulates the DOM. All but the very oldest browsers
support SVG or VML when it's in the DOM. What many browsers don't
support is SVG in HTML (though they will for XHTML): the issue is with
turning a stream of characters into a DOM tree, not the display of the
page corresponding to that tree.

I would expect the operation you describe parenthetically (getting SVG
via AJAX and inserting it in the DOM) to work. Do you find that it
doesn't? If you don't I would suspect some problem with not using the
right type of Elements or getting the namespace declarations wrong or
something like that.

[wtw]

Right know I am using jQuery's .html() method to insert a string of
SVG as this does work fine in all browsers that allow "inline SVG" (as
stated on http://caniuse.com/#search=inline%20svg) or "SVG in HTML" as
you said. In Firefox 3.6 and Safari 4/5 however, the SVG is not
visible inserted this (naive) way. Might be a "hint" that the method
is called "html" and "SVG in HTML" is not supported.

The complete contents of the SVG-textfile look like this (originally
copied from what Raphael produces):

<svg xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/
xlink"
version="1.1" x="0px" y="0px" width="472px" height="580px" viewBox="0
0 472 580" enable-background="new 0 0 472 580" xml:space="preserve">
<g id="viewport" transform="matrix(0.563731, 0, 0, 0.563731,
-6.78611, -41.1079)">
<path fill="#ffffff" stroke="#888a8b" d="M269,234.3L268.3,234.6"
style="stroke-miterlimit: 10; stroke-width: 1; stroke-opacity: 0.5;"
stroke-miterlimit="10" stroke-width="1"/>
</g>
</svg>

Could you give me a hint what I need to change in order to get it
work? First thing I will try is move away from the jQuery method and
look at methods like "createElementNS" to insert the SVG elements "by
hand". By what you said, this might fix my problem.

Thanks!


On 21 Sep, 10:47, Ed Davies <ggl.rtq.0...@edavies.nildram.co.uk>
wrote:

[Ed Davies]

On Sep 21, 9:53 am, wtw <wtwel...@rcgmbh.com> wrote:
> ....

> The complete contents of the SVG-textfile look like this (originally
> copied from what Raphael produces):
>
> <svg xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"

> ...

>
> Could you give me a hint what I need to change in order to get it
> work?

Doing something a bit like that:

var svgText = [
'<svg',
' xmlns="http://www.w3.org/2000/svg"',
' xmlns:xlink="http://www.w3.org/1999/xlink"',
' version="1.1"',
' x="0px" y="0px"',
' width="472px" height="580px"',
' viewBox="0 0 472 580"',
' enable-background="new 0 0 472 580"',
' xml:space="preserve">',
' <g id="viewport"',
' transform="matrix(0.563731, 0, 0, 0.563731, -6.78611,
-41.1079)">',
' <path',
' fill="#ffffff"',
' stroke="#888a8b"',
' d="M269,234.3L268.3,234.6"',
' style="stroke-miterlimit: 10; stroke-width: 1; stroke-
opacity: 0.5;"',
' stroke-miterlimit="10"',
' stroke-width="1"/>',
' </g>',
'</svg>'
].join('\n');

$(function() {
$('#canvas').html(svgText);
});

results in a DOM element for the root svg element in the xhtml
namespace which is not what one might hope for. As you say, the name
"html" on the jQuery method is a clue. Regrettably, there doesn't seem
to be a jQuery "xhtml" method.

> First thing I will try is move away from the jQuery method and
> look at methods like "createElementNS" to insert the SVG elements "by
> hand". By what you said, this might fix my problem.

Yes, that's probably the best approach if you're building the SVG DOM
tree from some other source.

If you already have the SVG as XML text there are other techniques for
turning it into a suitable DOM tree. See, for example, the first parts
of the "JavaScript and XML" chapter of David Flanagan's "JavaScript:
The Definitive Guide".

[wtw]

Hi Ed,

I got it working now with no problems in Safari 4/Firefox 3.6 creating
the elements using document.createElementNS. I still use jQuery to
parse the SVG string and copy the attributes off the jQuery objects. I
will have a look into creating DOM elements from the XML string
directly. Thanks for your help, been really helpful.

Wolfram



On 21 Sep, 20:59, Ed Davies <ggl.rtq.0...@edavies.nildram.co.uk>
wrote: