Previous Next

SVG Circle

SVG Circle is used to draw circles on webpage, it uses <circle> element to draw a circle. circle has some attributes such as x, y, r, stroke, stroke-width, fill etc. These attributes help circle to draw a circle on a page.

Syntax

<circle cx="value" cy="value" r="value" fill="color"> </circle>

You can define one or more than one SVG circle in a document.

Stroke Width

Stroke width attribute is used to make stroke thick and bold, it takes value in number.

Syntax

<circle cx="value" cy="value" r="value" stroke="color" stroke-width=" value" fill="color"> </circle>

You can define one or more than one attributes in SVG circle.

You can use SVG circle any where within an HTML document.

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <svg> element to draw svg circle on webpage
• Give width and height of 200 200 respectivelly to SVG element
• Apply none value to fill and stroke color should be deeppink and width 5

save file with name task.html or task.htm and then open it using any browser and see results.

SVG Code Generators

Try our SVG generators to practice and generate SVG code in real time.

Previous Next