HTML Graphics
SVG Property Complete Reference
SVG shapes are styled with presentation properties. Most can be written either as XML attributes on the element (fill="red") or as CSS declarations (fill: red) in a stylesheet or style attribute, which makes SVG stylable, themeable and animatable just like HTML. This reference lists the most commonly used SVG paint, stroke, text and transform properties and what each controls.
Fill & Paint Properties
| Property | Description |
|---|---|
| fill | The colour or paint (a colour, url(#gradient) or 'none') used to paint the interior of a shape. |
| fill-opacity | Opacity of the fill only, from 0 (transparent) to 1 (opaque). |
| fill-rule | How to decide the interior of complex/overlapping paths: 'nonzero' (default) or 'evenodd'. |
| color | Sets the value used when fill or stroke is 'currentColor', enabling easy theming. |
| opacity | Overall opacity of the whole element (fill and stroke together), from 0 to 1. |
| visibility | 'visible' or 'hidden'; hidden keeps the element in layout but not drawn. |
| display | 'inline', 'none', etc.; display:none removes the element from rendering entirely. |
Stroke Properties
| Property | Description |
|---|---|
| stroke | The colour or paint used to draw the outline of a shape. |
| stroke-width | The thickness of the stroke, in user units (default 1). |
| stroke-opacity | Opacity of the stroke only, from 0 to 1. |
| stroke-linecap | Shape of open line ends: 'butt' (flat), 'round' or 'square'. |
| stroke-linejoin | Shape of corners where segments meet: 'miter', 'round' or 'bevel'. |
| stroke-miterlimit | Limits how far a sharp 'miter' join may extend before it is clipped to a bevel. |
| stroke-dasharray | A list of dash and gap lengths that turns a solid stroke into a dashed line. |
| stroke-dashoffset | Shifts where the dash pattern starts; animating it creates a 'drawing' line effect. |
Text Properties
| Property | Description |
|---|---|
| font-family | The typeface used to render <text> and <tspan> content. |
| font-size | The size of the text glyphs. |
| font-weight | The boldness of the text (normal, bold, 100-900). |
| text-anchor | Horizontal alignment relative to the x position: 'start', 'middle' or 'end'. |
| dominant-baseline | Vertical alignment of text against its baseline (e.g. 'middle', 'central', 'hanging'). |
| letter-spacing | Extra space added between characters. |
Transform & Rendering Properties
| Property | Description |
|---|---|
| transform | Moves, rotates, scales or skews the element (translate, rotate, scale, skewX, skewY, matrix). |
| transform-origin | The point around which rotate and scale are applied. |
| clip-path | References a <clipPath> (via url(#id)) to hard-clip the element to a region. |
| mask | References a <mask> (via url(#id)) to soft-mask the element's transparency. |
| filter | References a <filter> (via url(#id)) to apply blur, shadow or colour effects. |
| pointer-events | Controls whether and where the element responds to mouse/touch events (e.g. 'none', 'all'). |
| cursor | The mouse cursor shown when hovering the element. |
💡
When the same style is set both as an attribute and in a CSS stylesheet rule, the CSS rule wins. An inline style="..." attribute beats a presentation attribute too.