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.

What is the SVG Presentation Attributes?

Searchable reference for SVG presentation attributes — fill, stroke, font, transform, and opacity — showing each attribute's value type, default, CSS property equivalent, and which elements it affects. It runs free in your browser on Gera Tools, with nothing uploaded.

SVG Presentation Attributes

Name: SVG Presentation Attributes
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

The most commonly confused attributes

fill versus stroke. fill sets the interior color of a shape; stroke sets the outline color. Both accept a paint value: a color, none, currentColor, or a url(#id) reference to a gradient or pattern definition. A circle with fill="none" stroke="black" shows only the outline ring, not a solid disc.

stroke-width. This is the width of the stroke line in user units, which may be scaled by transforms. A stroke-width="2" on a shape inside a transform="scale(3)" renders at 6 user units visually. Set vector-effect="non-scaling-stroke" if you want the stroke to stay a fixed visual width regardless of transforms.

stroke-dasharray and stroke-dashoffset. stroke-dasharray defines the dash-gap pattern as alternating lengths: 4 2 means 4 units of dash then 2 units of gap. stroke-dashoffset shifts where in the pattern the stroke starts, which is the mechanism behind CSS line-drawing animations — starting with an offset equal to the path length and animating to zero makes the line appear to draw itself.

opacity versus fill-opacity and stroke-opacity. opacity applies to the entire element including both fill and stroke as a composited unit. fill-opacity and stroke-opacity are independent: a shape can have a solid stroke and a semi-transparent fill. Note that opacity creates a stacking context, which can affect how the element composites with layers behind it.

transform. The transform attribute on SVG elements takes the same functions as CSS transforms (translate, rotate, scale, matrix) but uses SVG’s own coordinate system and is specified slightly differently (no deg suffix on angles in the attribute form).

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.
Presentation attributes inherit: a fill on a <g> group applies to all child elements unless overridden.
This reference covers the common presentation attributes, not the entire SVG 2 specification.