vector-effect

The vector-effect CSS property suppresses specific transformation effects in SVG, thus permitting effects like a road on a map staying the same width no matter how the map is zoomed, or allowing a diagram key to retain its position and size regardless of other transforms. It can only be used with SVG elements that accept the {{SVGAttr("vector-effect")}} attribute. When used, the CSS value overrides any values of the element's vector-effect attribute.

Syntax

/* Keywords */
vector-effect: none;
vector-effect: non-scaling-stroke;

/* Global values */
vector-effect: inherit;
vector-effect: initial;
vector-effect: revert;
vector-effect: revert-layer;
vector-effect: unset;

Values

• 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.

[!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.

Formal syntax

{{csssyntax}}

Examples

Preventing SVG stroke scaling with CSS

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="#ddeeff88">
    <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 {{SVGElement("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.

{{EmbedLiveSample("Preventing SVG stroke scaling with CSS", "500", "250")}}

Overriding SVG stroke scaling values with CSS

In this case, we start with a similar SVG image to the one used in the previous example. Here, the {{SVGElement("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="#ddeeff88">
    <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.

{{EmbedLiveSample("Overriding SVG stroke scaling values with CSS", "500", "250")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{cssxref("stroke")}}
• {{cssxref("basic-shape")}} data type
• SVG {{SVGAttr("vector-effect")}} attribute