vector-effect

none

No vector effects are applied to the element, meaning it will be fully affected by transforms as normal.

non-scaling-stroke

The element's drawn stroke width will be physically equal in size to its defined stroke width, even if the element has been scaled up or down in size due to transforms of either itself or its coordinate system. This is the case whether the element is scaled with transforms or by physical resizing of the entire image.

non-scaling-size Experimental

The element will ignore the effects of any scaling transformations.

non-rotation Experimental

The element will ignore the effects of any rotation transformations.

fixed-position Experimental

The element will ignore the effects of any translation transformations.

vector-effect = 
  none                |
  non-scaling-stroke  |
  non-scaling-size    |
  non-rotation        |
  fixed-position      

Here, we start with a 200x100 SVG image that contains two rectangles inside a group. The group is scaled up and rotated. The second of the two rectangles has a class of thinned.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <g
    transform="scale(2.3) rotate(23)"
    transform-origin="100 50"
    stroke-width="3"
    stroke="orange"
    fill="#DEF8">
    <rect x=" 60" y="20" width="30" height="60" />
    <rect x="110" y="20" width="30" height="60" class="thinned" />
  </g>
</svg>

To this SVG image, we apply width: 500px to make it larger than its intrinsic size, and set the classed <rect> to have non-scaled strokes.

svg {
  width: 500px;
}
svg rect.thinned {
  vector-effect: non-scaling-stroke;
}

The result is that the first of the two rectangles has an apparent (visual) stroke width of approximately 17, whereas the second rectangle still has an apparent stroke width of 3 despite having been scaled up in the same way the first rectangle has.

In this case, we start with a similar SVG image to the one used in the previous example. Here, the <g> element is rotated as before, but no scaling is applied to it. The <rect> elements are given a common origin for their transforms, and have their vector-effect SVG attributes set to a value of none.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <g
    transform="rotate(23)"
    transform-origin="100 50"
    stroke-width="3"
    stroke="orange"
    fill="#DEF8">
    <rect
      x=" 60"
      y="20"
      width="30"
      height="60"
      transform-origin="100 50"
      vector-effect="none" />
    <rect
      x="110"
      y="20"
      width="30"
      height="60"
      transform-origin="100 50"
      vector-effect="none"
      class="thinned" />
  </g>
</svg>

As before, the SVG is made larger than its intrinsic size using CSS. This time, scaling is applied to the <rect> elements directly, and the second rectangle is set to have its strokes non-scaled.

svg {
  width: 500px;
}
svg rect {
  transform: scale(2.3);
}
svg rect.thinned {
  vector-effect: non-scaling-stroke;
}

The result is visually identical to that of the previous example. What we can see is that the attribute value of none is overridden by the CSS value non-scaling-stroke, and that the vector effects are honored even though the scaling was done directly on the <rect> rather than on its parent <g> element.

• stroke
• <basic-shape> data type
• SVG vector-effect attribute