When should I use instead of ?

Use when both radii are equal — one r keeps the markup simpler. Use when you need different horizontal and vertical radii (rx and ry).

SVG <circle> Element

Beginner

⏱️ 10 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Basic Shape

SVG Circle tutorial illustration showing the cx, cy, and r attributes

Overview

What You’ll Learn

SVG’s <circle> draws a perfect round shape from a center point and a radius. This tutorial covers the cx, cy, and r attributes, styling with fill / stroke, responsive viewBox usage, five worked examples, and how <circle> compares to <ellipse> and other basic shapes.

<circle>

Core element

Place <circle> inside an <svg> canvas to draw a round shape.

cx & cy

Center point

Set the horizontal and vertical position of the circle’s center.

r

Radius

One radius value sizes a perfect circle in user units.

Fill & Stroke

Presentation

Color the inside and outline with fill, stroke, and stroke-width.

viewBox

Responsive

Scale circles cleanly with a viewBox and CSS sizing.

Vector Sharp

Any resolution

Circles stay crisp on retina screens because SVG is drawn as vectors.

Introduction

SVG’s <circle> is one of the fundamental basic shapes in Scalable Vector Graphics. Unlike a bitmap, a circle is described mathematically — a center and a radius — so the browser can redraw it at any size without blur.

Circles power icons, avatars, chart markers, loaders, badges, and brand marks across the web. Once you know cx, cy, r, and a few presentation attributes, you can build most circular UI pieces from markup alone.

Why it matters?

Raster circles pixelate when scaled. SVG circles stay sharp, stay tiny in file size, and can be styled or animated with CSS and JavaScript like any other DOM element.

Key Highlights

Three Core Attributes

cx, cy, and r fully define geometry.

Easy Styling

Fill, stroke, opacity, and dashes work as attributes or CSS.

Accessible Markup

Add role="img" and an aria-label when the circle conveys meaning.

Scales With viewBox

One drawing scales to any CSS size without rewriting coordinates.

In short: put a <circle> in an <svg>, set the center and radius, then style the fill and stroke — that’s the whole foundation.

Foundation

📝 Syntax

Basic form of the SVG circle element:

index.html

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" />
</svg>

Attributes

Attribute	Type	Description
`cx`	Length / number	x-coordinate of the center. Defaults to `0`.
`cy`	Length / number	y-coordinate of the center. Defaults to `0`.
`r`	Length / number	Radius of the circle. Defaults to `0` (invisible).
`fill`	Paint	Interior color (or `none` for outline-only).
`stroke`	Paint	Outline color of the circle.
`stroke-width`	Length / number	Outline thickness in user units.

What It Draws

Result	Details
vector circle	Renders a perfect circle on the SVG canvas using the center and radius you provide.

Minimal workflow

index.html

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

Coordinate tips

Idea	Detail	Notes
Origin	`(0, 0)` is top-left	y grows downward
Keep it visible	`cx ± r` and `cy ± r`	Stay inside width/height or viewBox
Missing `r`	Defaults to `0`	Nothing is drawn

Cheat Sheet

⚡ Quick Reference

Goal	Code
Basic circle	`<circle cx="100" cy="100" r="50" />`
Solid fill	`<circle ... fill="#3b82f6" />`
Stroke only	`<circle ... fill="none" stroke="#10b981" stroke-width="3" />`
Fill + stroke	`<circle ... fill="#fde68a" stroke="#b45309" stroke-width="2" />`
Dashed outline	`stroke-dasharray="6 4"`
Responsive SVG	`<svg viewBox="0 0 200 200">...` + CSS width

Compare

📋 `<circle>` vs `<ellipse>` vs `<rect>` vs `<path>`

All draw shapes — pick the simplest element that fits.

one radius

Perfect round shape with cx, cy, r

two radii

Oval shapes with rx and ry

<rect>

box

Rectangles and rounded squares

<path>

any shape

Arcs and custom outlines when primitives aren’t enough

Context

When to Use `<circle>`

Reach for <circle> whenever you need a true round shape in SVG.

Icons & avatars
Profile bubbles, status dots, and round icon backgrounds.
Charts & markers
Scatter points, bubble charts, and donut / pie building blocks.
Loaders & progress
Stroke-dash circles for spinners and progress rings.
Logos & badges
Layered circles for brand marks and notification dots.
Not for ovals
If width and height differ, use <ellipse> instead.

Key benefit: one element, three attributes, sharp at any size — the simplest round shape in SVG.

Hands-On

Examples Gallery

Five starter snippets using <circle>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Draw your first circle and style the outline.

Example 1 — Basic Filled Circle

Draw an orange circle with a black border, centered at (100, 100) with radius 50 inside a 200×200 canvas.

index.html

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

Try It Yourself

How It Works

The SVG sets a 200×200 drawing area. The circle’s center sits at the middle of that canvas, and radius 50 keeps the entire shape inside the bounds with room for the stroke.

Example 2 — Stroke-Only Circle

Set fill="none" so only the outline appears — useful for rings and hollow icons.

index.html

<svg width="200" height="200">
  <circle cx="100" cy="100" r="60"
          fill="none" stroke="#10b981" stroke-width="4" />
</svg>

Try It Yourself

How It Works

With no fill, the browser draws only the path of the circumference. Without a stroke, a fill="none" circle would be invisible.

📈 Practical Patterns

Combine styles, dashes, and responsive sizing.

Example 3 — Fill + Stroke Together

Use a soft fill with a stronger outline for badges and highlighted markers.

index.html

<svg width="200" height="200">
  <circle cx="100" cy="100" r="55"
          fill="#fde68a" stroke="#b45309" stroke-width="3" />
</svg>

Try It Yourself

How It Works

fill paints the interior; stroke draws on top of the edge. Half of stroke-width sits inside the radius and half outside, so leave a little margin from the SVG edge.

Example 4 — Dashed Border & Opacity

Combine stroke-dasharray and fill-opacity for softer, decorative circles.

index.html

<svg width="220" height="120">
  <circle cx="60" cy="60" r="40"
          fill="#ef4444" fill-opacity="0.35"
          stroke="#991b1b" stroke-width="2" />
  <circle cx="160" cy="60" r="40"
          fill="none" stroke="#6d28d9" stroke-width="3"
          stroke-dasharray="6 4" />
</svg>

Try It Yourself

How It Works

fill-opacity fades the fill without changing the stroke. stroke-dasharray="6 4" draws 6-unit dashes with 4-unit gaps around the circumference.

Example 5 — Responsive Circle With viewBox

Define coordinates in a viewBox, then let CSS control the displayed size so the circle scales cleanly.

index.html

<style>
  .icon { width: 96px; height: auto; display: block; }
</style>

<svg class="icon" viewBox="0 0 100 100"
     role="img" aria-label="Blue status circle">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
</svg>

Try It Yourself

How It Works

The viewBox maps user units 0–100 to whatever CSS size you give the SVG. Change .icon { width } and the circle scales without rewriting cx, cy, or r.

Use Cases

Real-world places where SVG circles show up every day.

1. Icons & Avatars

Profile bubbles, status dots, and round icon backgrounds.

Example: online indicator next to a username.

2. Data Visualisation

Scatter points, bubble charts, and donut / pie segments.

Example: plot markers on an SVG chart.

3. Loaders & Spinners

Animate stroke-dashoffset for circular progress UI.

Example: indeterminate loading ring.

4. Buttons & Badges

Notification dots, circular badges, and toggle indicators.

Example: unread count bubble.

5. Logos

Brand marks built from one or more layered circles.

Example: concentric rings as a wordmark icon.

6. Maps & Markers

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

Example: city dots on an SVG map.

Pro Tip: prefer <circle> for equal radii; switch to <ellipse> only when you need different rx and ry.

Advantages

Why draw circles with SVG instead of images or CSS alone.

1. Resolution Independent
Vectors stay sharp on any screen density — no extra assets for 2x / 3x.
2. Tiny Markup
A few attributes replace PNG downloads for simple round graphics.
3. CSS & JS Friendly
Style, animate, and update circles like any other DOM node.
4. Accessible When Labeled
Meaningful graphics can expose purpose via aria-label or <title>.
5. Composable
Layer circles with other SVG shapes for logos, charts, and icons.

Pro Tip: for UI icons, inline SVG circles plus currentColor often beat exporting separate PNGs for every theme.

Usage Tips

Follow these practices for clean, scalable SVG circles.

1. Prefer viewBox for Icons
Define geometry once, then size the SVG with CSS.
2. Leave Room for Stroke
Thick strokes can clip at the SVG edge — pad the canvas or shrink r.
3. Use currentColor
fill="currentColor" inherits the parent text color for easy theming.
4. Label Meaningful Graphics
Add role="img" and aria-label when the circle is not decorative.
5. Keep Stroke Widths Crisp
Whole-pixel strokes (1, 2, 3…) usually look sharper at common sizes.

Pro Tip: decorative circles can use aria-hidden="true"; informative ones should explain themselves to assistive tech.

Common Pitfalls

Avoid these mistakes when your circle refuses to show up.

1. Forgetting r
Radius defaults to 0, so the circle is invisible until you set it.
→ Always set a positive r (and a fill or stroke).
2. fill="none" With No Stroke
Nothing paints — outline-only circles need a visible stroke.
→ Pair fill="none" with stroke and stroke-width.
3. Overflowing the Canvas
If cx + r exceeds the SVG size (or viewBox), parts get clipped.
→ Keep the full diameter inside the drawing area, including stroke.
4. Zero-Size SVG
Missing width/height and no CSS size leaves an empty box.
→ Set dimensions on the SVG or size it with CSS.
5. Assuming Bitmap Coordinates
SVG origin is top-left; y increases downward — not Cartesian-up like some math graphs.
→ Treat (0, 0) as the top-left of the canvas.

Pro Tip: if a circle vanishes, check r, fill/stroke, and whether the center sits inside the viewBox — those three catch most issues.

🧠 How `<circle>` Is Drawn

Open an <svg> canvas

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

SVG canvas

Set the center with cx and cy

cx is horizontal position; cy is vertical. Origin (0, 0) is the top-left corner.

Position

Choose a radius (r)

r defines size in user units. Keep cx ± r and cy ± r inside the bounds to avoid clipping.

Size

Style with fill & stroke

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

Styling

A crisp, scalable circle

The browser draws the vector live from center, radius, and paint values — sharp at every zoom level.

Important Notes

cx, cy, and r default to 0 — always set a positive radius.
SVG origin is the top-left; positive y goes down.
Half of stroke-width sits outside the radius and can clip near edges.
Presentation attributes can also be set with CSS selectors.
Need unequal radii? Use <ellipse>, not <circle>.
Pair with viewBox when the graphic must scale responsively.

Quick Takeaway: center + radius + paint. Keep the circle inside the viewBox, and use CSS sizing for responsive icons.

Compatibility

Browser Support

The SVG <circle> element is supported in all modern browsers — and has been for many years — as part of SVG 1.1 basic shapes.

✓ SVG 1.1+

SVG <circle>

Usein inline SVG or external .svg files. Geometry and presentation attributes work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.

100% Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<circle> Universal

Bottom line: Safe for production sites. Prefer inline SVG or cached .svg assets; no polyfill is required for current browsers.

Wrap Up

🎉 Conclusion

SVG <circle> is the simplest way to draw a perfect round shape on the web: set cx, cy, and r, then style with fill and stroke.

Practice the five examples above, then continue to SVG Ellipse when you need different horizontal and vertical radii.

Always set a positive r, leave room for strokes, and use viewBox when the circle must scale with the layout.

View Examples Gallery Continue to Ellipse

Pro Tips

💡 Best Practices

✅ Do

Use a viewBox on the parent <svg> for responsive scaling
Add role="img" and aria-label for meaningful graphics
Pick whole-pixel stroke widths to stay crisp
Style with CSS variables or currentColor for theming
Keep cx ± r and cy ± r inside the canvas

❌ Don’t

Forget that origin (0, 0) is the top-left corner
Let thick strokes clip at the SVG edge
Use fill="none" without a stroke
Hard-code pixel sizes when you need a responsive icon
Skip the r attribute — it defaults to 0

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG `<circle>`

Draw perfect circles the SVG way.

Core concepts

○ 01

<circle>

Basic SVG shape

API

xy 02

Center

cx & cy

Position

r 03

Radius

One size value

Size

🎨 04

Paint

fill & stroke

Style

🗺 05

viewBox

Scales cleanly

Responsive

❓ Frequently Asked Questions

How do I draw a circle in SVG?

Use the <circle> element inside an <svg>. Set cx and cy for the center, 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" />.

What do cx, cy, and r mean in an SVG circle?

cx is the x-coordinate of the circle's center, cy is the y-coordinate of the center, and r is the radius. All three values default to 0 if omitted.

How do I make an SVG circle responsive?

Add a viewBox attribute to the parent <svg> instead of relying only on fixed width and height, then size the SVG with CSS. The circle scales proportionally because SVG is vector-based.

Can I style an SVG circle with CSS?

Yes. Presentation attributes like fill, stroke, and stroke-width can be set directly on <circle> or via CSS selectors. CSS lets you add hover, focus, and animation effects.

Why is my SVG circle not visible?

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.

When should I use <circle> instead of <ellipse>?

Use <circle> when both radii are equal — one r keeps the markup simpler. Use <ellipse> when you need different horizontal and vertical radii (rx and ry).

Did you Know? 🔊

An SVG <circle> is defined by a center (cx, cy) and a radius (r) — three numbers draw a perfect, resolution-independent circle. You can also animate r, cx, or stroke-dashoffset with CSS or SMIL to build loaders and pulse effects without images.

Continue to SVG Ellipse

Learn how rx and ry create ovals when a single radius isn’t enough.

Ellipse tutorial →

About the author

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

SVG <circle> Element

What You’ll Learn

<circle>

cx & cy

r

Fill & Stroke

viewBox

Vector Sharp

Introduction

Why it matters?

Three Core Attributes

Easy Styling

Accessible Markup

Scales With viewBox

📝 Syntax

Attributes

What It Draws

Minimal workflow

Coordinate tips

⚡ Quick Reference

📋 <circle> vs <ellipse> vs <rect> vs <path>

When to Use <circle>

Icons & avatars

Charts & markers

Loaders & progress

Logos & badges

Not for ovals

Examples Gallery

📚 Getting Started

Example 1 — Basic Filled Circle

How It Works

Example 2 — Stroke-Only Circle

How It Works

📈 Practical Patterns

Example 3 — Fill + Stroke Together

How It Works

Example 4 — Dashed Border & Opacity

How It Works

Example 5 — Responsive Circle With viewBox

How It Works

Use Cases

1. Icons & Avatars

2. Data Visualisation

3. Loaders & Spinners

4. Buttons & Badges

5. Logos

6. Maps & Markers

Advantages

1. Resolution Independent

2. Tiny Markup

3. CSS & JS Friendly

4. Accessible When Labeled

5. Composable

Usage Tips

1. Prefer viewBox for Icons

2. Leave Room for Stroke

3. Use currentColor

4. Label Meaningful Graphics

5. Keep Stroke Widths Crisp

Common Pitfalls

1. Forgetting r

2. fill="none" With No Stroke

3. Overflowing the Canvas

4. Zero-Size SVG

5. Assuming Bitmap Coordinates

🧠 How <circle> Is Drawn

Open an <svg> canvas

Set the center with cx and cy

Choose a radius (r)

Style with fill & stroke

A crisp, scalable circle

Important Notes

Browser Support

SVG &lt;circle&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG <circle>

📋 `<circle>` vs `<ellipse>` vs `<rect>` vs `<path>`

When to Use `<circle>`

1. Forgetting `r`

2. `fill="none"` With No Stroke

🧠 How `<circle>` Is Drawn

SVG <circle>

Five things to remember about SVG `<circle>`