SVG <circle>

The <circle> tag is used to create a circle.

The <circle> Tag

The <circle> tag is used to create a circle.

Copy the following code into Notepad and save the file as "circle1.svg". Place the file in your Web directory:

<?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="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

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

View example

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2008 by Refsnes Data. All Rights Reserved.

W3Schools was converted to XHTML in December 1999