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.
It is documented as part of the Scalable Vector Graphics specification.
Syntax
/* Usage 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;
}
/* Syntax */
vector-effect: none;
vector-effect: non-scaling-stroke;
vector-effect: non-scaling-size;
vector-effect: non-rotation;
vector-effect: fixed-position;
/* Global values */
vector-effect: inherit;
vector-effect: initial;
vector-effect: revert;
vector-effect: revert-layer;
vector-effect: unset;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.
6+
15+
5.1+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more