Lengths
A length is a number with an optional unit: px (the default, one user
unit), em, ex, ch, rem,
vw, vh, vmin, vmax,
cm, mm, Q, in, pt,
pc, or % of the viewport’s width, height or diagonal. The
absolute units are fixed at 96 pixels to the inch: 1 in = 96,
1 cm = 37.795, 1 mm = 3.7795, 1 pt = 1.3333,
1 pc = 16. SVG 1.1 allows em, ex,
px, in, cm, mm, pt,
pc and % only. The explorer reads width and
height of the root this way and states the size in pixels.
The attributes
| Attribute | Elements | Default | Rules |
|---|---|---|---|
x, y | svg (nested), rect, image, use, foreignObject, symbol, pattern, mask, filter and primitives, fePointLight, feSpotLight; on text and tspan, lists | 0 (the filter and mask regions default to −10%) | Length or percentage. On a root svg they do nothing. |
width, height | svg, rect, image, use, foreignObject, symbol, pattern, mask, filter and primitives | auto / 100% on svg; 120% on filter and mask | Not negative: a negative value is an error, and zero disables rendering of a rect, image, pattern, mask or filter region. |
cx, cy | circle, ellipse, radialGradient | 0 (50% on gradients) | Length or percentage. |
r | circle, radialGradient | 0 (50% on gradients) | Not negative; zero disables a circle. |
rx, ry | ellipse, rect | auto | On rect, the corner radii, capped at half the width or height; one given alone sets the other too. |
x1, y1, x2, y2 | line, linearGradient | 0 (x2 is 100% on a gradient) | Length or percentage. |
points | polyline, polygon | none | A list of numbers read as x, y pairs; no units, separators are white space and commas. |
d | path, SVG 1.1 glyph and missing-glyph | none | Path data: see path data. |
pathLength | shapes, SVG 2 also textPath’s target | the real length | A number, 0 or more. Dash arrays and startOffset are measured against it, so pathLength="100" lets you write percentages. |
The explorer lists r on a rect, or width on a
circle, as an attribute the element does not take, and a negative
r, width, height, rx or
ry as an error.
Percentages
A percentage in x, cx, width, rx
and the like is of the nearest viewport’s width; in y, cy,
height and ry of its height; and in r and
other lengths with no direction of the viewport’s diagonal divided by √2.
Percentages in gradient and pattern coordinates with
objectBoundingBox units are fractions of the painted element’s box
instead.
Not described
This page is partial.
- Reference: the SVG 2 geometry properties (
cx,rand the others as CSS properties) and percentage resolution in every context are only summarised, written without the specification text open. - Viewer: reads lengths and units, states the root size in pixels, and flags negative sizes and misplaced attributes. It does not resolve percentages,
emorex, so sizes in those units are shown as written.