Latest web development tutorials

SVG ellipse

SVG ellipse - <ellipse>

Example 1

lt; ellipse> element is used to create an ellipse:

Oval and round very similar. Except that the ellipse has a different radius of x and y, and x and y radius of the circle is the same:

Here is the SVG Code:

Examples

<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"

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

  • x coordinate CX attributes defined center of the ellipse
  • y coordinate CY attribute defines the center of the ellipse
  • Horizontal radius RX attribute definition
  • Vertical radius RY attribute definition

Example 2

The following example creates three and heaped on the oval:

Here is the SVG Code:

Examples

<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"

For Opera users: view SVG file (right-click on the preview source SVG graphics).


Example 3

The following example combines two ellipse (a yellow and a white):

Here is the SVG Code:

Examples

<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"/>
</svg>

try it"

For Opera users: view SVG file (right-click on the preview source SVG graphics).