SVG contains the following set of basic shape elements:
Mathematically, these shape elements are equivalent to a 'path' element that would construct the same shape. The basic shapes may be stroked, and filled. All of the properties available for 'path' elements also apply to the basic shapes.
The 'rect' element defines a
rectangle which is axis-aligned with the current user coordinate system .
Rounded rectangles can be achieved by setting appropriate values
for attributes rx 'rx' and ry 'ry' .
<define name='rect'> <element name='rect'> <ref name='rect.AT'/> <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> </element> </define> <define name='rect.AT' combine='interleave'> <ref name='svg.ShapeCommon.attr'/> <ref name='svg.XYWH.attr'/> <ref name='svg.RxRyCommon.attr'/> </define>
Attribute definitions:
The x-axis coordinate of the side of the rectangle which has the
smaller x-axis coordinate value in the current user coordinate
system. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
The y-axis coordinate of the side of the rectangle which has the
smaller y-axis coordinate value in the current user coordinate
system. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
The width of the rectangle. A negative value is unsupported. unsupported . A
value of zero disables rendering of the element. If the attribute is not specified, the effect is as if
a The lacuna value of "0" were
specified. is
'0'
.
Animatable : yes.
The height of the rectangle. A negative value is unsupported. unsupported . A
value of zero disables rendering of the element. If the attribute is not specified, the effect is as if
a The lacuna value of "0" were
specified. is
'0'
.
Animatable : yes.
For rounded rectangles, the x-axis radius of the ellipse used to
round off the corners of the rectangle. A negative value is
unsupported. unsupported . See
the notes below about what happens if the attribute is not
specified.
Animatable : yes.
For rounded rectangles, the y-axis radius of the ellipse used to
round off the corners of the rectangle. A negative value is
unsupported. unsupported . See
the notes below about what happens if the attribute is not
specified.
Animatable : yes.
See attribute definition for description.
Animatable : Yes yes.
See definition .
If a properly specified value is provided for rx 'rx' but not for ry 'ry' , then the user agent must process
the 'rect' element with the effective value
for ry 'ry' as equal to rx 'rx' . If a properly specified value is
provided for ry 'ry' but not for rx 'rx' , then the user agent must process
the 'rect' element with the effective value
for rx 'rx' as equal to ry 'ry' . If neither rx 'rx' nor ry 'ry' has a properly specified value,
then the user agent must process the 'rect' element as if no rounding had been
specified, resulting in square corners. If rx 'rx' is greater than half of the width
of the rectangle, then the user agent must process the 'rect' element with the effective value
for rx 'rx' as half of the width of the
rectangle. If ry 'ry' is greater than half of the height
of the rectangle, then the user agent must process the 'rect' element with the effective value
for ry 'ry' as half of the height of the
rectangle.
A 'rect' element, taking its rounded
corners into account, must be rendered in a way that produces the
same result as if the following path
outline were specified instead: (Note: instead
(note: all coordinate and length values are first converted
into user space coordinates according to Units .)
):
In case the rx 'rx' and ry 'ry' attributes are not specified or
set to a value of zero, the elliptical arc commands should be
omitted.
Example 09_01 shows a rectangle with sharp corners. The 'rect' element is filled with yellow and stroked with navy.
<?xml version="1.0"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <desc>Example rect01 - rectangle with sharp corners</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <rect x="400" y="100" width="400" height="200" fill="yellow" stroke="navy" stroke-width="10" /> </svg>
Example
09_02 shows two rounded rectangles. The rx 'rx' specifies how to round the corners
of the rectangles. Note that since no value has been specified for
the ry 'ry' attribute, it will be assigned the
same value as the rx 'rx' attribute.
<?xml version="1.0"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <desc>Example rect02 - rounded rectangles</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <rect x="100" y="100" width="400" height="200" rx="50" fill="green" /> <g transform="translate(700 210) rotate(-30)"> <rect x="0" y="0" width="400" height="200" rx="50" fill="none" stroke="purple" stroke-width="30" /> </g> </svg>
The 'circle' element defines a circle based on a center point and a radius.
Within the current user coordinate system , stroking operations on a circle begin at the point (cx+r,cy) and then proceed through the points (cx,cy+r), (cx-r,cy), (cx,cy-r) and finally back to (cx+r,cy). For stroking operations, there is only one line segment which has its beginning joined to its end.
<define name='circle'> <element name='circle'> <ref name='circle.AT'/> <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> </element> </define> <define name='circle.AT' combine='interleave'> <ref name='svg.ShapeCommon.attr'/> <ref name='svg.CxCy.attr'/> <ref name='svg.R.attr'/> </define>
Attribute definitions:
The x-axis coordinate of the center of the circle. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
The y-axis coordinate of the center of the circle. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
The radius of the circle. A negative value is unsupported. unsupported . A
value of zero disables rendering of the element. If the attribute is not specified, the effect is as if
a The lacuna value of "0" were
specified. is
'0'
.
Animatable : yes.
See attribute definition for description.
Animatable : Yes yes.
See definition .
Example circle01 consists of a 'circle' element that is filled with red and stroked with blue.
<?xml version="1.0"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <desc>Example circle01 - circle filled with red and stroked with blue</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" /> </svg>
The 'ellipse' element defines an ellipse which is axis-aligned with the current user coordinate system based on a center point and two radii.
Within the current user coordinate system , stroking operations on a ellipse begin at the point (cx+rx,cy) and then proceed through the points (cx,cy+ry), (cx-rx,cy), (cx,cy-ry) and finally back to (cx+rx,cy). For stroking operations, there is only one line segment which has its beginning joined to its end.
<define name='ellipse'> <element name='ellipse'> <ref name='ellipse.AT'/> <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> </element> </define> <define name='ellipse.AT' combine='interleave'> <ref name='svg.ShapeCommon.attr'/> <ref name='svg.RxRyCommon.attr'/> <ref name='svg.CxCy.attr'/> </define>
Attribute definitions:
The x-axis coordinate of the center of the ellipse. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
The y-axis coordinate of the center of the ellipse. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
The x-axis radius of the ellipse. A negative value is
unsupported. unsupported . A
value of zero disables rendering of the element. If the attribute is not specified, the effect is as if
a The lacuna value of "0" were
specified. is
'0'
.
Animatable : yes.
The y-axis radius of the ellipse. A negative value is
unsupported. unsupported . A
value of zero disables rendering of the element. If the attribute is not specified, the effect is as if
a The lacuna value of "0" were
specified. is
'0'
.
Animatable : yes.
See attribute definition for description.
Animatable : Yes yes.
See definition .
Example 09_04 below specifies
the coordinates of the two ellipses in the user coordinate system
established by the viewBox 'viewBox' attribute on the 'svg' element and the transform 'transform' attribute on the 'g'
and 'ellipse' elements. Both ellipses use the
default lacuna value of zero for the cx 'cx' and cy 'cy' attributes (the center of the
ellipse). The second ellipse is rotated.
<?xml version="1.0"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <desc>Example ellipse01 - examples of ellipses</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g transform="translate(300 200)"> <ellipse rx="250" ry="100" fill="red" /> </g> <ellipse transform="translate(900 200) rotate(-30)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" /> </svg>
The 'line' element defines a line segment that starts at one point and ends at another.
<define name='line'> <element name='line'> <ref name='line.AT'/> <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> </element> </define> <define name='line.AT' combine='interleave'> <ref name='svg.ShapeCommon.attr'/> <ref name='svg.X12Y12.attr'/> </define>
Attribute definitions:
The x-axis coordinate of the start of the line. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
The y-axis coordinate of the start of the line. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
The x-axis coordinate of the end of the line. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
The y-axis coordinate of the end of the line. The If the attribute
is not specified, the effect is as if a lacuna value of "0" were specified. is '0' .
Animatable : yes.
See attribute definition for description.
Animatable : Yes yes.
See definition .
A 'line' element must be rendered in a way
that produces the same result as if the following path were specified instead:
(Note: instead (note: all
coordinate and length values are first converted into user space
coordinates according to Units
.) ):
Because 'line' elements are single lines and thus are geometrically one-dimensional, they have no interior; thus, 'line' elements are never filled (see the 'fill' property).
Example
09_05 below specifies the coordinates of the five lines in
the user coordinate system established by the viewBox 'viewBox' attribute on the 'svg' element. The lines have different
thicknesses.
<?xml version="1.0"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <desc>Example line01 - lines expressed in user coordinates</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g stroke="green" > <line x1="100" y1="300" x2="300" y2="100" stroke-width="5" /> <line x1="300" y1="300" x2="500" y2="100" stroke-width="10" /> <line x1="500" y1="300" x2="700" y2="100" stroke-width="15" /> <line x1="700" y1="300" x2="900" y2="100" stroke-width="20" /> <line x1="900" y1="300" x2="1100" y2="100" stroke-width="25" /> </g> </svg>
The 'polyline' element defines a set of connected straight line segments. Typically, 'polyline' elements define open shapes.
<define name='polyline'> <element name='polyline'> <ref name='polyCommon.AT'/> <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> </element> </define> <define name='polyCommon.AT' combine='interleave'> <ref name='svg.ShapeCommon.attr'/> <optional> <attribute name='points' svg:animatable='true' svg:inheritable='false'> <ref name='Points.datatype'/> </attribute> </optional> </define>
Attribute definitions:
The points that make up the polyline. All coordinate values are in the user coordinate system.
An empty attribute value (points="")
( points="" )
disables rendering of the element. If the
attribute The lacuna value is not specified, the effect is
as if an empty string (points="") was
specified. string.
Animatable : yes.
See attribute definition for description.
Animatable : Yes yes.
See definition .
If an odd number of coordinates is provided, then the element is treated as if the attribute had not been specified.
A 'polyline' element must be rendered in a way that produces the same result as if the following path were specified instead:
Example
09_06 below specifies a polyline in the user coordinate
system established by the viewBox 'viewBox' attribute on the 'svg' element.
<?xml version="1.0"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <desc>Example polyline01 - increasingly larger bars</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polyline fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" /> </svg>
The 'polygon' element defines a closed shape consisting of a set of connected straight line segments.
<define name='polygon'> <element name='polygon'> <ref name='polyCommon.AT'/> <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> </element> </define>
Attribute definitions:
The points that make up the polygon. All coordinate values are in the user coordinate system.
An empty attribute value (points="")
( points="" )
disables rendering of the element. If the
attribute The lacuna value is not specified, the effect is
as if an empty string (points="") was
specified. string.
Animatable : yes.
See attribute definition for description.
Animatable : Yes yes.
See definition .
If an odd number of coordinates is provided, then provided
in the element 'points'
attribute, then it is treated as
if the attribute had not been
specified. an unsupported value
.
A 'polygon' element must be rendered in a way that produces the same result as if the following path were specified instead:
Example 09_07 below specifies two polygons (a star and a hexagon) in the user coordinate system established by the 'viewBox' attribute on the 'svg' element.
<?xml version="1.0"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> <desc>Example polygon01 - star and hexagon</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /> </svg>
The following is an EBNF grammar for <points-data> values on 'polyline' and 'polygon' elements [ EBNF ]:
points-data: wsp* coordinate-pairs? wsp* coordinate-pairs: coordinate-pair | coordinate-pair comma-wsp coordinate-pairs coordinate-pair: coordinate comma-wsp coordinate coordinate: number number: sign? integer-constant | sign? floating-point-constant comma-wsp: (wsp+ comma? wsp*) | (comma wsp*) comma: "," integer-constant: digit-sequence floating-point-constant: fractional-constant exponent? | digit-sequence exponent fractional-constant: digit-sequence? "." digit-sequence | digit-sequence "." exponent: ( "e" | "E" ) sign? digit-sequence s