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 basicshapes may be stroked, filled and used as clip paths. All of theproperties available for‘path’ elements also apply to the basicshapes.
Theequivalent path and algorithm to compute the stroke for each shape are defined in the shape sections below.
The‘rect’ element defines a rectangle which is axis-alignedwith the currentuser coordinate system. Rounded rectangles can be achieved by settingnon-zero values for therx andry geometric properties.
Thex andy coordinates refer to the left and top edges of the rectangle,in the current user coordinate system.
Thewidth andheight properties define the overall width and height of the rectangle.A negative value for either property is illegal andmust be ignored as a parsing error.A computed value of zero for either dimension disables rendering of the element.
For rounded rectangles,the computed values of therx andry properties definethe x- and y-axis radii of elliptical arcs used to round off the corners of the rectangle.The arc are always symmetrical along both horizontal and vertical axis; to create a rectangle with uneven corner rounding, define the shape explicitly with a‘path’.A negative value for either property is illegal andmust be ignored as a parsing error.A computed value of zero for either dimension,or a computed value ofauto forboth dimensions,results in a rectangle without corner rounding.
The used values for the x- and y-axis rounded corner radiimay be determined implicitly from the other dimension (using theauto value),and are also subject to clamping so that the lengths ofthe straight segments of the rectangle are never negative.The used values forrx andry are determinedfrom the computed values by following these steps in order:
auto (sinceauto is the initial value for both properties, this will also occur if neither are specified by the author or if all author-supplied values are invalid), then the used value of bothrx andry is 0. (This will result in square corners.)auto, calculate an absolute length equivalent forrx, resolving percentages against the usedwidth of the rectangle; the absolute value forry is the same.auto, calculate the absolute length equivalent forry, resolving percentages against the usedheight of the rectangle; the absolute value forrx is the same.Mathematically, a‘rect’ element is mapped to anequivalent‘path’ element as follows,after generating absolute used valuesx,y,width,height,rx, andrxin user units for the user coordinate system,for each of the equivalent geometric propertiesfollowing the rules specified above and inUnits:
Path decomposition resolved during teleconference onJune 3rd, 2013.
Example rect01 shows arectangle with sharp corners. The‘rect’ element is filled with yellowand stroked with navy.
<?xml version="1.0" standalone="no"?><svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example rect01 - rectangle with sharp corners</desc> <!-- Show outline of viewport 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 rect01
Example rect02 showstwo rounded rectangles. Therx specifies how to round the corners ofthe rectangles. Note that since no value has been specified for theryattribute, the used value will be derived from therx attribute.
<?xml version="1.0" standalone="no"?><svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example rect02 - rounded rectangles</desc> <!-- Show outline of viewport 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>
Example rect02
The‘circle’ element defines a circle based on a center point and aradius.
Thecx andcy attributes define the coordinates of the center of the circle.
Ther attribute defines the radius of the circle. A negative value for either property is illegal andmust be ignored as a parsing error.
Mathematically, a‘circle’ element is mapped to an equivalent‘path’ element that consists of fourelliptical arc segments, each covering a quarter of the circle. The path begins at the "3 o'clock" point on the radius and proceeds in a clock-wise direction (before any transformations). Therx andry parameters to the arc commands are both equal to the used value of ther property, after conversion to local user units, while thex-axis-rotation, thelarge-arc-flag, and thesweep-flag are all set to zero. The coordinates are computed as follows, wherecx,cy, andr are the used values of the equivalent properties, converted to user units:
Path decomposition resolved during teleconference onJune 3rd, 2013.
Examplecircle01 consists of a‘circle’ element that is filledwith red and stroked with blue.
<?xml version="1.0" standalone="no"?><svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example circle01 - circle filled with red and stroked with blue</desc> <!-- Show outline of viewport 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>
Example circle01
The‘ellipse’ element defines an ellipse which is axis-alignedwith the currentuser coordinate system based on a center point and two radii.
Thecx andcy coordinates define the center of the ellipse.
Therx andry properties define the x- and y-axis radii of the ellipse. A negative value for either property is illegal andmust be ignored as a parsing error. A computed value of zero for either dimension, or a computed value ofauto forboth dimensions, disables rendering of the element.
Anauto value foreitherrx orry is converted to a used value, following the rules given above for rectangles (but without any clamping based onwidth orheight). Effectively, anauto value creates a circular shape whose radius is defined by a value expressed solely in one dimension; this allows for creating a circle with a radius defined in terms of one of the following:
auto value forry.auto value forrx and a percentage value forry. New in SVG 2. Theauto value forrx andry was added to allow consistent parsing of these properties for both ellipses and rectangles. Previously, if eitherrx orry was unspecified, the ellipse would not render.
Mathematically, an‘ellipse’ element is mapped to an equivalent‘path’ element that consists of fourelliptical arc segments, each covering a quarter of the ellipse. The path begins at the "3 o'clock" point on the radius and proceeds in a clock-wise direction (before any transformation). Therx andry parameters to the arc commands are the used values of the equivalent properties after conversion to local user units, while thex-axis-rotation, thelarge-arc-flag, and thesweep-flag are all set to zero. The coordinates are computed as follows, wherecx,cy,rx, andry are the used values of the equivalent properties, converted to user units:
Path decomposition resolved during teleconference onJune 3rd, 2013.
Example ellipse01 below specifiesthe coordinates of the two ellipses in the user coordinate systemestablished by the‘viewBox’ attribute on the‘svg’element and thetransform property on the‘g’ and‘ellipse’ elements. Both ellipses use the default values ofzero for thecx andcy attributes (the center of theellipse). The second ellipse is rotated.
<?xml version="1.0" standalone="no"?><svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example ellipse01 - examples of ellipses</desc> <!-- Show outline of viewport 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>
Example ellipse01
The‘line’ element defines a line segment that starts at one pointand ends at another.
Attribute definitions:
| Name | Value | Initial value | Animatable |
|---|---|---|---|
| x1,y1 | <length-percentage> |<number> | 0 | yes |
| Name | Value | Initial value | Animatable |
|---|---|---|---|
| x2,y2 | <length-percentage> |<number> | 0 | yes |
A future specification may convert the‘x1’,‘y1’,‘x2’, and‘y2’ attributes to geometric properties. Currently, they can only be specified via element attributes, and not CSS.
Mathematically, a‘line’ element can be mapped to anequivalent‘path’ element as follows,after converting coordinates into user coordinate system user units accordingtoUnitsto generate valuesx1,y1,x2, andy2:
Because‘line’ elements are single lines and thus are geometricallyone-dimensional, they have no interior; thus,‘line’ elements are neverfilled (see thefill property).
Example line01 belowspecifies the coordinates of the five lines in the user coordinate systemestablished by the‘viewBox’ attribute on the‘svg’ element. Thelines have different thicknesses.
<?xml version="1.0" standalone="no"?><svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example line01 - lines expressed in user coordinates</desc> <!-- Show outline of viewport 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>
Example line01
The‘polyline’ element defines a set of connected straightline segments. Typically,‘polyline’ elements define openshapes.
Attribute definitions:
| Name | Value | Initial value | Animatable |
|---|---|---|---|
| points | <points> | (none) | yes |
where:
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. In such error cases the user agent will drop the last, odd coordinate and otherwise render the shape.
The initial value, (none), indicates that the polyline element is valid but does not render.
A future specification may convert the‘points’ attribute to a geometric property. Currently, it can only be specified via an element attribute, and not CSS.
Mathematically, a‘polyline’ element can be mapped to anequivalent‘path’ element as follows:
Example polyline01below specifies a polyline in the user coordinate system established by the‘viewBox’ attribute on the‘svg’ element.
<?xml version="1.0" standalone="no"?><svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example polyline01 - increasingly larger bars</desc> <!-- Show outline of viewport 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>
Example polyline01
The‘polygon’ element defines a closed shape consisting of aset of connected straight line segments.
Attribute definitions:
| Name | Value | Initial value | Animatable |
|---|---|---|---|
| points | <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 initial value, (none), indicates that the polygon element is valid, but does not render.
A future specification may convert the‘points’ attribute to a geometric property. Currently, it can only be specified via an element attribute, and not CSS.
Mathematically, a‘polygon’ element can be mapped to anequivalent‘path’ element as follows:
Examplepolygon01 below specifies two polygons (a star and a hexagon) inthe user coordinate system established by the‘viewBox’ attributeon the‘svg’ element.
<?xml version="1.0" standalone="no"?><svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example polygon01 - star and hexagon</desc> <!-- Show outline of viewport 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>
Example polygon01
AnSVGRectElement object represents a‘rect’ element in the DOM.
[Exposed=Window]interfaceSVGRectElement :SVGGeometryElement { [SameObject] readonly attributeSVGAnimatedLengthx; [SameObject] readonly attributeSVGAnimatedLengthy; [SameObject] readonly attributeSVGAnimatedLengthwidth; [SameObject] readonly attributeSVGAnimatedLengthheight; [SameObject] readonly attributeSVGAnimatedLengthrx; [SameObject] readonly attributeSVGAnimatedLengthry;};
Thex,y,width,height,rx andry IDL attributesreflect the computed values of thex,y,width,height,rx andryproperties and their corresponding presentation attributes,respectively.
AnSVGCircleElement object represents a‘circle’ element in the DOM.
[Exposed=Window]interfaceSVGCircleElement :SVGGeometryElement { [SameObject] readonly attributeSVGAnimatedLengthcx; [SameObject] readonly attributeSVGAnimatedLengthcy; [SameObject] readonly attributeSVGAnimatedLengthr;};
Thecx,cy andr IDL attributesreflect the computed values of thecx,cyandy properties and their corresponding presentation attributes,respectively.
AnSVGEllipseElement object represents a‘ellipse’ element in the DOM.
[Exposed=Window]interfaceSVGEllipseElement :SVGGeometryElement { [SameObject] readonly attributeSVGAnimatedLengthcx; [SameObject] readonly attributeSVGAnimatedLengthcy; [SameObject] readonly attributeSVGAnimatedLengthrx; [SameObject] readonly attributeSVGAnimatedLengthry;};
Thecx,cy,rx andryIDL attributesreflect the computed values of thecx,cy,rx andry propertiesand their corresponding presentation attributes,respectively.
[Exposed=Window]interfaceSVGLineElement :SVGGeometryElement { [SameObject] readonly attributeSVGAnimatedLengthx1; [SameObject] readonly attributeSVGAnimatedLengthy1; [SameObject] readonly attributeSVGAnimatedLengthx2; [SameObject] readonly attributeSVGAnimatedLengthy2;};
Thex1,y1,x2 andy2 IDL attributesreflect the‘x1’,‘y1’,‘x2’ and‘y2’content attributes, respectively
TheSVGAnimatedPoints interface is used toreflecta‘points’ attribute on a‘polygon’ or‘polyline’element. It is mixed in to theSVGPolygonElement andSVGPolylineElementinterfaces.
Note: In SVG 1.1 SE, theanimatedPointsattribute represented the current animated value. In this version of SVG, it issimply an alias forpoints.
interface mixinSVGAnimatedPoints { [SameObject] readonly attributeSVGPointListpoints; [SameObject] readonly attributeSVGPointListanimatedPoints;};Thepoints andanimatedPoints IDLattributes represent the current non-animated value of the reflected attribute.On gettingpoints oranimatedPoints,anSVGPointList object is returned that reflects the basevalue of the reflected attribute.
TheSVGPointList interface is alist interface whoseelements areDOMPoint objects. AnSVGPointListobject represents a list of points.
[Exposed=Window]interfaceSVGPointList { readonly attribute unsigned longlength; readonly attribute unsigned longnumberOfItems; voidclear();DOMPointinitialize(DOMPoint newItem); getterDOMPointgetItem(unsigned long index);DOMPointinsertItemBefore(DOMPoint newItem, unsigned long index);DOMPointreplaceItem(DOMPoint newItem, unsigned long index);DOMPointremoveItem(unsigned long index);DOMPointappendItem(DOMPoint newItem);setter void (unsigned long index,DOMPoint newItem);};The behavior of all of the interface members ofSVGPointList aredefined inList interfaces.
This specification imposes additional requirements on the behaviour ofDOMPointobjects beyond those described in theGeometry Interfacesspecification, so that they can be used to reflect‘points’ attributes.
EveryDOMPoint object operates in one of three modes.It can:
ADOMPoint object can beassociatedwith a particular element. The associated element is used todetermine which element's content attribute to update if the objectreflectsan attribute. Unless otherwise described, aDOMPoint object is notassociated with any element.
ADOMPoint object can be designated asread only,which means that attempts to modify the object will result in an exceptionbeing thrown. When assigning to a read onlyDOMPoint'sx,y,w orzIDL attribute, aNoModificationAllowedError must bethrown instead of updating the internal coordinate value.
Note that this applies only to the read-writeDOMPointinterface; theDOMPointReadOnly interface, which is not used for reflectingthe‘points’ attribute, will already throw an exception ifan attempt is made to modify it.
When assigning to a writableDOMPoint'sx,y,w orzIDL attribute, the following steps are run after updatingthe internal coordinate value:
AnSVGPolylineElement object represents a‘polyline’ element in the DOM.
[Exposed=Window]interfaceSVGPolylineElement :SVGGeometryElement {};SVGPolylineElement includesSVGAnimatedPoints;
AnSVGPolygonElement object represents a‘polygon’ element in the DOM.
[Exposed=Window]interfaceSVGPolygonElement :SVGGeometryElement {};SVGPolygonElement includesSVGAnimatedPoints;