title: Dynamically add a full svg shape (with pure Javascript)
body: <p>I want to draw a square by using path in SVG created with JS. But the browsers do not accept this:</p>
  
  <p>Javascript:</p>
  
  <pre><code>var svg = document.createElement('svg');
  svg.width = "200";
  svg.height = "200";
  document.body.appendChild(svg);
  
  var path = document.createElement('path');
  path.setAttribute('d','M100,0 L200,100 100,200 0,100Z');
  path.setAttribute('fill','red');
  svg.appendChild(path);
  </code></pre>
  
  <p>HTML (output):</p>
  
  <pre><code>&lt;svg width="200" height="200"&gt;
    &lt;path d="M100,0 L200,100 100,200 0,100Z" fill="red"/&gt;
  &lt;/svg&gt;
  </code></pre>