HTML Graphics
SVG Property Complete Reference
SVG shapes are styled with presentation properties. The special thing about them is that most can be written two ways: as an XML attribute (fill="red") or as a CSS property (fill: red) in a stylesheet or style attribute. This gives you the full power of CSS - classes, hover states, transitions - over vector graphics. This reference explains the properties you will reach for most, with a runnable example and a lookup table of 20+ properties.
Runnable Example
This example styles shapes with CSS properties (fill, stroke, stroke-width, opacity, stroke-dasharray) and adds a hover transition - proof that SVG presentation properties behave like real CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Properties</title>
<style>
body { background:#0f172a; display:grid; place-items:center; min-height:100vh; margin:0; }
.box { fill:#6366f1; stroke:#c7d2fe; stroke-width:4; transition:fill .3s, transform .3s; transform-origin:center; }
.box:hover { fill:#f472b6; transform:scale(1.1); }
.dashed { fill:none; stroke:#38bdf8; stroke-width:6; stroke-dasharray:12 8; stroke-linecap:round; }
.ghost { fill:#22c55e; opacity:.5; }
.label { fill:#f8fafc; font:bold 18px Arial; text-anchor:middle; }
</style>
</head>
<body>
<svg width="360" height="220" viewBox="0 0 360 220" xmlns="http://www.w3.org/2000/svg">
<rect class="box" x="30" y="40" width="90" height="90" rx="12" />
<circle class="dashed" cx="200" cy="85" r="45" />
<circle class="ghost" cx="300" cy="85" r="45" />
<text class="label" x="180" y="180">Hover the left square</text>
</svg>
</body>
</html>Presentation properties set as attributes have LOWER priority than a matching CSS rule, so a stylesheet always wins over an inline fill="..." attribute (but an inline style="..." attribute wins over both).
SVG Property Reference Table
Each of the following can be used as an SVG presentation attribute or as a CSS property (in a <style> block, a class, or a style attribute).
| Property | Description |
|---|---|
| fill | Interior (fill) colour of a shape or text. Accepts colours, url(#gradient), or 'none'. |
| fill-opacity | Opacity of the fill only, 0 (transparent) to 1 (opaque). |
| fill-rule | How overlapping sub-paths decide inside vs outside: 'nonzero' or 'evenodd'. |
| stroke | Colour of the outline. Accepts colours, url(#gradient), or 'none'. |
| stroke-width | Thickness of the outline in user units. |
| stroke-opacity | Opacity of the stroke only, 0 to 1. |
| stroke-linecap | Shape of open line ends: 'butt', 'round' or 'square'. |
| stroke-linejoin | Shape of corners where segments meet: 'miter', 'round' or 'bevel'. |
| stroke-dasharray | Dash pattern for the outline, e.g. '12 8' (dash length, gap length). |
| stroke-dashoffset | Distance to shift the dash pattern along the path (used for line animations). |
| stroke-miterlimit | Limits how far sharp miter joins can extend before they are beveled. |
| opacity | Overall opacity of the whole element, 0 to 1 (affects fill and stroke together). |
| transform | Moves, rotates, scales or skews the element (translate/rotate/scale/skew). |
| transform-origin | The pivot point that transform rotates or scales around. |
| color | Sets the value that fill or stroke use when set to 'currentColor'. |
| visibility | 'visible' or 'hidden'; hidden still occupies layout, unlike display:none. |
| display | 'none' removes the element entirely from rendering and hit-testing. |
| clip-path | References a <clipPath> to crop the element to a shape. |
| mask | References a <mask> to fade the element by another shape's luminance. |
| filter | References a <filter> to apply effects like blur, shadow or colour shifts. |
| font-family | Typeface used by <text> elements. |
| font-size | Size of text glyphs. |
| font-weight | Text weight, e.g. 'normal', 'bold' or a numeric value. |
| text-anchor | Horizontal alignment of text around its x position: 'start', 'middle', 'end'. |
| dominant-baseline | Vertical alignment of text relative to its y baseline. |
| letter-spacing | Extra space between characters in <text>. |
| cursor | Mouse cursor shown when hovering the element, e.g. 'pointer'. |
Set stroke="currentColor" on an icon's paths, then just change the parent's CSS color to recolour the whole icon - the classic trick for themeable SVG icon sets.