Question

I am adding couple of elements into the existing SVG document using the importNode() method; everything seems to be fine; could get the newly added elements using getElementsByTagName [getElementById() is not working] but the problem is that the imported elements are not getting recognized as SVGGElements instead they are mentioned just as [object Element]s. any idea guys?

Answer 1

The elements inside an xml file need to define what namespace they’re in, otherwise they’ll get parsed as unknown xml elements.

This is true even if the root of the xml file was an <svg> element. To make sure that the elements get parsed as proper svg elements, you should add xmlns="http://www.w3.org/2000/svg" and possibly xmlns="http://www.w3.org/1999/xlink (if you use xlink attributes anywhere in the file).

If on the other hand you parsed the elements using an html5 parser, the constraints are similar but slightly different since xmlns attributes aren’t recognized in html (only in xhtml). You’d need at least an <svg> element root for the markup to get parsed as svg in such a case, and you’d need to make sure that the markup is detected as html5 (avoiding any browser-specific legacy fallback modes). So you couldn’t have a <g> element as the root if you use an html5 parser.