title: svg circle not being drawn with javascript
body: <p>I have been trying to do a hello world for svg manipulation using javascript in HTML. I have written the below code and although it generates the correct html, I don't see any output in the browser, nor do I see any error.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
  var svg1 = document.createElement("svg");
  svg1.setAttribute("height",200);
  svg1.setAttribute("width",500);
  document.body.appendChild(svg1);
  var circles = document.createElement("circle");
  circles.setAttribute("cx",20);
  circles.setAttribute("cy",20);
  circles.setAttribute("r",20);
  svg1.appendChild(circles);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Where am I going wrong? thanks in advance.</p>