SVG defines 5 basic shapes. These shapes all have attributes specific to that shape for positioning and sizing. They also each have presentation attributes which effect things like fill and stroke color, border width and more. Basic shapes (and complex shapes) have many common presentation attributes.
Presentation attributes are divided into groups and are described in the appendix rather than explaining them here.
Legend
BOLD means the attribute is required.
Green means the attribute is optional.
Italics denotes a presentation attribute of the shape like 'fill' which is both optional and shared with other SVG elements.
Attribute |
Explanation | Example |
x |
The x-axis top-left corner of the rectangle | |
y |
The y-axis top-left corner of the rectangle | |
rx |
For rounded rectangles. x-axis radius used to round the element (0 default) | |
ry |
For rounded rectangles. y-axis radius used to round the element (0 default) | |
width |
The width of the rectangle | |
height |
The height of the rectangle | |
Presentation Attributes |
Attribute |
Explanation | Example |
cx |
The x-axis center of the circle | |
cy |
The y-axis center of the circle | |
r |
The circle's radius | |
Presentation Attributes |
Attribute |
Explanation | Example |
cx |
The x-axis center of the ellipse | |
cy |
The y-axis center of the ellipse | |
rx |
The length of the ellipse's radius along the x-axis | |
ry |
The length of the ellipse's radius along the y-axis | |
Presentation Attributes |
Attribute |
Explanation | Example |
x1, y1 |
The start point the line | |
x2, y2 |
The end point the line | |
Presentation Attributes |
Attribute |
Explanation | Example |
points |
The points on the polyline | |
Presentation Attributes |
Attribute |
Explanation | Example |
points |
The points of the polygon. The total number of points must be even. | |
fill-rule |
See below. Part of the FillStroke presentation attributes. | |
Presentation Attributes |
The difference between the polygon and the polyline is that polygons are a closed shape. If the last and first polygon points don't match then the shape is closed automatically.
Feel free to skip ahead to the Image element page if you're not interested in a long winded explanation on what fill and clip rules mean.
Clip and fill rules (clip-rule & fill-rule)
Polygons, polylines and clipping planes all use either the rule 'evenodd' or 'nonzero' to determine where the inside of an object is. Both rules work by starting with a count of 0 and fill sections based on this count. This count changes when a ray intersects with a line segment of the graphic element being filled.
The nonzero rule (default) works by taking a ray from inside the graphic element and going outside to infinity. At each intersection point of the ray and the line/curve segments of the graphic element you compute the slope and rotate it 90 degrees counterclockwise. A vector pointed in the same direction of the ray (dot product > 0) adds 1 to the count and one in the opposite direction (dot product < 0) adds -1. A final number which is not zero results in the filling of that point.
The evenodd rule works by taking a point in the shape and counting the number of times a ray from that point to infinity crosses the line/curve segments of the graphic element. An odd count means the point is inside the shape. In both cases, if the polyline or path is not closed (start and end points have the same x and y coordinates) it is automatically closed to compute the interior segments of the shape.