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, filled and used as clip paths. All of the properties available for 'path' elements also apply to the basic shapes.
We should define the equivalent path for each shape (and for text?). The algorithm that computes the stroke shape for an element refers to the equivalent path for the element, so that it is clear for example where dashing would start.
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' and 'ry'.
Attribute definitions:
Name | Value | Lacuna value | Animatable |
---|---|---|---|
x, y | <length> | 0 | yes |
Name | Value | Lacuna value | Animatable |
---|---|---|---|
width, height | <length> | 0 | yes |
Name | Value | Lacuna value | Animatable |
---|---|---|---|
rx, ry | <length> | (see below) | yes |
For rounded rectangles, the x- and y-axis radii of the ellipse used to round off the corners of the rectangle. A negative value for either attribute is an error (see Error processing).
The values used for the x- and y-axis rounded corner radii are determined implicitly if the 'rx' or 'ry' attributes (or both) are not specified, or are specified but with invalid values. The values are also subject to clamping so that the lengths of the straight segments of the rectangle are never negative. The effective values for 'rx' and 'ry' are determined by following these steps in order:
Mathematically, a 'rect' element can be mapped to an equivalent 'path' element as follows: (Note: all coordinate and length values are first converted into user space coordinates according to Units.)
Example rect01 shows a rectangle with sharp corners. The 'rect' element is filled with yellow and stroked with navy.
Example rect02 shows two rounded rectangles. The 'rx' specifies how to round the corners of the rectangles. Note that since no value has been specified for the 'ry' attribute, it will be assigned the same value as the 'rx' attribute.
The 'circle' element defines a circle based on a center point and a radius.
Attribute definitions:
Name | Value | Lacuna value | Animatable |
---|---|---|---|
cx, cy | <length> | 0 | yes |
Name | Value | Lacuna value | Animatable |
---|---|---|---|
r | <length> | 0 | yes |
The arc of a 'circle' element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.
Saying that it progresses towards the "9 o'clock point" is slightly unclear, since it doesn't say whether it goes clockwise or anti-clockwise. Maybe "progresses" implies clockwise, but it should say either way. (There is similar wording in the 'ellipse' section too.)
Example circle01 consists of a 'circle' element that is filled with red and stroked with blue.
The 'ellipse' element defines an ellipse which is axis-aligned with the current user coordinate system based on a center point and two radii.
Attribute definitions:
Name | Value | Lacuna value | Animatable |
---|---|---|---|
cx, cy | <length> | 0 | yes |
Name | Value | Lacuna value | Animatable |
---|---|---|---|
rx, ry | <length> | 0 | yes |
The arc of an 'ellipse' element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.
Example ellipse01 below specifies the coordinates of the two ellipses in the user coordinate system established by the 'viewBox' attribute on the 'svg' element and the 'transform' property on the 'g' and 'ellipse' elements. Both ellipses use the default values of zero for the 'cx' and 'cy' attributes (the center of the ellipse). The second ellipse is rotated.
The 'line' element defines a line segment that starts at one point and ends at another.
Attribute definitions:
Name | Value | Lacuna value | Animatable |
---|---|---|---|
x1, y1 | <length> | 0 | yes |
Name | Value | Lacuna value | Animatable |
---|---|---|---|
x2, y2 | <length> | 0 | yes |
Mathematically, a 'line' element can be mapped to an equivalent 'path' element as follows: (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 line01 below specifies the coordinates of the five lines in the user coordinate system established by the 'viewBox' attribute on the 'svg' element. The lines have different thicknesses.
The 'polyline' element defines a set of connected straight line segments. Typically, 'polyline' elements define open shapes.
Attribute definitions:
Name | Value | Lacuna value | Animatable |
---|---|---|---|
points | <list-of-points> | (none) | yes |
The points that make up the polyline. All coordinate values are in the user coordinate system.
If an odd number of coordinates is provided, then the element is in error, with the same user agent behavior as occurs with an incorrectly specified 'path' element.
The lacuna value, (none), indicates that the polyline element is valid but does not render.
Mathematically, a 'polyline' element can be mapped to an equivalent 'path' element as follows:
Example polyline01 below specifies a polyline in the user coordinate system established by the 'viewBox' attribute on the 'svg' element.
The 'polygon' element defines a closed shape consisting of a set of connected straight line segments.
Attribute definitions:
Name | Value | Lacuna value | Animatable |
---|---|---|---|
points | <list-of-points> | (none) | yes |
The points that make up the polygon. All coordinate values are in the user coordinate system.
If an odd number of coordinates is provided, then the element is in error, with the same user agent behavior as occurs with an incorrectly specified 'path' element.
The lacuna value, (none), indicates that the polygon element is valid, but does not render.
Mathematically, a 'polygon' element can be mapped to an equivalent 'path' element as follows:
Example polygon01 below specifies two polygons (a star and a hexagon) in the user coordinate system established by the 'viewBox' attribute on the 'svg' element.
The following is the Extended Backus-Naur Form (EBNF) for points specifications in 'polyline' and 'polygon' elements. The following notation is used:
list-of-points: wsp* coordinate-pairs? wsp* coordinate-pairs: coordinate-pair | coordinate-pair comma-wsp coordinate-pairs coordinate-pair: coordinate comma-wsp coordinate | coordinate negative-coordinate coordinate: number number: sign? integer-constant | sign? floating-point-constant negative-coordinate: "-" integer-constant | "-" floating-point-constant 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 sign: "+" | "-" digit-sequence: digit | digit digit-sequence digit: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
If data not matching the grammar is encountered, then the points specification is in error (see Error Processing).
interface SVGRectElement : SVGGeometryElement { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedLength rx; readonly attribute SVGAnimatedLength ry; };
interface SVGCircleElement : SVGGeometryElement { readonly attribute SVGAnimatedLength cx; readonly attribute SVGAnimatedLength cy; readonly attribute SVGAnimatedLength r; };
interface SVGEllipseElement : SVGGeometryElement { readonly attribute SVGAnimatedLength cx; readonly attribute SVGAnimatedLength cy; readonly attribute SVGAnimatedLength rx; readonly attribute SVGAnimatedLength ry; };
interface SVGLineElement : SVGGeometryElement { readonly attribute SVGAnimatedLength x1; readonly attribute SVGAnimatedLength y1; readonly attribute SVGAnimatedLength x2; readonly attribute SVGAnimatedLength y2; }; SVGLineElement implements SVGMarkableElement;
The SVGAnimatedPoints interface supports elements which have a 'points' attribute which holds a list of coordinate values and which support the ability to animate that attribute.
Additionally, the 'points' attribute on
the original element accessed via the XML DOM (e.g., using the
getAttribute()
method call) will reflect any changes made to
points.
[NoInterfaceObject] interface SVGAnimatedPoints { readonly attribute SVGPointList points; readonly attribute SVGPointList animatedPoints; };
The SVGPolylineElement interface corresponds to the 'polyline' element.
interface SVGPolylineElement : SVGGeometryElement { }; SVGPolylineElement implements SVGAnimatedPoints; SVGPolylineElement implements SVGMarkableElement;
The SVGPolygonElement interface corresponds to the 'polygon' element.
interface SVGPolygonElement : SVGGeometryElement { }; SVGPolygonElement implements SVGAnimatedPoints; SVGPolygonElement implements SVGMarkableElement;