Technical Reference

The SVG Attributes Glossary: 45+ Attributes & Properties Explained

Published: July 24, 2026 Updated: August 22, 2026 Author: IconStash Core Architecture Team Reading Time: 14 min read

Every attribute you encounter in raw SVG markup — organized by function, defined in clear technical detail, and demonstrated with real code examples.

  • Understand viewBox coordinate transformations and preserveAspectRatio scaling rules.
  • Master currentColor theming, stroke-dasharray animation triggers, and non-scaling-stroke vectors.
  • Match every attribute directly against 134,701 live open-source icons on IconStash.
SVG viewBox coordinate system diagram showing min-x min-y width height
The foundation of SVG scaling: the viewBox coordinate bounding box mapped to user-space viewports.

1. Document & Coordinate System

xmlns
The XML namespace declaration — xmlns="http://www.w3.org/2000/svg" — that identifies the markup as SVG. Required in standalone .svg files; optional for SVG inlined in HTML5, where the parser already knows.
viewBox
The heart of SVG scaling. Four numbers — min-x min-y width height — defining the internal coordinate canvas. viewBox="0 0 24 24" means all drawing happens in a 24×24 unit space, which the browser scales to the rendered size.
Walkthrough: SVG viewBox explained simply
width / height
The rendered viewport size. With a viewBox present, these control display dimensions only, not the drawing coordinates.
preserveAspectRatio
Governs what happens when the viewBox ratio and viewport ratio disagree. Default xMidYMid meet scales uniformly and centers.

2. Paint: Fill & Color

fill
The interior paint of a shape. Accepts any CSS color, none (hollow — the basis of outline icons), or currentColor.
currentColor
The most important paint value in icon work: resolves to the element's inherited CSS color, enabling effortless dark mode and theme toggling.
fill-opacity
Transparency of the fill alone (0–1), independent of stroke. Used extensively in duotone icons.
fill-rule
The algorithm determining whether overlapping subpaths are filled: nonzero (winding rule) or evenodd (crossing count).

3. Stroke Geometry & Caps

stroke
The outline color of the vector path.
stroke-width
The thickness of the outline in viewBox units (e.g. 1.5, 2, 2.5).
stroke-linecap
The shape of line terminals: round, square, or butt.
stroke-linejoin
The corner joint style: round, bevel, or miter.
stroke-dasharray
Creates dashed path patterns; used with stroke-dashoffset for path drawing animations.
vector-effect="non-scaling-stroke"
Keeps stroke thickness constant on screen regardless of how large the SVG scales.

4. Frequently Asked Questions

What is the most critical SVG attribute for responsive icons?

viewBox is essential. Without a valid viewBox, browsers cannot compute vector aspect ratios, causing icons to crop or distort when resized.

Search and inspect clean SVG attributes across 134,701 icons on IconStash.