SVG Stroke, Fill & Painting Glossary: 38+ Terms Explained

The primary presentation attribute and CSS property that applies paint along the vector path perimeter. Accepts named colors, hex codes, RGB/HSL/HWB, modern P3 color gamuts, gradients (url(#gradId)), or currentColor.

Defines the thickness of the stroke applied to path coordinates. Measurement is calculated symmetrically outward from the center trajectory of the path line.

Specifies the geometric cap rendered at open path terminal vertices and the extremities of dashed line segments. Crucial for matching optical icon family weights.

Terminates paths cleanly at the exact coordinates of the endpoint. No stroke geometry projects beyond the vertex coordinate. Default W3C behavior.

Appends a half-circle cap with a radius equal to half the stroke width to the endpoint. Provides modern, tactile warmth in icon packs like Feather and Lucide.

Projects a square block past the terminal vertex by half the stroke width. Snaps endpoints cleanly to orthogonal grid lines in technical diagrams.

Controls the geometry rendered where two intersecting path lines meet at an angle. Prevents visual spikes and distortion at sharp corners.

Extends the outer edges of intersecting lines until they meet at a sharp point. When the angle is acute, the miter length can spike outward excessively.

Rounds off the outer corner with a smooth circular fillet centered on the vertex point. Eliminates harsh corner spikes in interface icons.

Slices off the corner with a flat diagonal line connecting the outer edges of the two intersecting strokes. Produces industrial, chiseled corners.

An SVG 2 feature producing curved fillets that follow the mathematical curvature of intersecting curved path segments rather than flat lines.

Clips the miter spike flat at the exact miter-limit boundary line rather than abruptly collapsing into a full bevel.

The maximum ratio allowed between the miter length (corner spike length) and the stroke width. When the ratio exceeds this threshold, the corner snaps into a bevel cut.

A sequence of lengths defining repeating dashes and spaces. Odd numbers of values repeat twice to complete the full on-off cycle.

The distance into the dash pattern at which stroking starts. Crucial for SVG self-drawing stroke animations in CSS and JavaScript.

Declares an author-specified path length that overrides the browser's complex Bézier calculation, normalizing dasharray percentages or values to exactly 1 or 100.

An SVG 2 proposal providing algorithms to adjust dash lengths so that a solid dash segment centers symmetrically on polygon vertices, avoiding awkward corner gaps.

The presentation attribute and CSS property specifying the interior paint applied inside a vector boundary. Can be set to none for pure outline icons.

Sets the transparency of the fill paint without affecting the stroke outline. Used extensively in duotone icon sets (e.g., Phosphor Duotone 20% opacity).

The ray-intersection algorithm that determines whether points fall inside or outside self-intersecting or compound path contours.

Default W3C rule. Casts a ray from a point and counts the directional orientation of crossing path segments. If clockwise and counter-clockwise crossings do not cancel out, the region is filled.

Evaluates interior parity by simply counting crossing segments. An odd number of crossings means interior (filled); an even number means exterior (cutout hole). Indispensable for icons with hollow cutouts.

A CSS transform-box and reference box keyword aligning coordinate origins to the tight bounding box of an element's filled geometry, excluding stroke width.

Enables nested elements inside <marker> or <use> tags to inherit the computed fill paint of the referring element.

Enables arrowhead markers and symbols to inherit the stroke color of the parent path dynamically.

Controls the rasterization sequence of fill, stroke, and markers. By default, fill is drawn first and stroke on top, cutting into text glyph counters.

Draws the stroke behind the fill. This preserves razor-sharp text stems and thin vector icon contours while casting a heavy outline behind the shape.

Specifies vector processing transformations performed prior to coordinate rasterization.

Locks the visual thickness of strokes to constant physical screen pixels regardless of zoom factors, viewBox aspect ratios, or CSS scale transforms.

While design tools like Figma allow Inner and Outer strokes, the W3C SVG specification strictly centers strokes on path boundaries. Inner stroke can be emulated using clipPath or paint-order: stroke fill.

An SVG definition element containing graphics (like arrowheads, dots, or crosshairs) to be placed at vertices of paths, lines, and polylines.

Attaches an SVG marker symbol to the initial starting vertex of a path.

Attaches markers to all intermediate vertices between start and end on multi-segment paths and charts.

Attaches a marker symbol (such as an arrowhead) to the final terminal vertex of a vector path.

Controls whether marker dimensions scale with the path's stroke-width or remain fixed in user coordinate units.

Rotates the marker symbol automatically to align tangentially with the incoming direction of the path line at the attachment vertex.

Directs the browser rasterization engine to prioritize speed, geometric curve precision, or pixel-aligned sharpness.

Turns off antialiasing on orthogonal edges and snaps lines to physical screen pixels, eliminating blurry 1px borders in tables and pixel art.

A CSS keyword inheriting the active typography color token, making vector icons adapt instantly across dark and light themes.

Restricts mouse and touch event hit testing solely to regions where fill or stroke is visibly rendered and non-transparent, preventing phantom clicks on empty bounding boxes.