HTML SVG


Scalable Vector Graphics is the abbreviation for Scalable Vector Graphics. Graphics are represented using HTML SVG. It's a lot easier to deal with than canvas. It's a suggestion from the World Wide Web Consortium (W3C). SVG is mostly used for vector diagrams such as pie charts, 2-Dimensional graphs in the X,Y coordinate system, and so on. Paths, boxes, circles, text, and graphic images can all be drawn using SVG.


Here's an example:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> The HTML SVG Circle Method </title>
</head>
<body>

  <svg width="100" height="100"> <circle cx="50" cy="50" r="40"
  stroke="purple" stroke-width="1" fill="blue" />
  </svg>

</body>
</html>
Live Demo!


Output:


HTML SVG Rectangle



<svg width="400" height="100">
<rect width="400" height="100" stroke="black" stroke-width="1" fill="orange" />
</svg>
Live Demo!



Output:


HTML SVG Star



<body>

<svg height="200" width="300">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:green;stroke:purple;stroke-width:1;fill-rule:evenodd;"/>
</svg>

</body>
Live Demo!



Output:


SVG Vs. Canvas

SVG is a shape-based format, while Canvas is a pixel-based format. Because of its ability to render large applications, it is well suited for applications with large rendering areas, such as Google Maps, while Canvas' rendering capabilities are limited.

Canvas images are less versatile than SVGs when it comes to expanding the scale beyond its normal size.

Additionally, SVG allows you to deal with event controllers, while Canvas does not. In terms of gaming, SVG isn't the right option, but Canvas is.