How to use the <circle> tag to create a circle? - SVG

How to use the <circle> tag to create a circle?



- The <circle> tag is used for creating circles.

- The tag requires the x and y coordinates as center point of the circle and radius of the circle.

- Following is the example to draw a circle:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="200" cy="100" r="50" stroke="black"
stroke-width="2" fill="blue"/>
</svg>

- The circle’s center point is at (200,100) coordinate and the radius is 50.

- The ‘stroke’ attribute draws the border of the circle with 2 as width.

- The circle is filled with blue, as the ‘fill’ attribute is assigned with color blue.
Post your comment