vector-effect

none

この値は、ベクター効果を適用しないことを指定します。つまり、指定する描画で最初に図形の形状を塗りつぶし、次に指定する描画で輪郭線を描くという既定の描画動作が使用されます。

non-scaling-stroke

この値は、オブジェクトの輪郭を描画する方法を変更します。通常、輪郭線はユーザー座標系で計算され、その輪郭線の中が（色やグラデーションで）塗られます。この値の結果、輪郭線の幅が要素の座標変換（不均一な拡大縮小やせん断変換を含む）やズームレベルの変更に依存しない視覚効果が得られます。

non-scaling-size

この値は、要素とその子孫で使用される特別なユーザー座標系を指定します。そのユーザー座標系の拡大縮小は、ホスティング座標空間からの座標変換が変更されても変化しません。しかし、回転や傾きを抑制するようなことはしません。また、ユーザー座標系の原点も指定しません。この値はユーザー座標系の拡大縮小を抑制するため、non-scaling-stroke の特性も持ち合わせています。

non-rotation

この値は、要素とその子孫で使用される特別なユーザー座標系を指定します。そのユーザー座標系の回転や傾きの指定は、ホスティング座標空間からの変換変更にもかかわらず、抑制されます。しかし、拡大縮小の抑制は行われません。また、ユーザー座標系の原点を指定することもしません。

fixed-position

この値は、要素とその子孫で使用される特別なユーザー座標系を指定します。そのユーザー座標系は、ホスティング座標空間からの座標変換があっても、その位置が修正されます。ただし、回転、傾き、拡大縮小の抑制を指定するものではありません。このベクター効果と transform プロパティを同時に定義した場合、そのプロパティがこの効果に使われることになります。

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

結果