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.
<?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.
<circle fill="orange"
stroke="black"
stroke-width="3"
cx="40"
cy="25"
r="20"/>
For more information, see the circle element reference page.
<ellipse stroke="orange"
cx="100"
cy="60"
rx="75"
ry="50"/>
For more information, see the ellipse element reference page.
<!-- 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.
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.
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.