A presentation property is a CSS property that can also be written as an attribute.
Their order of strength, weakest first: the attribute, then style sheet rules, then the
style attribute. An attribute is a hint with the lowest specificity (as if
it were a rule with no selector weight at all), so any CSS rule overrides it. Most
properties are inherited by child elements; the ones that are not are marked below.
The explorer checks the values of these properties in attributes, style
attributes and style sheets, and reports a colour, paint, length, number or keyword it
cannot read.
Painting
| Property | Values | Initial |
|---|---|---|
fill | colour, none, url(#id) with an optional fallback, context-fill, context-stroke, currentColor | black |
fill-opacity, stroke-opacity | number or percentage, 0 to 1 (clamped) | 1 |
fill-rule, clip-rule | nonzero, evenodd | nonzero |
stroke | as fill | none |
stroke-width | length or percentage, not negative | 1 |
stroke-linecap | butt, round, square | butt |
stroke-linejoin | miter, round, bevel; SVG 2 adds miter-clip, arcs | miter |
stroke-miterlimit | number, 1 or more | 4 |
stroke-dasharray | none or a list of lengths (not negative); an odd list is repeated to make an even one | none |
stroke-dashoffset | length | 0 |
paint-order | normal, or fill, stroke, markers in any order (SVG 2) | normal (fill, stroke, markers) |
marker-start, marker-mid, marker-end | none or url(#id) | none |
color | colour | depends on the reader |
color-interpolation, color-interpolation-filters | auto, sRGB, linearRGB | sRGB; linearRGB for filters |
color-rendering, shape-rendering, text-rendering, image-rendering | quality hints: auto, optimizeSpeed, optimizeQuality, crispEdges, geometricPrecision, optimizeLegibility, pixelated and others by property | auto |
Colours are written as #rgb, #rgba, #rrggbb,
#rrggbbaa, one of the 148 CSS colour names, rgb(),
hsl(), hwb(), lab(), lch(),
oklab(), oklch(), color(),
currentColor or transparent. SVG 1.1 colours can end with
icc-color(profile, numbers). The 8-digit and 4-digit hex forms and the
newer functions are not in SVG 1.1 or its tools.
Visibility, compositing and interaction
| Property | Values | Notes |
|---|---|---|
display | none and the CSS box keywords | Not inherited. none removes the element and its children from drawing and from layout; the children cannot be shown again. |
visibility | visible, hidden, collapse | Inherited. A child can make itself visible inside a hidden parent. |
opacity | 0 to 1 | Not inherited. Applies to the element and its content as one picture. |
overflow | visible, hidden, scroll, auto | Not inherited. Whether content outside a viewport, symbol, marker, pattern or foreignObject is clipped. Initial visible, but hidden for those elements by the reader’s own style sheet. |
clip-path, mask, filter | none, url(#id), and in CSS basic shapes and filter functions | Not inherited. See References. |
clip | auto, rect(…) | The old rectangular clip. Deprecated. |
mix-blend-mode, isolation | the CSS blend modes; auto, isolate | SVG 2 and CSS Compositing. |
pointer-events | visiblePainted (initial), visibleFill, visibleStroke, visible, painted, fill, stroke, all, none, bounding-box (SVG 2) | Which part of the element receives the pointer. |
cursor | CSS cursor keywords or url(…) list | Inherited. |
vector-effect | none, non-scaling-stroke, non-scaling-size, non-rotation, fixed-position | Not inherited. non-scaling-stroke keeps the stroke width in screen pixels whatever the transform. |
Properties for gradients, filters and masks
stop-color and stop-opacity (on stop),
flood-color and flood-opacity (feFlood,
feDropShadow), lighting-color (lighting primitives) and
mask-type are presentation properties too; none is inherited.
enable-background is SVG 1.1’s way to make
BackgroundImage available to filters; SVG 2 dropped it. Text properties
are on the text page.
Not described
This page is partial.
- Reference: the CSS properties that browsers accept as presentation attributes beyond those listed (many CSS Masking, Transforms and Shapes properties), inheritance for each property, and the full CSS colour syntax (
color(),color-mix(), relative colours) are not described. - Viewer: checks values of the paint, colour, opacity, stroke, display, overflow, rendering and enumerated properties. Other properties are accepted without checking their values; the cascade is not worked out, and values using
var()orcalc()are not checked.