viewBox
Four numbers, min-x min-y width height, separated by white space or
commas: the rectangle of user space that fills the viewport. Elements: svg,
symbol, marker, pattern, view.
A negative width or height is an error; zero disables rendering. Without a
viewBox, user units are pixels and nothing scales to fit. The explorer
expands the attribute into four child nodes.
preserveAspectRatio
[defer] <align> [meet | slice]. It matters when the viewport and
view box have different proportions.
| Part | Values | Meaning |
|---|---|---|
| align | none | Stretch the view box to the viewport; proportions are lost. |
xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid (default), xMaxYMid, xMinYMax, xMidYMax, xMaxYMax | Scale uniformly and place the view box at the minimum, middle or maximum of each axis. | |
| rule | meet (default) | The whole view box is visible, with empty bands where proportions differ. |
slice | The view box covers the viewport, and what falls outside is cut off. | |
| defer | defer | Only on image: use the referenced file’s own value when it has one. |
transform
A list of functions applied to an element’s coordinate system, separated by white
space and optionally commas. The first function is the outermost: in
translate(10) rotate(45) a point is rotated first, then moved. The same
syntax is used by gradientTransform and patternTransform. SVG
2 also accepts CSS transform syntax (units such as 45deg and
10px, and none), which SVG 1.1 does not.
| Function | Arguments | Matrix |
|---|---|---|
matrix(a b c d e f) | six numbers | [a c e; b d f; 0 0 1]: x′ = ax + cy + e, y′ = bx + dy + f |
translate(tx [ty]) | ty defaults to 0 | [1 0 tx; 0 1 ty] |
scale(sx [sy]) | sy defaults to sx | [sx 0 0; 0 sy 0] |
rotate(a [cx cy]) | degrees, clockwise on screen; with a centre, the same as translate(cx cy) rotate(a) translate(−cx −cy) | [cos a −sin a; sin a cos a] |
skewX(a) | degrees | [1 tan a; 0 1] |
skewY(a) | degrees | [1 0; tan a 1] |
An error in a transform list makes the whole value an error: the element is drawn without it in some readers and not at all in others. In the structure tree each function is a child node, and a wrong argument count is marked.
Units attributes
| Attribute | Elements | Values (default) |
|---|---|---|
gradientUnits | linearGradient, radialGradient | userSpaceOnUse, objectBoundingBox (default) |
patternUnits, patternContentUnits | pattern | both from userSpaceOnUse, objectBoundingBox; defaults objectBoundingBox and userSpaceOnUse |
clipPathUnits | clipPath | userSpaceOnUse (default), objectBoundingBox |
maskUnits, maskContentUnits | mask | defaults objectBoundingBox and userSpaceOnUse |
filterUnits, primitiveUnits | filter | defaults objectBoundingBox and userSpaceOnUse |
markerUnits | marker | strokeWidth (default), userSpaceOnUse |
userSpaceOnUse means the user space of the element that refers to the
resource (not where the resource sits). objectBoundingBox means a
fraction of that element’s bounding box, which is the tightest box round its geometry
without the stroke; it is useless for a shape whose box has no width or height.
Other
transform-originandtransform-box(SVG 2 and CSS Transforms): the point atransformworks around. The default origin for SVG elements is 0 0 in the user space of the element, andtransform-boxisview-box.zoomAndPan(disableormagnify) andviewTarget: SVG 1.1 only.
Not described
This page is partial.
- Reference: CSS transform syntax (units,
matrix3d,perspective) and the rules fortransform-originandtransform-boxare only mentioned, and everything was written without the specification texts open. - Viewer: parses SVG transform lists and view boxes into child nodes and checks them. A transform written with CSS units is shown as text and not checked. The combined matrix of an element is not shown.