SVG <ellipse> Element

Beginner

⏱️ 10 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Basic Shape

SVG Ellipse tutorial illustration showing the cx, cy, rx, and ry attributes

Overview

What You’ll Learn

SVG’s <ellipse> draws an oval from a center point and two radii — horizontal (rx) and vertical (ry). This tutorial covers positioning, sizing, styling with fill / stroke, responsive viewBox usage, five worked examples, and how <ellipse> compares to <circle> and other basic shapes.

<ellipse>

Core element

Place <ellipse> inside an <svg> canvas to draw an oval.

cx & cy

Center point

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

rx & ry

Two radii

rx is half-width; ry is half-height — differ them for an oval.

Fill & Stroke

Presentation

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

viewBox

Responsive

Scale ellipses cleanly with a viewBox and CSS sizing.

vs Circle

When to switch

Use <circle> when radii are equal; use <ellipse> when they differ.

Introduction

SVG’s <ellipse> is the stretched cousin of <circle>. Instead of one radius, you set horizontal and vertical radii so the shape can be wide, tall, or perfectly round when both match.

Ellipses appear in icons, diagrams, chart markers, soft UI blobs, and decorative backgrounds. Once you know cx, cy, rx, ry, and a few presentation attributes, most oval graphics are a few lines of markup.

Why it matters?

Bitmap ovals blur when scaled. SVG ellipses stay sharp, stay small in file size, and can be styled or animated with CSS and JavaScript like any other DOM element.

Key Highlights

Four Core Attributes

cx, cy, rx, and ry 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 ellipse conveys meaning.

Scales With viewBox

One drawing scales to any CSS size without rewriting coordinates.

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

Foundation

📝 Syntax

Basic form of the SVG ellipse element:

index.html

<svg width="200" height="150">
  <ellipse cx="100" cy="75" rx="80" ry="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`.
`rx`	Length / number	Horizontal radius (half-width). Defaults to `0`.
`ry`	Length / number	Vertical radius (half-height). Defaults to `0`.
`fill`	Paint	Interior color (or `none` for outline-only).
`stroke`	Paint	Outline color of the ellipse.
`stroke-width`	Length / number	Outline thickness in user units.

What It Draws

Result	Details
vector ellipse	Renders an oval (or a circle when `rx === ry`) using the center and two radii you provide.

Minimal workflow

index.html

<svg width="200" height="150" viewBox="0 0 200 150">
  <ellipse cx="100" cy="75" rx="80" ry="50"
           fill="green" stroke="black" stroke-width="2" />
</svg>

Coordinate tips

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

Cheat Sheet

⚡ Quick Reference

Goal	Code
Basic ellipse	`<ellipse cx="100" cy="75" rx="80" ry="50" />`
Wide oval	`rx="60" ry="25"`
Tall oval	`rx="25" ry="55"`
Stroke only	`fill="none" stroke="#b45309" stroke-width="3"`
Looks like a circle	`rx="40" ry="40"` (or prefer `<circle>`)
Responsive SVG	`<svg viewBox="0 0 200 150">...` + CSS width

Compare

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

All draw shapes — pick the simplest element that fits.

two radii

Ovals with cx, cy, rx, ry

one radius

Perfect round shape with a single r

<rect>

box

Rectangles and rounded squares

<path>

any shape

Arcs and custom outlines when primitives aren’t enough

Context

When to Use `<ellipse>`

Reach for <ellipse> whenever width and height of the round shape should differ.

Wide or tall ovals
Buttons, badges, and soft blobs that aren’t perfect circles.
Diagrams & charts
Node shapes, orbit paths, and stretched scatter markers.
Icons & logos
Brand marks and illustrations built from layered ovals.
Soft UI backgrounds
Decorative ellipses behind cards and hero sections.
Not for equal radii
If rx equals ry, prefer <circle> for clearer intent.

Key benefit: independent horizontal and vertical radii — the simplest oval in SVG.

Hands-On

Examples Gallery

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

📚 Getting Started

Draw your first ellipse and vary the radii.

Example 1 — Basic Filled Ellipse

Draw a green ellipse with a black border, centered at (100, 75) with rx=80 and ry=50.

index.html

<svg width="200" height="150">
  <ellipse cx="100" cy="75" rx="80" ry="50"
           fill="green" stroke="black" stroke-width="2" />
</svg>

Try It Yourself

How It Works

The SVG is 200×150. The center sits in the middle, and the larger rx stretches the shape horizontally while ry keeps it shorter vertically.

Example 2 — Wide vs Tall Ellipse

Compare a wide oval (rx > ry) with a tall oval (ry > rx) side by side.

index.html

<svg width="240" height="120">
  <ellipse cx="70" cy="60" rx="55" ry="22" fill="#3b82f6" />
  <ellipse cx="180" cy="60" rx="22" ry="50" fill="#10b981" />
</svg>

Try It Yourself

How It Works

Changing only rx and ry flips the aspect ratio. The same center API as a circle — but two size knobs instead of one.

📈 Practical Patterns

Outline styles, dashes, and responsive sizing.

Example 3 — Stroke-Only Ellipse

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

index.html

<svg width="200" height="120">
  <ellipse cx="100" cy="60" rx="70" ry="40"
           fill="none" stroke="#b45309" stroke-width="4" />
</svg>

Try It Yourself

How It Works

With no fill, the browser draws only the elliptical path. Without a stroke, a fill="none" ellipse would be invisible.

Example 4 — Dashed Border & Opacity

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

index.html

<svg width="240" height="100">
  <ellipse cx="70" cy="50" rx="55" ry="30"
           fill="#ef4444" fill-opacity="0.35"
           stroke="#991b1b" stroke-width="2" />
  <ellipse cx="175" cy="50" rx="55" ry="30"
           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 dashed outlines around the ellipse.

Example 5 — Responsive Ellipse With viewBox

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

index.html

<style>
  .badge { width: 120px; height: auto; display: block; }
</style>

<svg class="badge" viewBox="0 0 100 60"
     role="img" aria-label="Blue oval badge">
  <ellipse cx="50" cy="30" rx="42" ry="22" fill="#3b82f6" />
</svg>

Try It Yourself

How It Works

The viewBox maps user units to whatever CSS size you give the SVG. Change .badge { width } and the ellipse scales without rewriting cx, cy, rx, or ry.

Use Cases

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

1. Soft UI Shapes

Background blobs, pill highlights, and decorative ovals.

Example: hero accent behind a headline.

2. Data Visualisation

Stretched markers, orbit diagrams, and oval nodes.

Example: category bubbles on a chart.

3. Icons & Avatars

Face outlines, speech bubbles, and badge frames.

Example: oval avatar clip backgrounds.

4. Logos

Brand marks built from one or more layered ellipses.

Example: concentric ovals as a wordmark icon.

5. Motion & Loaders

Animated dashes along an elliptical path.

Example: orbiting progress ring.

6. Education

Geometry lessons contrasting circles and ellipses.

Example: interactive rx / ry demos.

Pro Tip: if rx and ry are always equal, switch to <circle> — the markup reads clearer and stays shorter.

Advantages

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

1. Independent Radii
Control width and height separately without transforms.
2. Resolution Independent
Vectors stay sharp on any screen density.
3. Tiny Markup
A few attributes replace PNG downloads for simple ovals.
4. CSS & JS Friendly
Style, animate, and update ellipses like any other DOM node.
5. Accessible When Labeled
Meaningful graphics can expose purpose via aria-label or <title>.

Pro Tip: animate rx / ry for morphing blobs — often simpler than warping a circle with transforms.

Usage Tips

Follow these practices for clean, scalable SVG ellipses.

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 radii.
3. Use currentColor
fill="currentColor" inherits the parent text color for easy theming.
4. Switch to Circle When Equal
If both radii stay equal, <circle> documents intent better.
5. Label Meaningful Graphics
Add role="img" and aria-label when the ellipse is not decorative.

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

Common Pitfalls

Avoid these mistakes when your ellipse refuses to show up.

1. Forgetting rx or ry
Either radius defaults to 0, so the ellipse is invisible until both are set.
→ Always set positive rx and ry (and a fill or stroke).
2. fill="none" With No Stroke
Nothing paints — outline-only ellipses need a visible stroke.
→ Pair fill="none" with stroke and stroke-width.
3. Overflowing the Canvas
If cx + rx or cy + ry exceeds the SVG size, parts get clipped.
→ Keep the full oval 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. Using Ellipse for Perfect Circles
Equal radii work, but <circle> is clearer and shorter.
→ Prefer <circle r="..."> when both radii match.

Pro Tip: if an ellipse vanishes, check both radii, fill/stroke, and whether the center sits inside the viewBox — those catch most issues.

🧠 How `<ellipse>` 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 two radii (rx, ry)

rx is half the width; ry is half the height. Both must be greater than zero or nothing draws.

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 oval

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

Important Notes

rx and ry default to 0 — always set both to positive values.
SVG origin is the top-left; positive y goes down.
Half of stroke-width sits outside the radii and can clip near edges.
Presentation attributes can also be set with CSS selectors.
Equal radii? Prefer <circle> for clearer intent.
Pair with viewBox when the graphic must scale responsively.

Quick Takeaway: center + two radii + paint. Keep the oval inside the viewBox, and use CSS sizing for responsive icons.

Compatibility

Browser Support

The SVG <ellipse> 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 <ellipse>

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

<ellipse> 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 <ellipse> is the simplest way to draw ovals on the web: set cx, cy, rx, and ry, then style with fill and stroke.

Practice the five examples above, then continue to SVG Line to draw straight segments between two points.

Always set positive rx and ry, leave room for strokes, and prefer <circle> when both radii are equal.

View Examples Gallery Continue to Line

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 ± rx and cy ± ry 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 rx or ry — both default to 0

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG `<ellipse>`

Draw ovals the SVG way.

Core concepts

⬬ 01

<ellipse>

Basic SVG shape

API

xy 02

Center

cx & cy

Position

2r 03

Radii

rx & ry

Size

🎨 04

Paint

fill & stroke

Style

🗺 05

viewBox

Scales cleanly

Responsive

❓ Frequently Asked Questions

How do I draw an ellipse in SVG?

Use the <ellipse> element inside an <svg>. Set cx and cy for the center, rx for the horizontal radius, and ry for the vertical radius. Example: <ellipse cx="100" cy="75" rx="80" ry="50" fill="green" stroke="black" stroke-width="2" />.

What do cx, cy, rx, and ry mean in an SVG ellipse?

cx and cy define the center coordinates. rx is the horizontal radius (x-axis) and ry is the vertical radius (y-axis). If rx or ry is missing or 0, the ellipse will not render.

How is <ellipse> different from <circle>?

A circle uses one radius (r). An ellipse uses two radii (rx and ry). When rx equals ry, an ellipse looks like a circle — but <circle> is the clearer choice when both radii are equal.

How do I make an SVG ellipse responsive?

Add a viewBox to the parent <svg>, then size the SVG with CSS. The ellipse scales proportionally because SVG is vector-based.

Can I style an SVG ellipse with CSS?

Yes. Presentation attributes like fill, stroke, and stroke-width can be set on <ellipse> or via CSS selectors for hover, focus, and animation effects.

Why is my SVG ellipse not visible?

Common causes: rx or ry is 0 or missing, the shape is outside the viewBox, fill is none with no stroke, or the parent <svg> has zero width or height.

Did you Know? 🔊

An SVG <ellipse> is defined by a center (cx, cy) and two radii (rx, ry) — when those radii differ, you get an oval instead of a circle. You can also rotate an ellipse with transform="rotate(...)" when you need a tilted oval without changing the radii.

Continue to SVG Line

Learn how x1, y1, x2, and y2 draw straight vector lines.

Line 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 Circle SVG Line

SVG <ellipse> Element

What You’ll Learn

<ellipse>

cx & cy

rx & ry

Fill & Stroke

viewBox

vs Circle

Introduction

Why it matters?

Four Core Attributes

Easy Styling

Accessible Markup

Scales With viewBox

📝 Syntax

Attributes

What It Draws

Minimal workflow

Coordinate tips

⚡ Quick Reference

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

When to Use <ellipse>

Wide or tall ovals

Diagrams & charts

Icons & logos

Soft UI backgrounds

Not for equal radii

Examples Gallery

📚 Getting Started

Example 1 — Basic Filled Ellipse

How It Works

Example 2 — Wide vs Tall Ellipse

How It Works

📈 Practical Patterns

Example 3 — Stroke-Only Ellipse

How It Works

Example 4 — Dashed Border & Opacity

How It Works

Example 5 — Responsive Ellipse With viewBox

How It Works

Use Cases

1. Soft UI Shapes

2. Data Visualisation

3. Icons & Avatars

4. Logos

5. Motion & Loaders

6. Education

Advantages

1. Independent Radii

2. Resolution Independent

3. Tiny Markup

4. CSS & JS Friendly

5. Accessible When Labeled

Usage Tips

1. Prefer viewBox for Icons

2. Leave Room for Stroke

3. Use currentColor

4. Switch to Circle When Equal

5. Label Meaningful Graphics

Common Pitfalls

1. Forgetting rx or ry

2. fill="none" With No Stroke

3. Overflowing the Canvas

4. Zero-Size SVG

5. Using Ellipse for Perfect Circles

🧠 How <ellipse> Is Drawn

Open an <svg> canvas

Set the center with cx and cy

Choose two radii (rx, ry)

Style with fill & stroke

A crisp, scalable oval

Important Notes

Browser Support

SVG &lt;ellipse&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG <ellipse>

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

When to Use `<ellipse>`

1. Forgetting `rx` or `ry`

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

🧠 How `<ellipse>` Is Drawn

SVG <ellipse>

Five things to remember about SVG `<ellipse>`