Computer >> Computer tutorials >  >> Programming >> Javascript

How to create SVG graphics using JavaScript?

All modern browsers support SVG and you can easily create it using JavaScript. Google Chrome and Firefox both support SVG.

With JavaScript, create a blank SVG document object model (DOM). Using attributes, create a shape like a circle or a rectangle.

var mySvg = "https://www.w3.org/2000/svg";
var myDoc = evt.target.ownerDocument;

var myShape = svgDocument.createElementNS(mySvg, "circle");

myShape.setAttributeNS(null, "cx", 40);
myShape.setAttributeNS(null, "cy", 40);
myShape.setAttributeNS(null, "r", 30);

myShape.setAttributeNS(null, "fill", "yellow");