Basic shapes

Windows Internet Explorer 9 introduced support for the parsing and rendering of all the basic shapes elements, their attributes, and associated DOM interfaces, as specified in the Basic Shapes module of the SVG 1.1 (Second Edition) specification. The set of basic shapes consists of the following shapes elements:

• rect
• circle
• ellipse
• line
• polyline
• polygon

The associated DOM interfaces of these objects are also supported. Following are examples of each of the aforementioned shapes elements. After the markup is a screenshot of the corresponding result in Internet Explorer 9.

Rectangles: The rect Element

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect fill="orange"
    stroke="black"
    width="150"
    height="75"
    x="50"
    y="25" />

 </svg>

<rect fill="orange"
    stroke="black"
    width="150"
    height="100"
    x="50"
    y="25"
    rx="10"
    ry="50"/>

For more information, see the rect element reference page.

Circles: The circle Element

<circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

For more information, see the circle element reference page.

Ellipses: The ellipse Element

<ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

For more information, see the ellipse element reference page.

Lines: The line Element

<!-- vertical -->
<line x1="0.7cm"
    y1="1cm"
    x2="0.7cm"
    y2="2.0cm"
    style="stroke:
    blue;"/>

<!-- diagonal -->
<line x1="30"
    y1="30"
    x2="150"
    y2="85"
    stroke="red"
    stroke-width="4"/>

<!-- horizontal -->
<line x1="50pt"
    y1="25pt"
    x2="150pt"
    y2="25pt"
    stroke="yellow"
    stroke-width="3"/>

For more information, see the line element reference page.

Polylines: The polyline Element

A “polyline” is defined in SVG to be several connected lines, often forming an “open” shape, or a polygon with one or more missing sides or non-convex shapes.

<polyline points="15, 5, 100 8,3 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

For more information, see the polyline element reference page.

Polygons: The polygon Element

A polygon is a closed shape.

<polygon points="15, 5, 100 8,6 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

For more information, see the polygon element reference page.

Samples and tutorials

How to Add SVG to a Webpage

Related topics

SVG