1. SVG Tutorial
2. SVG Examples
3. A Simple SVG Example
4. Displaying SVG in Web Browsers
5. SVG Icons
6. SVG Coordinate System
7. SVG svg element
8. SVG g element
9. SVG rect element
10. SVG circle element
11. SVG ellipse element
12. SVG line element
13. SVG polyline element
14. SVG polygon element
15. SVG path element
16. SVG marker element
17. SVG text element
18. SVG tspan element
19. SVG tref element
20. SVG textpath element
21. SVG switch element
22. SVG image element
23. SVG a element
24. SVG defs Elements
25. SVG symbol Element
26. SVG use Element
27. SVG and CSS - Cascading Style Sheets
28. SVG Stroke
29. SVG Fill
30. SVG Viewport and View Box
31. SVG Animation
32. SVG Scripting
33. SVG Transformation
34. SVG Gradients
35. SVG Fill Patterns
36. SVG Clip Path
37. SVG Masks
38. SVG Filters

• Video Version
• SVG ellipse Example
• stroke-width
• stroke-dasharray
• fill
• fill-opacity

The SVG <ellipse> element is used to draw ellipses. An ellipse is a circle that does not have equal height and width. Its radius in the x and y directions are different, in other words.

Video Version

If you prefer to watch this tutorial as video, here is a screencast:

SVG ellipse Example

Here is an SVG ellipse example:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <ellipse cx="40" cy="40" rx="30" ry="15"
           style="stroke:#006600; fill:#00cc00"/>

</svg>

Here is the resulting image:

The ellipse is centered in cx , cy like the circle. But the radius in the x and y directions are specified by two attributes, not one: The rx and ry attributes. As you can see, the rx attribute has a higher value than the ry attribute, making the ellipse wider than it is tall. Setting the rx and ry attributes the same number would result in a regular circle.

stroke-width

You can set the width of the stroke of the ellipse using the stroke-width style property. Here is an example:

<ellipse cx="50" cy="50" rx="40" ry="30"
         style="stroke: #ff0000;
               stroke-width: 5;
               fill: none;
        "/>

Here is how the resulting ellipse looks when rendered:

stroke-dasharray

You can make the stroke of an ellipse dashed using the stroke-dasharray style property. Here is an example:

<ellipse cx="50" cy="50" rx="40" ry="30"
         style="stroke: #ff0000;
               stroke-width: 5;
               stroke-dasharray: 10 5;
               fill: none;
        "/>

This example sets a dash width of 10, and a dash space (space between dashes) of 5. Here is how the ellipse looks when rendered:

stroke-opacity

You can make the stroke of an SVG ellipse semi transparent using the stroke-opacity style property. Here is an example:

<ellipse cx="50" cy="50" rx="40" ry="30"
         style="stroke: #ff0000;
               stroke-width: 5;
               fill: none;
        "/>

<ellipse cx="60" cy="60" rx="40" ry="30"
         style="stroke: #0000ff;
               stroke-width: 5;
               stroke-opacity: 0.5;
               fill: none;
        "/>

Here is how these SVG ellipses look when rendered:

Notice how the second (blue) ellipse is transparent and how you can see the red ellipse through its stroke.

fill

The fill style property is used to set how the ellipse is to be filled. Here is an example:

<ellipse cx="50" cy="50" rx="40" ry="30"
         style="stroke: #ff0000;
               stroke-width: 5;
               fill: #ff6666;
        "/>

Here is how this SVG ellipse look when rendered:

fill-opacity

The fill-opacity style property can be used to set the opacity (transparency) of the fill color of an ellipse. Here is an example:

<ellipse cx="50" cy="50" rx="40" ry="30"
         style="stroke: #ff0000;
               stroke-width: 5;
               fill: none;
        "/>

<ellipse cx="60" cy="60" rx="40" ry="30"
         style="stroke: none;
               fill: #0000ff;
               fill-opacity: 0.5;
        "/>

Here is how these ellipses look when rendered:

Notice how the second (blue) ellipse is semi-transparent, making the red ellipse visible through it.