SVG Basic
SVG HOME SVG Intro SVG Example SVG in HTMLSVG Shapes
SVG Rectangle SVG Circle SVG Ellipse SVG Line SVG Polygon SVG Polyline SVG Path SVG Text SVG StrokingSVG Filters
SVG Filters Intro SVG Blur Effects SVG Drop ShadowsSVG Gradients
SVG Linear SVG RadialSVG Examples
SVG ExamplesSVG Reference
SVG ReferenceSVG <circle>
SVG Circle - <circle>
The <circle> element is used to create a circle:
Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
Try it yourself »
For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Code explanation:
- The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0, 0)
- The r attribute defines the radius of the circle
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
