title: How to create a valid svg element with javascript
body: <p>I was working with SVG and i created an svg element. I added a <code>&lt;rect&gt;</code> element directly into the svg with html and then I created a new element (without namespace) <code>&lt;circle&gt;</code> with javascript and appended it to the svg element. The  <code>&lt;rect&gt;</code> element displayed in the svg viewbox but the <code>&lt;circle&gt;</code> element did not display.</p>
  
  <p>I got the <code>&lt;rect&gt;</code> and <code>&lt;circle&gt;</code> on the console and checked the constructor. The <code>&lt;rect&gt;</code> element returned <code>SVGRectElement</code> but the <code>&lt;circle&gt;</code> returned <code>HTMLUnknownElement</code>. I created a new <code>&lt;circle&gt;</code> element (with namespace: <a href="https://www.w3.org/2000/svg" rel="nofollow noreferrer">https://www.w3.org/2000/svg</a>) and checked the constructor which returned <code>Element</code>.</p>
  
  <p>Whichever way, appending both the namespaced and non-namespaced <code>&lt;circle&gt;</code> element to the svg did not appear in the svg viewbox. So how do i create a recognized svg element with javascript that will return <code>SVGCircleElement?</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   var circle = document.createElement('circle');
      circle.setAttribute('cx', '10');
      circle.setAttribute('cy', '10');  
      circle.setAttribute('r', '30');
      circle.setAttribute('fill', 'red');
  
      var circle_2 = document.createElementNS('https://www.w3.org/2000/svg','circle');
      circle.setAttribute('cx', '5');
      circle.setAttribute('cy', '20');  
      circle.setAttribute('r', '30');
      circle.setAttribute('fill', 'blue');
  
      var svg = document.getElementById('svgx');
      var rect = document.getElementById('svgrect');
      svg.appendChild(circle);
      svg.appendChild(circle_2);
  
      console.log(svg.constructor); // SVGSVGElement() { [native code] }
      console.log(rect.constructor); // HTMLRectElement() { [native code] }
      console.log(circle.constructor); // HTMLUnknownElement() { [native code] }
      console.log(circle_2.constructor); // Element() { [native code] }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg style='width: 100%;' id='svgx'&gt;
  &lt;rect x='5' y='5' width='50' height='30' fill='black' id='svgrect'&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>