Create SVG on the Fly

by Farzad Cyrus

HTML

<div id="root">
</div>

<!-- <svg id="" width="256px" height="256px">
  <path d="M10 10 L 120 10 L 120 120 L 10 120" />
</svg> -->

CSS

svg {
  fill: '#dd2244'
}

html,
body {
  width: 100%;
  height: 100%;
}

JavaScript

var pathD = `M10 10
						L 120 10
            L 120 120
            L 10 120`;


var div = document.querySelector('#root');

var svg = document.createElement('svg');
var path = document.createElement('path');

svg.setAttribute('width', '256px');
svg.setAttribute('height', '256px');

path.setAttribute('d', pathD);

svg.appendChild(path);


div.appendChild(svg);