Создание svg-элемента
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);