<html>
<head>
  <script type="text/javascript">
    function draw() {
      var NS = "http://www.w3.org/2000/svg";
      var s = document.createElementNS(NS, "svg");
      s.setAttribute("width", 100);
      s.setAttribute("height", 100);
      
      var rect = document.createElementNS(NS, "rect");
      rect.setAttribute("width", "100%");
      rect.setAttribute("height", "100%");
      rect.setAttribute("fill", "blue");
      
      s.appendChild(rect);
      
      document.getElementById("d").appendChild(s);
   }
  </script>
</head>

<body onload="draw()">
  <div style="border: 5px solid black; float: left;" id="d"></div>
  <p style="clear: left;">You should see a solid 5px black border around a 100x100 blue rect.</p>
</body>
</html>