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 = "http://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");

Govinda Sai

Updated on: 24-Jan-2020

429 Views

Kickstart Your Career

Get certified by completing the course

Get Started