How to create HTML <svg> Circle Element - HTML SVG Graphics

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support

The numbers in the table specify the first browser version that fully supports the <svg> element.

Element	Chrome	Edge	Firefox	Safari	Opera
<canvas>	4.0	9.0	2.0	3.1	9.0

Example of HTML <svg> Circle Element

Follow the Example

index.html

Example: HTML

 <!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Output should be:

Full Example of HTML <svg> Circle Element

Follow the Example

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

Output should be:

Category:	Web Tutorial
Sub Category:	HTML SVG Graphics
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference