The vector-effect property controls how vector graphics rendering treats stroke geometry when the underlying shapes are transformed or scaled. Rather than changing the shape outline itself, it modifies whether the visible stroke thickness follows the element’s geometric transformations or remains tied to a fixed rendering scale. This is primarily relevant for stroked vector elements (it does not affect fills) and is commonly used in SVG contexts where shapes are scaled by viewport or coordinate system changes.

One common usage pattern is to preserve consistent visual weight for lines and icons as they are scaled. By choosing an appropriate rendering mode you can keep the stroke drawn at a stable thickness even when the element is enlarged or shrunk, which helps maintain legibility for icons, diagrams, and map features. This interacts closely with the element’s specified stroke thickness (see stroke-width) and the way you apply geometric transformations — whether through CSS or SVG — such as with transform.

There are practical implications to consider: preserving stroke thickness can make hit‑testing, visual alignment, and the apparent relationship between adjacent shapes behave differently than when strokes scale with geometry. It also affects how strokes look when an element is placed inside a scaled viewBox or nested inside transformed groups. Depending on your rendering needs, you may combine this behavior with other stroke-related presentation settings like stroke to achieve consistent styling across sizes. Use the property where visual consistency across scales is more important than having the stroke scale proportionally with the vector geometry.