SVG Circle

Beginner
⏱️ 5 min read
📚 Updated: Aug 2025
🎯 1 Code Example
Basic Shape
SVG Circle tutorial illustration showing the cx, cy, and r attributes

What You’ll Learn

How to create and customize SVG circles in HTML using the <circle> element. Circles are one of the fundamental shapes in Scalable Vector Graphics and form the basis for icons, charts, badges, and decorative elements on the web.

You’ll see the syntax, the three core attributes (cx, cy, r), styling with fill, stroke, and stroke-width, plus a complete HTML example, a live preview, and best practices for clean, accessible SVG markup.

⚡ Quick Reference — SVG Circle Attributes

cx number

x-coordinate of the center

cy number

y-coordinate of the center

r number

Radius of the circle

fill color

Inside fill colour

stroke color

Outline colour

stroke-width number

Outline thickness in pixels

Basic Syntax
<svg>
  <circle cx="x-coordinate" cy="y-coordinate" r="radius" />
</svg>
1

Complete HTML Example

This example draws an orange circle with a black border, centered at (100, 100) with a radius of 50 units inside a 200×200 SVG canvas:

index.html
<!DOCTYPE html>
<html>
<body>

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="orange" stroke="black" stroke-width="2" />
</svg>

</body>
</html>
Try It Yourself

👀 Live Preview — Circle Variations

See how different attribute combinations change the appearance of an SVG circle:

Solid fill
Stroke only
Fill + stroke
Thick stroke
Semi-transparent
Dashed border

🧠 How It Works

1

Open an <svg> canvas

Wrap your shape in an <svg> element. Give it a width and height (or a viewBox) so the browser knows how big the drawing area is.

SVG canvas
2

Set the center with cx and cy

cx is the horizontal position of the centre and cy is the vertical position. The origin (0, 0) is the top-left corner of the SVG.

Position
3

Choose a radius (r)

r defines the radius in user units. Make sure cx + r and cy + r stay inside the SVG bounds, otherwise the circle gets clipped.

Size
4

Style with fill & stroke

Use fill for the inside colour, stroke for the outline, and stroke-width for the outline thickness. Set fill="none" for an outline-only circle.

Styling
=

A crisp, scalable circle

SVG circles render at any resolution without blurring because they are vector shapes. The browser draws them in real time using the centre, radius, and fill/stroke values.

✅

Use Cases

SVG circles show up almost everywhere on the modern web. Here are the most common use cases:

🎯 Icons & Avatars

Profile bubbles, status dots, and round icon backgrounds.

📊 Data Visualisation

Pie segments, donut charts, scatter plot points, and bubble charts.

⏳ Loaders & Spinners

Animated stroke-dash circles for loading and progress UI.

🎯 Buttons & Badges

Circular badges, notification dots, and toggle indicators.

🎤 Logos

Brand marks built from one or more layered circles.

🧮 Education

Geometry lessons, physics diagrams, and interactive demos.

🌍 Maps & Markers

Location pins, heat-map dots, and clustered map markers.

💡 Best Practices

Do

  • Use a viewBox on the parent <svg> for responsive scaling
  • Add role="img" and aria-label for accessibility
  • Pick stroke widths that align with whole pixels (1, 2, 3…) to stay crisp
  • Style with CSS variables for easy theming (light / dark)
  • Use fill="currentColor" to inherit the parent text colour

Don’t

  • Forget that the origin (0, 0) is the top-left corner
  • Place the circle so that cx + r overflows the SVG width
  • Use fill="none" without setting a stroke — nothing renders
  • Hard-code pixel sizes when you need a responsive icon
  • Skip the r attribute — it defaults to 0 (invisible)

Key Takeaways

1

Three attributes define every SVG circle

cx cy r
2

Style with fill, stroke, and stroke-width

3

SVG is vector-based — circles stay sharp at any size or resolution

4

The origin (0, 0) is the top-left of the SVG canvas

5

Add a viewBox for responsive, scalable graphics

❓ Frequently Asked Questions

Use the <circle> element inside an <svg>. Set cx and cy for the centre, r for the radius, and optionally fill, stroke, and stroke-width for styling. Example: <circle cx="100" cy="100" r="50" fill="orange" stroke="black" stroke-width="2" />.
cx is the x-coordinate of the circle’s centre, cy is the y-coordinate of the centre, and r is the radius. All three values default to 0 if you omit them.
Add a viewBox attribute to the parent <svg> instead of fixed width and height, then size the SVG with CSS. The circle will scale proportionally because SVG is vector-based.
Yes. Presentation attributes such as fill, stroke, and stroke-width can be set directly on the element or via CSS selectors. CSS lets you add hover, focus, transitions, and animations.
The most common reasons are: r is 0 or missing, the circle is outside the viewBox or container size, fill is set to none with no stroke, or the parent <svg> has zero width or height.

Master Every SVG Shape!

Continue with ellipses, lines, polygons, and paths to draw any 2D vector graphic in HTML.

All SVG Topics →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

SVG Introduction SVG Ellipse