Создание svg-элемента

createsvg.js

var svgNs = "http://www.w3.org/2000/svg";


var svg = document.createElementNS(svgNs,"svg");
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttribute('width', '600');
svg.setAttribute('viewBox', '0 0 600 520');
svg.setAttribute('preserveAspectRatio', 'xMidyMid');
svg.setAttribute('height', '250');

// Cоздание  только через специфичный неймспейс, изменение атрибутов можно и без него!!!

var circ = document.createElementNS(svgNs, "circle");

	circ.setAttribute("cx", 363);
	circ.setAttribute("cy", -162);
	circ.setAttribute("r",  300);
	circ.setAttribute("fill", "green"); 

var defs = document.createElementNS(svgNs, "defs"), 
	rect = document.createElementNS(svgNs, "rect"),
	clip = document.createElementNS(svgNs, "clipPath");

	clip.setAttribute("id","cut-off-progress");
	rect.setAttribute("x","200"); 
	rect.setAttribute("y","15");
	rect.setAttribute("width","555");
	rect.setAttribute("height","155");

	circ.setAttribute('clip-path', 'url(#' + clip.getAttribute("id") + ')');

	clip.appendChild(rect);
	defs.appendChild(clip);
	svg.appendChild(defs);
	svg.appendChild(circ);
	document.body.appendChild(svg);