CODEWITHSUNDEEP
javascriptvectorsvginlineraphael
Wolfram
Wolfram

Reputation: 8052

How does RaphaelJS get inline SVG to work in Firefox 3.6?

I was playing around with RaphaelJS and realized that it gets inline SVG working in Firefox 3.6.22 (at least it looks like it, or am I fooled by Firebug...).

As my own SVG does not show up, I was wondering how RaphaelJS accomplishes this feature when Firefox 3.6 does not support blunt inlining of SVG. I (briefly) looked at the source and also found another answer how inline SVG can work in older Firefox browsers. Still, I am stuck getting this to work for myself (i.e. AJAX-loading SVG and placing it into the DOM).

Upvotes: 3

Views: 1037

Answers (1)

Wolfram
Wolfram

Reputation: 8052

I am going to answer my own question:

  1. Raphaël is not really doing anything special (in this case).

  2. Thanks to the answers to my post on the Raphaël Google Group I was pointed in the right direction. "Inline SVG" means "inline with common HTML" (also explained in a Mozilla blog post), so without using XHTML and proper namespacing. My prior understanding was that I could use SVG only via <object> or <embed> in some browsers (like Safari 4 or Firefox 3.6)... which is wrong.

    I was adding SVG by passing it as an XML string to jQuery's .html() method. This works fine in the current versions of most modern browsers but the method name gives a hint that this might not be the right way if you want to add SVG in a browser that does not support SVG in html. So I changed my code and used document.createElementNS to add my SVG directly to the DOM. There is another way to bulk-inject my SVG-XML (as mentioned in the Google groups thread), but I did not have the time to look into it yet.

    So now I got my SVG working in all targeted browsers but the older IEs, which is nice. Sample code:

    var svgContainer = document.getElementById("svg-container"),
    svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
    g = document.createElementNS("http://www.w3.org/2000/svg", "g");
svgElement.setAttribute("version", "1.1");
// Add stuff to the group
svgElement.appendChild(g);
svgContainer.appendChild(svgElement);

Upvotes: 4

Related Questions