vector-effect

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

See full compatibility

The vector-effect property specifies the vector effect to use when drawing an object. Vector effects are applied before any of the other compositing operations, i.e., filters, masks and clips.

Note: As a presentation attribute, vector-effect also has a CSS property counterpart: vector-effect. When both are specified, the CSS property takes priority.

Elements

You can use this attribute with the following SVG elements:

Usage notes

Value	`none` \| `non-scaling-stroke` \| `non-scaling-size` \| `non-rotation` \| `fixed-position`
Default value	`none`
Animatable	discrete

none: This value specifies that no vector effect shall be applied, i.e., the default rendering behavior is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint.
non-scaling-stroke: This value modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shape's path in current user coordinate system and filling that outline with the stroke paint (color or gradient). The resulting visual effect of this value is that the stroke width is not dependent on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.

Note: The spec defines three other values, non-scaling-size, non-rotation, and fixed-position, but these have no implementations and are considered at-risk.

Examples

Setting `vector-effect` as `non-scaling-stroke`

html

<svg viewBox="0 0 500 240">
  <!-- normal -->
  <path
    d="M10,20 L40,100 L39,200 z"
    stroke="black"
    stroke-width="2px"
    fill="none"></path>

  <!-- scaled -->
  <path
    transform="translate(100,0) scale(4,1)"
    d="M10,20 L40,100 L39,200 z"
    stroke="black"
    stroke-width="2px"
    fill="none"></path>

  <!-- fixed-->
  <path
    vector-effect="non-scaling-stroke"
    transform="translate(300, 0) scale(4, 1)"
    d="M10,20 L40,100 L39,200 z"
    stroke="black"
    stroke-width="2px"
    fill="none"></path>
</svg>

Result

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # VectorEffectProperty

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`vector-effect`	Chrome – Full support Chrome 80 (Release date: 2020-02-04) footnote Full support	Edge – Full support Edge 80 (Release date: 2020-02-07) footnote Full support	Firefox – Full support Firefox 72 (Release date: 2020-01-07) footnote Full support	Opera – Full support Opera 67 (Release date: 2020-03-03) footnote Full support	Safari – Full support Safari 13.1 (Release date: 2020-03-24) footnote Full support	Chrome Android – Full support Chrome Android 80 (Release date: 2020-02-04) footnote Full support	Firefox for Android – Full support Firefox for Android 79 (Release date: 2020-07-28) footnote Full support	Opera Android – Full support Opera Android 57 (Release date: 2020-03-30) footnote Full support	Safari on iOS – Full support Safari on iOS 13.4 (Release date: 2020-03-24) footnote Full support	Samsung Internet – Full support Samsung Internet 13 (Release date: 2020-12-02) footnote Full support	WebView Android – Full support WebView Android 80 (Release date: 2020-02-04) footnote Full support	WebView on iOS – Full support WebView on iOS 13.4 (Release date: 2020-03-24) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support