YouTip

# SVG Circle The `` element in SVG is used to draw circles, and it is one of the commonly used basic shapes in SVG. You can use the `` element to create circular graphics, and can control the position, size and style of the circle by setting attributes. ### Basic Syntax <circle cx="x-coordinate" cy="y-coordinate" r="radius" fill="fill-color" stroke="stroke-color" stroke-width="width" /> **Attribute Explanation:** * The `cx` and `cy` attributes define the coordinates of the circle center, i.e., the position of the center point of the circle. * The `r` attribute defines the radius of the circle to determine the size of the circle. * The `fill` attribute defines the fill color of the circle. * The `stroke` attribute defines the stroke color of the circle. * The `stroke-width` attribute defines the stroke width of the circle. The following code draws a circle with blue fill, black stroke, radius of 50 pixels, and center coordinates of (100, 100). ### Example The SVG code is as follows: ## Example [Try it yourself »](#) Click to view: (#). **Code Explanation:** * The cx and cy attributes define the x and y coordinates of the circle center. If cx and cy are omitted, the circle center is set to (0, 0) * The r attribute defines the radius of the circle