<html>
<head>
    <style type="text/css">
      .cls1 {
        stroke: black;
        fill: rgb(0,128,255);
        stroke-width: 1;
      }
    </style>

<script type="text/javascript">
function setup() {
 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 svg.width.baseVal.valueAsString = "400px";
 svg.height.baseVal.valueAsString = "400px";
 svg.viewBox.baseVal.x = 0;
 svg.viewBox.baseVal.y = 0;
 svg.viewBox.baseVal.width = 200;
 svg.viewBox.baseVal.height = 90;
 var ellipse1 = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
 ellipse1.cx.baseVal.value = 50;
 ellipse1.cy.baseVal.value = 50;
 ellipse1.rx.baseVal.value = 30;
 ellipse1.ry.baseVal.value = 10;
 ellipse1.style.setProperty("stroke", "black", "");
 ellipse1.style.setProperty("fill", "red", "");
 var ellipse2 = ellipse1.cloneNode(true);
 ellipse2.cx.baseVal.value = 100;

 var drawing = document.getElementById("drawing");
 svg.appendChild(ellipse1);
 svg.appendChild(ellipse2);
 drawing.appendChild(svg);
}
</script>
</head>
<body onload="setup()">
<p>Here is an html paragraph. And below is a svg drawing. You should see two ellipses.</p>
<div id="drawing"/>
</body>
</html>