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:

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>

SVG rectangle

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

SVG rectange with rounded sides

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

SVG circle

For more information, see the circle element reference page.

Ellipses: The ellipse Element


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

SVG ellipse

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

Three SVG lines

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

SVG polyline with two black borders

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

SVG polygon (triangle) with three black borders

For more information, see the polygon element reference page.

Samples and tutorials

How to Add SVG to a Webpage

Related topics

SVG

 

 

Show:
© 2014 Microsoft