HTML Graphics
SVG Attribute Complete Reference
Attributes are how you tell each SVG element its geometry and identity: where to draw, how big, what path to follow, and what coordinate system to use. Some attributes are specific to one shape (r belongs to <circle>), while others like viewBox, transform and id apply broadly. This reference covers the attributes you will use constantly, with a runnable example that labels each one and a lookup table of 20+ attributes.
Runnable Example
This drawing exercises the core geometry attributes: viewBox on the root, x/y/width/height on rects, cx/cy/r on a circle, x1/y1/x2/y2 on a line, points on a polygon, d on a path, and transform to rotate a group.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG Attributes</title></head>
<body style="background:#f8fafc;display:grid;place-items:center;min-height:100vh;margin:0;">
<svg width="380" height="240" viewBox="0 0 190 120" xmlns="http://www.w3.org/2000/svg">
<!-- x, y, width, height, rx -->
<rect x="10" y="10" width="50" height="40" rx="6" fill="#6366f1" />
<!-- cx, cy, r -->
<circle cx="105" cy="30" r="20" fill="#22c55e" />
<!-- x1, y1, x2, y2 -->
<line x1="140" y1="10" x2="180" y2="50" stroke="#ef4444" stroke-width="4" />
<!-- points -->
<polygon points="30,110 55,60 5,60" fill="#f59e0b" />
<!-- d (path) -->
<path d="M80 110 Q105 60 130 110 Z" fill="#ec4899" />
<!-- transform on a group -->
<g transform="rotate(15 160 90)">
<rect x="150" y="75" width="30" height="30" fill="#0ea5e9" />
</g>
</svg>
</body>
</html>The rendered SVG is 380x240 pixels, but the viewBox is only 190x120 units - so every drawing unit is scaled up 2x. That decoupling of coordinate space from display size is the whole point of viewBox.
SVG Attribute Reference Table
| Attribute | Applies to / Description |
|---|---|
| viewBox | <svg>: defines the internal coordinate box as 'min-x min-y width height'. |
| xmlns | <svg>: the SVG namespace; required when SVG stands alone as a file. |
| width | <svg>, <rect>, <image>: horizontal size. |
| height | <svg>, <rect>, <image>: vertical size. |
| x | <rect>, <text>, <image>, <use>: left/horizontal position. |
| y | <rect>, <text>, <image>, <use>: top/vertical position. |
| rx | <rect>: horizontal corner radius (rounded corners); also x-radius of <ellipse>. |
| ry | <rect>: vertical corner radius; also y-radius of <ellipse>. |
| cx | <circle>, <ellipse>, <radialGradient>: centre x coordinate. |
| cy | <circle>, <ellipse>, <radialGradient>: centre y coordinate. |
| r | <circle>, <radialGradient>: radius. |
| x1 / y1 | <line>, <linearGradient>: start point coordinates. |
| x2 / y2 | <line>, <linearGradient>: end point coordinates. |
| points | <polyline>, <polygon>: list of 'x,y' coordinate pairs to connect. |
| d | <path>: the drawing command string (M, L, C, Q, A, Z and lowercase variants). |
| pathLength | <path> etc: declares the total path length for dash/animation calculations. |
| transform | Most elements: translate, rotate, scale or skew the element and its children. |
| href | <use>, <image>, <textPath>, <a>: reference to another element or a URL. |
| id | Any element: unique name so it can be targeted by url(#id), <use>, or CSS. |
| class | Any element: one or more CSS class names for styling. |
| style | Any element: inline CSS presentation properties. |
| preserveAspectRatio | <svg>, <image>: how content scales/aligns to fit the viewBox. |
| offset | <stop>: position of a gradient colour stop, 0 to 1 or a percentage. |
| stop-color | <stop>: the colour at that gradient stop. |
| gradientUnits | Gradients: coordinate system for gradient vectors (objectBoundingBox / userSpaceOnUse). |
| fill (attribute) | Shapes: interior colour (can also be a CSS property). |
| stroke (attribute) | Shapes: outline colour (can also be a CSS property). |
Geometry attributes like cx, r and width are plain numbers in user units - no 'px'. Units and colours become powerful when you animate them or drive them from JavaScript.