CSS vector-effect Property

Description

The vector-effect property controls how vector graphics rendering treats stroke geometry when the underlying shapes are transformed or scaled. Rather than changing the shape outline itself, it modifies whether the visible stroke thickness follows the element’s geometric transformations or remains tied to a fixed rendering scale. This is primarily relevant for stroked vector elements (it does not affect fills) and is commonly used in SVG contexts where shapes are scaled by viewport or coordinate system changes.

One common usage pattern is to preserve consistent visual weight for lines and icons as they are scaled. By choosing an appropriate rendering mode you can keep the stroke drawn at a stable thickness even when the element is enlarged or shrunk, which helps maintain legibility for icons, diagrams, and map features. This interacts closely with the element’s specified stroke thickness (see stroke-width) and the way you apply geometric transformations — whether through CSS or SVG — such as with transform.

There are practical implications to consider: preserving stroke thickness can make hit‑testing, visual alignment, and the apparent relationship between adjacent shapes behave differently than when strokes scale with geometry. It also affects how strokes look when an element is placed inside a scaled viewBox or nested inside transformed groups. Depending on your rendering needs, you may combine this behavior with other stroke-related presentation settings like stroke to achieve consistent styling across sizes. Use the property where visual consistency across scales is more important than having the stroke scale proportionally with the vector geometry.

Definition

Initial value: none
Applies to: graphics elements , structural element
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.vectorEffect

Syntax

selector { vector-effect: value; }

Values

noneThe default behavior. The stroke scales along with the object. If you double the size of the shape, the stroke width also doubles.
non-scaling-strokeThe most popular value. It ensures the stroke width remains constant regardless of any transformations (scaling, stretching) applied to the element.
non-scaling-size(Experimental/Partial support) The element's size does not scale, but it can still be translated.
non-rotation(Experimental/Partial support) The element does not rotate even if its parent or coordinate system does.
fixed-position(Experimental/Partial support) The element maintains a fixed position regardless of transformations.

Example

HTML

<div class="wrap">

  <h1>vector-effect: non-scaling-stroke (CSS example)</h1>



  <div class="controls">

    <label for="scale">Scale: <output id="scaleOut">100%</output></label>

    <input id="scale" type="range" min="50" max="300" value="100" />

  </div>



  <div class="svgs">

    <figure>

      <figcaption>Non-scaling stroke (CSS)</figcaption>

      <svg class="demo non-scaling" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">

        <rect x="10" y="10" width="180" height="80" fill="none" stroke="#1e90ff" stroke-width="6" />

        <line x1="10" y1="10" x2="190" y2="90" stroke="#ff4500" stroke-width="6" stroke-linecap="round" />

      </svg>

    </figure>



    <figure>

      <figcaption>Normal scaling stroke</figcaption>

      <svg class="demo scaling" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">

        <rect x="10" y="10" width="180" height="80" fill="none" stroke="#1e90ff" stroke-width="6" />

        <line x1="10" y1="10" x2="190" y2="90" stroke="#ff4500" stroke-width="6" stroke-linecap="round" />

      </svg>

    </figure>

  </div>

</div>



<script>

  (function () {

    const scale = document.getElementById('scale');

    const out = document.getElementById('scaleOut');

    const svgs = document.querySelectorAll('.svgs svg');



    function update() {

      const s = scale.value / 100;

      out.textContent = scale.value + '%';

      svgs.forEach(el => {

        el.style.transform = 'scale(' + s + ')';

      });

    }



    scale.addEventListener('input', update);

    update();

  })();

</script>

CSS

/* Layout and basic styles */
:root {
  --gap: 18px;
  --bg: #fbfdff;
  --muted: #6b7280;
}

.wrap {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  max-width: 880px;
  margin: 24px auto;
  padding: 18px;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(13, 30, 37, 0.06);
}

h1 {
  font-size: 18px;
  margin: 0 0 12px 0;
}

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--muted);
}

.controls input[type='range'] {
  width: 240px;
}

.svgs {
  display: flex;
  gap: var(--gap);
  align-items: center;
  justify-content: center;
}

figure {
  margin: 0;
  text-align: center;
}

figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

/* SVG demo sizing and smooth transform */
.demo {
  width: 300px;
  height: 150px;
  display: block;
  background: #ffffff;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 150ms ease;
  transform-origin: center center;
  transform-box: fill-box; /* ensure transform origin is inside the SVG's viewBox */
}

/* Apply the CSS vector-effect property so stroke width does not scale */
.non-scaling rect,
.non-scaling line {
  vector-effect: non-scaling-stroke;
}

/* Visual tweak so the normal SVG shows stroke scaling more clearly */
.scaling {
  opacity: 0.98;
}

/* Small responsive behavior */
@media (max-width: 720px) {
  .svgs { flex-direction: column; }
  .demo { width: 260px; height: 130px; }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS vector-effect property. Hover over a browser icon to see the version that first introduced support for this CSS property.