SVG & namespaces

[Yansky]

Hi, I've been learning SVG lately and I'm a bit confused about
namespaces and how it relates to SVG. This was the code I started out
with (firefox only):

document.firstChild.nextSibling.setAttribute('xmlns', 'http://
www.w3.org/1999/xhtml');
document.firstChild.nextSibling.setAttribute('xmlns:svg', 'http://
www.w3.org/1999/xhtml');

var se = document.createElement('div');
se.setAttribute('style','width:300px;height:100px;float:left;');
se.innerHTML='<svg width="100%" height="100%">'+
'<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:
1;stroke:rgb(0,0,0)"/>'+
'</svg>';
document.body.appendChild(se);

But that didn't seem to work. It turned out I needed to use
document.createElementNS().

http://pastebin.ca/1274898

But I don't understand why this is. I thought createElementNS() was
only used in XUL. Why does the namespace need to be set when creating
an SVG element?

 

[David Mark]

Hi, I've been learning SVG lately and I'm a bit confused about
namespaces and how it relates to SVG. This was the code I started out
with (firefox only):

document.firstChild.nextSibling.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
document.firstChild.nextSibling.setAttribute('xmlns:svg', 'http://www.w3.org/1999/xhtml');

var se = document.createElement('div');
se.setAttribute('style','width:300px;height:100px;float:left;');
se.innerHTML='<svg width="100%" height="100%">'+
'<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:
1;stroke:rgb(0,0,0)"/>'+
'</svg>';

As you have found, that won't work with XML.

document.body.appendChild(se);

But that didn't seem to work. It turned out I needed to use
document.createElementNS().
Right.


http://pastebin.ca/1274898

But I don't understand why this is. I thought createElementNS() was
only used in XUL. Why does the namespace need to be set when creating
an SVG element?

It has nothing to do with XUL. SVG elements are of another namespace,
so they must be created with createElementNS; otherwise they are be
treated as invalid (X)HTML.

 

[Yansky]

As you have found, that won't work with XML.



It has nothing to do with XUL.  SVG elements are of another namespace,
so they must be created with createElementNS; otherwise they are be
treated as invalid (X)HTML.

Thanks for the response.

How come they are of another namespace? What exactly does a namespace
mean in this context?

Cheers.

 

[David Mark]

Thanks for the response.

How come they are of another namespace? What exactly does a namespace
mean in this context?

The same thing it always means in XML. In the case of this (X)HTML
document, the default namespace as html. To create SVG elements, you
have to use the svg namespace.

[snip]

 

[Thomas 'PointedEars' Lahn]

How come [SVG elements] are of another namespace? What exactly does a
namespace mean in this context?

Your questions indicate you have tried to learn SVG, an application of XML,
before learning and understanding XML. RTFM, STFW. Questions about markup
languages are on-topic in the comp.infosystems.www.authoring.* hierarchy, BTW.

Please trim your quotes.


PointedEars