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 06:52:31

• Related Questions & Answers
• How to work with Scalable Vector Graphics (SVG) in HTML5?
• How to add Scalable Vector Graphics (SVG) to your Web Page?
• How to draw on scroll using JavaScript and SVG?
• Turtle graphics using Python
• How to Design Phong Shading Graphics using p5.js?
• How to draw shapes using SVG in HTML5?
• Flood fill algorithm using C graphics
• How to create animations using JavaScript?
• How to create a rectangle with rounded corners in HTML5 SVG?
• How to draw grid using HTML5 and canvas or SVG?
• How to create JavaScript objects using object() constructor?
• How to create a Number object using JavaScript?
• How to create domain-based cookies using JavaScript?
• How to create JavaScript objects using new operator?
• How to create a bold text using JavaScript?