What are SVG presentation attributes?

Presentation attributes are SVG attributes that set styling — like fill, stroke, opacity, and font-size — directly on an element. They are shorthand for CSS properties of the same name. fill=red is equivalent to a CSS rule fill: red, but presentation attributes have lower specificity than any CSS rule, so a stylesheet always wins over them.

Should I use SVG attributes or CSS for styling?

Both work for most paint and text properties. Use presentation attributes for one-off static styling inline with the geometry; use CSS when you want to theme many elements, respond to hover or media queries, or override with higher specificity. Geometry attributes like x, cx, and d are not presentation attributes and must stay in markup.

Why does my CSS override the fill attribute?

Presentation attributes have the lowest priority in the cascade — lower than even an element selector. So any matching CSS rule, however weak, overrides a presentation attribute. If you set fill=blue on a circle and also have a CSS rule circle { fill: red }, the circle renders red. To force the attribute to win, use an inline style or higher-specificity selector.

What is stroke-dasharray?

stroke-dasharray defines a dash pattern for a stroked outline as a comma or space separated list of lengths: alternating dash and gap. For example 4 2 draws a 4-unit dash then a 2-unit gap, repeating. Combine it with stroke-dashoffset to shift where the pattern starts, which is the basis of line-drawing animations.

Is this the complete list of SVG attributes?

It covers the presentation attributes you set on shapes and text in everyday SVG work — paint, stroke, font, text, and transform. It does not list geometry attributes (x, width, d) or the full set of filter and animation attributes. For exhaustive coverage consult the W3C SVG 2 specification and the MDN SVG attribute reference.

SVG Presentation Attributes

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

SVG presentation attributes let you style an element — its fill, stroke, font, opacity, and transform — directly in markup. Each is shorthand for a CSS property of the same name, but with the lowest priority in the cascade. This is a searchable offline reference.

How it works

Each attribute lists four facts that decide how it behaves:

Value type — a paint (color or url(#id)), a length/number, a token from an enumerated set, or a string.
Default — the value applied when the attribute is absent.
CSS equivalent — almost all presentation attributes are also CSS properties. Setting it in CSS lets you theme, hover, and override; the attribute is a low-specificity fallback.
Applies to — paint attributes apply to shapes and text; font/text attributes apply to text content elements.

Because presentation attributes sit below every CSS rule in the cascade, a stylesheet always wins. Use the attribute for static inline styling and CSS when you need theming or interaction.

Example

<circle cx="50" cy="50" r="40"
  fill="none" stroke="teal" stroke-width="6"
  stroke-dasharray="10 4" stroke-linecap="round" />

stroke-dasharray="10 4" draws a 10-unit dash then a 4-unit gap, repeating; the same effect in CSS is stroke-dasharray: 10 4.

Notes

Geometry attributes (x, cx, r, d, points) are not presentation attributes — they must stay in markup and have no CSS equivalent (SVG 2 adds some as CSS, but support is uneven).
fill and stroke accept a paint: a color, none, currentColor, or a url(#id) reference to a gradient or pattern.
This reference covers the common presentation attributes, not the entire SVG 2 specification.