The SVG images are vector images that do not lose their quality either in the case of Zoom in or Zoom out. These are the Scalable Vector Graphics that can be directly created using the <svg> tag in HTML or dynamically using JavaScript. Let us create an SVG using JavaScript.

We can use the below methods to create SVG images dynamically using JavaScript:

Using the HTML DOM createElement() method

The createElement() method of the HTML DOM can be used to create an SVG and image element dynamically and then the appendChild() method can be used to append it to an element as a child.

Syntax:

const varName = document.createElement(nameOfElementToBeCreated);

Example: The below code example will explain the use of the createElement() method to create an SVG image using JavaScript.

Output:

Using the d3.js

d3.js is a JavaScript library that can be included using the CDN Link inside a HTML document. It can be used to dynamically add a SVG image.

Syntax:

d3.select('selectedHTMLElement').append('svg').append('image');

Example: The below code will explain the use of d3.js to create a SVG image dynamically.

Output: