Создание встроенного SVG с JS в HTML5

Я работаю с локальным файлом HTML5 - он получил <!DOCTYPE html> вверху. Я вложил в него что-то вроде этого:

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

(без пространств имен, спасибо HTML5!), и он отлично отображается в бета-версии Chrome и FF4.

Теперь я хочу создать одно и то же, но через JS. Я использую Prototype, поэтому я написал что-то вроде:

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

Я вижу в Firebug/DOM-инспекторе (как FF, так и Chrome), что он создает для него ту же структуру DOM.

Единственное отличие, которое я вижу, это то, что атрибуты ( "preserveAspectRatio" и "viewBox" ) являются строчными, но я попытался изменить атрибуты в своем первом тесте (статический HTML) на все нижний регистр и все еще работает отлично, поэтому я не думаю, что проблема.

Является ли возможность SVG для HTML5 ограничена статическим HTML, и мне нужно делать пространства имён для добавления содержимого SVG через JS, или есть что-то еще, что мне не хватает?

Ответ 1