vector-effect
Specifies a vector effect to be applied to an SVG shape. The most common value is 'non-scaling-stroke', which ensures that lines stay at the same thickness even when you scale up the entire SVG image.
Quick example
.icon-path {
stroke-width: 2px;
/* keeps the stroke width at exactly 2px regardless of how much we zoom or scale the SVG */
vector-effect: non-scaling-stroke;
}Quick facts
Initial value
noneInherited
No
Applies to
SVG graphics elements and <use>
Animation type
discrete
Values
nonenon-scaling-strokenon-scaling-sizenon-rotationfixed-position vector-effect Browser Support
Widely available Since 2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
6+
15+
5.1+
79+