Seven elements draw geometry. Each is painted with fill and
stroke, and can carry transform, pathLength,
the conditional attributes and any presentation property. The explorer’s Paths tab
parses every d attribute and lists its commands, subpaths and bounding
box.
Attributes
| Element | Attributes | Defaults and rules |
|---|---|---|
path | d | No d, or an empty one, draws nothing. See path data for every command. |
rect | x, y, width, height, rx, ry | x and y default to 0. A width or height of 0 draws nothing, and a negative one is an error. In SVG 1.1 a missing size is an error too; in SVG 2 it is auto, which is 0. If only one of rx and ry is given, the other takes its value; each is capped at half the width or height. |
circle | cx, cy, r | cx, cy default to 0. A zero r draws nothing; a negative one is an error. |
ellipse | cx, cy, rx, ry | Zero or negative radii draw nothing or are errors. In SVG 2 one radius may be auto and then takes the other’s value. |
line | x1, y1, x2, y2 | All default to 0. A line has no inside, so only its stroke shows; fill has no effect. |
polyline | points | An open shape. It is still filled, as if closed. |
polygon | points | A closed shape: the last point joins the first. |
The points attribute
A list of numbers, separated by white space and commas, read as x, y pairs:
points="0,0 10,0 10,10". With an odd number of numbers the last one has
no partner: SVG 1.1 calls the element in error, and SVG 2 readers render the points
up to the last complete pair. The explorer marks the stray number. A point list with
something that is not a number is read up to that point.
The same shapes as paths
| Shape | Path data |
|---|---|
<rect x="X" y="Y" width="W" height="H"/> | M X Y h W v H h -W z (a sharp-cornered rectangle; with rounded corners, eight segments: four lines and four arcs) |
<circle cx="CX" cy="CY" r="R"/> | M CX+R CY A R R 0 1 1 CX-R CY A R R 0 1 1 CX+R CY z |
<ellipse cx rx ry/> | The same with rx and ry as the two radii. |
<line x1 y1 x2 y2/> | M x1 y1 L x2 y2 |
<polyline points="…"/> | M p1 L p2 L p3 … |
<polygon points="…"/> | M p1 L p2 L p3 … z |
A circle or ellipse starts at its rightmost point and runs clockwise; this fixes where dashes begin and where a marker or text on a path starts.
What they share
pathLengthis the author’s length for the shape’s outline, a number of 0 or more. Dash arrays andstartOffsetscale to it.marker-start,marker-midandmarker-endapply topath,line,polylineandpolygononly.fill-ruleandclip-rulechoosenonzeroorevenoddfor self-crossing outlines.- The stroke is centred on the outline, with the width from
stroke-width, ends fromstroke-linecapand corners fromstroke-linejoinandstroke-miterlimit.
Not described
This page is partial.
- Reference: written without the specification text open. The exact corner geometry of a rounded
rectand the stroke and marker rules at vertices are not described in full. - Viewer: reads
dandpointscompletely and lists missing or negative sizes. It does not draw shapes, work out stroke geometry or marker positions, or measure lengths.