VectorEffect

VectorEffect refers to a CSS and SVG attribute that controls how stroke and fill styles are applied to vector graphics when transformations such as scaling or rotation are performed. The property is declared as vector-effect in style sheets or as an attribute on SVG elements. It enables designers to preserve visual fidelity of strokes that would otherwise be distorted by transformations.

The property accepts two primary values: normal and non-scaling-stroke. When set to normal, strokes and text are scaled in proportion to the applied transformations, causing lines to widen or thin as the graphic size changes. The non-scaling-stroke value instructs the rendering engine to keep the line-width constant, so strokes appear the same thickness regardless of scaling or rotation. This function is particularly useful for logos, icons, and line art that must maintain consistent visual weight.

VectorEffect is part of the SVG 2.0 specification and is supported by most modern browsers. It can also be used in combination with other CSS properties such as stroke-width, stroke-miterlimit, and clip-path to produce sophisticated visual effects. The attribute is applied directly to elements like <path>, <circle>, or <text>. Because the property is propagated from parent to child, a single declaration on a group (<g>) can influence all contained elements.

The introduction of vector-effect improved the predictability of vector graphic rendering in web documents. Prior to its standardization, designers had to manually adjust stroke widths or employ complex CSS transforms to achieve consistent strokes. With vector-effect, a simple declaration provides deterministic behavior across devices and screen densities, improving accessibility and visual consistency in responsive designs.