How do I tell if a DOM element is HTML or SVG?

Question

You may try something like the following:

if(document.getElementById("el") instanceof SVGElement) {
    console.log("It's an SVG element");
}

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="300" height="300">
  <g id="firstGroup">
    <rect id="el" width="100" height="50" x="40" y="20" fill="blue" />
    <text x="40" y="100">This is a basic SVG document!</text>
  </g>
</svg>

Note that the <svg> element itself is actually an HTML element containing SVG elements – which means that, perhaps surprisingly, the <svg> HTML element is not an SVG element, hence:

console.log(document.createElement("svg") instanceof SVGElement)) // => false

Leave a Comment Cancel reply