HTML Graphics
SVG Attribute Complete Reference
Beyond presentation styling, SVG elements carry geometry and core attributes that define their position, size and shape data. This reference collects the attributes you reach for most often: coordinate and size attributes for the basic shapes, the powerful d and points path data attributes, and the viewport attributes viewBox and preserveAspectRatio that control how a drawing is scaled and aligned.
Position & Size Attributes
| Attribute | Description |
|---|---|
| x | The x-coordinate of the left edge for <rect>, <image>, <text> and similar elements. |
| y | The y-coordinate of the top edge for <rect>, <image>, <text> and similar elements. |
| width | The horizontal size of a <rect>, <image>, <svg> or <pattern>. |
| height | The vertical size of a <rect>, <image>, <svg> or <pattern>. |
| cx | The x-coordinate of the centre for <circle>, <ellipse> and radial gradients. |
| cy | The y-coordinate of the centre for <circle>, <ellipse> and radial gradients. |
| r | The radius of a <circle> or the radius of a <radialGradient>. |
| rx | The horizontal radius of an <ellipse>, or the horizontal corner radius of a <rect>. |
| ry | The vertical radius of an <ellipse>, or the vertical corner radius of a <rect>. |
Line & Point Attributes
| Attribute | Description |
|---|---|
| x1 | The x-coordinate of the start point of a <line> or the start of a linear gradient. |
| y1 | The y-coordinate of the start point of a <line> or the start of a linear gradient. |
| x2 | The x-coordinate of the end point of a <line> or the end of a linear gradient. |
| y2 | The y-coordinate of the end point of a <line> or the end of a linear gradient. |
| points | A space/comma separated list of x,y pairs defining a <polyline> or <polygon>. |
| d | The path data string for <path>: commands like M (move), L (line), C/Q (Bezier), A (arc), Z (close). |
Viewport & Reference Attributes
| Attribute | Description |
|---|---|
| viewBox | 'min-x min-y width height' defining the internal coordinate system that is scaled to the element's size. |
| preserveAspectRatio | Controls how the viewBox is scaled and aligned inside the viewport (e.g. 'xMidYMid meet', 'none'). |
| href / xlink:href | References another element or resource by id or URL (used by <use>, <textPath>, <image>). |
| id | A unique identifier so the element can be referenced by url(#id), <use> or CSS/JS. |
| offset | Position of a gradient <stop> along the gradient, from 0 (0%) to 1 (100%). |
| gradientUnits | Coordinate system for gradient positions: 'objectBoundingBox' or 'userSpaceOnUse'. |
Presentation Attributes (also settable as CSS)
| Attribute | Description |
|---|---|
| fill | The interior paint colour of the shape (also a CSS property). |
| stroke | The outline paint colour of the shape (also a CSS property). |
| stroke-width | The thickness of the outline (also a CSS property). |
| transform | A list of transforms (translate, rotate, scale, skew, matrix) applied to the element. |
| opacity | Overall opacity of the element from 0 to 1 (also a CSS property). |
| class | One or more CSS class names for targeting the element from a stylesheet. |
ℹ️
viewBox and preserveAspectRatio are case-sensitive camelCase attributes. Writing 'viewbox' (all lowercase) will silently do nothing.