10

I'm working with a local HTML5 file -- it's got <!DOCTYPE html> at the top. I put something like this in it:

<svg height="2em" width="3em" preserveAspectRatio="none" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>

(no namespaces, thanks HTML5!), and it displays great in Chrome and FF4 beta.

Now I want to create the same thing but via JS. I'm using Prototype, so I wrote something like:

var box = new Element('svg', {'width':'3em', 'height':'2em', 'preserveAspectRatio': 'none', 'viewBox': '0 0 100 100'});
box.appendChild(new Element('rect', {fill:'red', x:'0', y:'0', width:'100', height:'100' }));
container.appendChild(box);

I can see in Firebug / DOM inspector (both FF and Chrome) that it's creating the same DOM structure for this.

The only difference I see is that the attributes ("preserveAspectRatio" and "viewBox") are all-lowercase, but I tried changing the attributes in my first test (static HTML) to all-lower-case and it still works fine, so I don't think that's the problem.

Is the HTML5 SVG capability limited to static HTML, and I need to do namespaces still for adding SVG content via JS, or is there something else I'm missing?

Ken
  • 1,159
  • 1
  • 9
  • 13
  • (Comment because this isn't helpful) If you're doing JavaScript vector manipulation, unless you specifically need SVG output, it may be easier to just use ``. – Delan Azabani Nov 07 '10 at 05:33
  • The way the HTML5 spec combines SGML and XML (with respect to SVG) confuses the heck out of me too :( I think you should probably consult the spec directly to see if it has any comments regarding how this case *should* be handled. If it seems like it's being handled incorrectly, file a browser bug report. Also, if you're able to provide a link to the source file, I'd be curious to take a look. – jbeard4 Nov 07 '10 at 10:09
  • Also, I doubt it's an issue involving namespaces, as "svg" and "rect" both live in the SVG namespace, and your question implies that they are both getting rendered, albeit incorrectly. @preserveAspectRatio, on the other hand, lives in the default namespace, and so you shouldn't prefix that with a namespace even if you wanted to. I think this is more likely to be an issue of case-sensitivity for tags and attributes. As a first step, I would try it without Prototype, just using node.setAttribute/setAttributeNS, and see if it works. It could be a Prototype problem. – jbeard4 Nov 07 '10 at 10:15
  • echo-flow: OK, standalone example coming soon... :-) – Ken Nov 07 '10 at 17:11
  • 1
    echo-flow: Turns out it *was* a namespace issue: the elements need to be created with `createElementNS("http://www.w3.org/2000/svg", ...)`, which Prototype happens to have no built in (`new Element(...)`) support for. So I guess the HTML5 SVG situation is basically "SVG without a namespace gets the namespace added during parsing (but after that it's just like XHTML before)". – Ken Nov 08 '10 at 01:41
  • P.S., the "Answer Your Question" button here isn't working for me today, so if anybody adds this as as answer, I'll mark it correct. :-) – Ken Nov 08 '10 at 01:41
  • add the answer yourself? – Jan Nov 29 '10 at 11:03

1 Answers1

6

Turns out it was a namespace issue: the elements need to be created with createElementNS("http://www.w3.org/2000/svg", ...), which Prototype happens to have no built in (new Element(...)) support for. So I guess the HTML5 SVG situation is basically "SVG without a namespace gets the namespace added during parsing (but after that it's just like XHTML before)".

P.S., the "Answer Your Question" button here isn't working for me today, so if anybody adds this as as answer, I'll mark it correct. :-)

Community
  • 1
  • 1