title: Can a programatically created svg element be saved as an image?
body: <p>If I <strong>programatically</strong> create an SVG element, can I programatically save that element as an image?</p>
  
  <p>Solutions I've researched on Stackoverflow and Google so far:</p>
  
  <ul>
  <li><p>Have the user <code>right-click-save-as</code></p></li>
  <li><p>3rd party libs can convert <code>svg</code> commands to <code>canvas</code> commands and save the canvas with canvas.toDataURL</p></li>
  </ul>
  
  <p><strong>Is there a direct way of programatically converting SVG to an image?</strong></p>
  
  <p>Example Javascript/SVG:</p>
  
  <pre><code>var svgns="http://www.w3.org/2000/svg";
  var xlink='http://www.w3.org/1999/xlink'
  
  var svg=document.createElementNS(svgns,"svg");
  svg.setAttribute('width', 100);
  svg.setAttribute('height', 100);
  
  var e=document.createElementNS(svgns,"rect");
  e.setAttribute("fill","skyblue");
  e.setAttribute("stroke","lightgray");
  e.setAttribute("stroke-width",4);
  e.setAttribute("x",20);
  e.setAttribute("y",20);
  e.setAttribute("width",50);
  e.setAttribute("height",50);
  svg.appendChild(e);
  
  document.body.appendChild(svg);
  </code></pre>