SVG Ellipse | Beginner Tutorial

Beginner Tutorial -- Learning Not Just Technology, But Dreams!

• Home
• HTML
• JavaScript
• CSS
• Vue
• React
• Python3
• Java
• C
• C++
• C#
• AI
• Go
• SQL
• Linux
• VS Code
• Bootstrap
• Git
• Local Bookmarks

• Home
• HTML
• CSS
• JS
• Local Bookmarks
• Search

• Vue3 Tutorial
• Vue2 Tutorial

• Bootstrap3
• Bootstrap4
• Bootstrap5

• Machine Learning
• PyTorch
• TensorFlow
• Sklearn
• NLP
• AI Agent
• Ollama
• Coding Plan

SVG Tutorial

SVG TutorialSVG IntroductionSVG VSCodeSVG Basic SyntaxSVG in HTMLSVG RectangleSVG CircleSVG EllipseSVG LineSVG PolygonSVG PolylineSVG PathSVG TextSVG Stroke PropertiesSVG FiltersSVG Blur EffectsSVG ShadowSVG Gradient - LinearSVG Gradient- RadialSVG ExamplesSVG Reference Manual

SVG Circle SVG Line

Dive Deeper

Programming

Software

Web Services

Computer Science

Search

Scripts

Scripting Languages

Web Service

Development Tools

Web Design and Development

SVG Ellipse <ellipse>

The <ellipse> element in SVG is used to draw ellipses, which is one of the commonly used basic shapes in SVG.

Using the <ellipse> element can create elliptical graphics, and you can control the position, size and style of the ellipse by setting attributes.

Basic Syntax

<ellipse cx="x-coordinate" <!-- x coordinate of the ellipse center point --> cy="y-coordinate" <!-- y coordinate of the ellipse center point --> rx="x-radius" <!-- radius of the ellipse horizontal axis --> ry="y-radius" <!-- radius of the ellipse vertical axis --> fill="fill-color" <!-- fill color of the ellipse --> stroke="stroke-color" <!-- stroke color of the ellipse --> stroke-width="width" <!-- stroke width of the ellipse --> />

Attribute explanation:

• The cx and cy attributes define the center point coordinates of the ellipse, i.e., the center position of the ellipse.
• The rx attribute defines the radius of the ellipse's horizontal axis (x-axis).
• The ry attribute defines the radius of the ellipse's vertical axis (y-axis).
• The fill attribute defines the fill color of the ellipse.
• The stroke attribute defines the stroke color of the ellipse.
• The stroke-width attribute defines the stroke width of the ellipse.

The following code draws an ellipse with blue fill, black stroke, horizontal axis radius of 80 pixels, and vertical axis radius of 50 pixels. The center point of the ellipse has coordinates (100, 100).

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="100" rx="80" ry="50" fill="blue" stroke="black" stroke-width="2" /></svg>

Example 1

An ellipse is very similar to a circle, except that an ellipse has different x and y radii, while a circle has the same x and y radii.

Below is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg"version="1.1"><ellipse cx="300"cy="80"rx="100"ry="50"style="fill:yellow;stroke:purple;stroke-width:2"/></svg>

Try it »

Click to view: View SVG File.

Code explanation:

• CX attribute defines the x coordinate of the ellipse center.
• CY attribute defines the y coordinate of the ellipse center.
• RX attribute defines the horizontal radius.
• RY attribute defines the vertical radius.

Example 2

The following example creates three stacked ellipses.

Below is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg"version="1.1"><ellipse cx="240"cy="100"rx="220"ry="30"style="fill:purple"/><ellipse cx="220"cy="70"rx="190"ry="20"style="fill:lime"/><ellipse cx="210"cy="45"rx="170"ry="15"style="fill:yellow"/></svg>

Try it »

Click to view: View SVG File.

---

Example 3

The following example combines two ellipses (one yellow and one white).

Below is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg"version="1.1"><ellipse cx="240"cy="50"rx="220"ry="30"style="fill:yellow"/><ellipse cx="220"cy="50"rx="190"ry="20"style="fill:white"/>