SVGを大きくすると線も太くなる？non-scaling-strokeを作例で比べよう

SVGのアイコンを拡大したら、輪郭の線も太くなった。図形の大きさと、画面に見える線の太さを別に考える方法を試してみよう。

SVGは、図形や線などを使って画像を表す形式。このページではviewBoxと線の指定を持つ小さな図形を、ブラウザの作例で比較する。画像編集ソフトや実ファイルのアップロードは不要だよ。

stroke-widthは、線の幅

SVGのstrokeは輪郭を描く指定で、stroke-widthはその幅。図形を拡大すると、通常はその線も拡大に応じて見え方が変わる。

<svg viewBox="0 0 100 100" width="100" height="100">
  <rect x="20" y="20" width="60" height="60"
        fill="none" stroke="#5445df" stroke-width="4" />
</svg>

この例は100の座標範囲を、100pxの大きさへ描く。表示を200px四方にすれば、座標の広がりに合わせて図形と線が大きくなるんだ。

線を拡大縮小へ追従させたくない場合

図形へvector-effect="non-scaling-stroke"を付けると、図形の変形へ線幅がそのまま比例して変わることを抑えられる。

<rect x="20" y="20" width="60" height="60"
      fill="none" stroke="#5445df" stroke-width="4"
      vector-effect="non-scaling-stroke" />

作例では、同じ座標の正方形を左右の比較欄へ描き、一方だけこの指定を付けている。表示幅を100pxから200pxへ切り替え、図形は大きくなる一方、線幅の見え方がどう違うか見てみよう。

ページ内の作例で確かめる

1. 最初は100pxを選び、二つの輪郭を見る。
2. 200pxへ変え、通常の線が太くなる様子を比べる。
3. non-scaling-strokeの欄では、拡大しても線が同じ太さに見えるか確認する。
4. リセットで100pxへ戻す。

編集部では、ブラウザで両方の描画とサイズ変更を確認した。この作例の単純な均等拡大では、通常の線は4px相当から8px相当へ変わり、指定のある線は4px相当のままになる。

画像全体を何でも固定する指定ではない

non-scaling-strokeは図形の表示サイズを固定する機能ではない。塗りの範囲や、図形の位置まで同じ大きさになるわけではないよ。

また、輪郭が固定されることで、図形が小さくなったときに相対的に太く感じる場合もある。ロゴやアイコンでは、小さい状態でも形がつぶれないかを確認したいね。

変わらないとき・思ったほど合わないとき

指定した対象が、実際に線を描いている図形かを確認しよう。線ではなく塗りで描いた細い長方形は、同じ意味の線幅として扱われない。CSS側のvector-effectが属性を上書きしていないかも見る。

複雑な変換や別の描画環境では、単純な作例だけで結果を保証せず、その環境で確認する。線を保つか、形と一緒に太くするかは、デザインの目的に合わせて選ぼう。

座標の仕組みはSVGのviewBox、色の合わせ方はcurrentColorへ。

参照した公式資料

• MDN：vector-effect

確認日：2026年10月26日。