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.