How to use the djs In JavaScript
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.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> How to make an SVG image using JavaScript? </title> <style> .container{ text-align: center; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js" integrity="sha512-M7nHCiNUOwFt6Us3r8alutZLm9qMt4s9951uo8jqO4UwJ1hziseL6O3ndFyigx6+LREfZqnhHxYjKRJ8ZQ69DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script></head><body> <div class="container"> <h2 style="color: green;"> w3wiki </h2> <h3> The below svg image is created dynamically using d3.js. </h3> </div> <script> const createdSvg = d3.select('.container'). append('svg'). attr('height', '200'). attr('width', '200') createdSvg.append('image'). attr('height', '200'). attr('width', '200'). attr('href', "https://media.w3wiki.org/wp-content/uploads/20231004184219/gfglogo0.jpg"); </script></body></html> |
Output:
How to Make an SVG Image in JavaScript ?
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:
Table of Content
- Using the HTML DOM createElement() method
- Using the d3.js
Contact Us