SVG shapes

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

Example 4

Last example, create a rectangle with rounded corners:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The rx and the ry attributes rounds the corners of the rectangle
SVG Ellipse - <ellipse>
Example 1

The <ellipse> element is used to create an ellipse.

An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:

Here 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 yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The cx attribute defines the x coordinate of the center of the ellipse
    The cy attribute defines the y coordinate of the center of the ellipse
    The rx attribute defines the horizontal radius
    The ry attribute defines the vertical radius

Example 2

The following example creates three ellipses on top of each other:

Here 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 yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 3

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

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