【CSS】SVG画像がズレる・ガタつく原因と対処法 | SACOCHAN-DESIGN

こんにちは！さこちゃんです。

今回は「SVG画像がズレる・ガタつく原因と対処法」についてです。

まろんちゃん

Webページに反映したSVG画像を確認すると、表示が微妙にズレてる・・・？
画像の書き出しやCSSの記述ミスじゃないはずなのに・・・

さこちゃん

それはSVGの特性であるアスペクト比の罠なのだ！！！対処法があるから解説するね〜

はじめに

WebサイトでSVG画像を使っていて、ブラウザで確認すると表示が微妙にズレていたり、隙間ができていたりすることはありませんか？

この記事では、そうしたSVG表示のトラブルを解消する方法を、わかりやすく解説します。

それは、SVGにはアスペクト比が厳密に保たれる特性があるからです。

SVG 画像は、ピクセル単位ではなく座標系（viewBox）で描かれたベクター画像です。
そのため、通常のビットマップ画像（JPG、PNG）とはブラウザの扱い方が根本的に違います。

例えばこちらのSVGコード。

<svg viewBox="0 0 1024 100" xmlns="http://www.w3.org/2000/svg">

ここでいう viewBox="0 0 1024 100" は、「このSVGは、横幅1024、高さ100の座標系で描かれています」という意味です。

つまりアスペクト比は、1024 : 100 に固定されています。

ブラウザは、SVGファイルを読み込むと、以下のようにSVGを表示しようとします。

例えば、表示領域とSVGのアスペクト比が合っていない場合。
以下のように指定していたとします。

img {
  width: 100%;
  height: 100px;
}

しかしブラウザは、SVGの viewBox="0 0 1024 100" により、縦横比1024 : 100 を維持しようとするため、以下のようなズレが出てしまいます。

結果として、表示にズレが発生してしまうのです。

解決策として、svgタグ内に下記を記述します。

<svg ... preserveAspectRatio="none" ...>

これは、「viewBox で定義されたアスペクト比は無視して、実際の表示領域（CSSで指定されたサイズ）にぴったり引き伸ばして表示する」という指示です。

これでアスペクト比の維持を無効にすることができます。

完成デモはこちら。

CSSは下記を指定しています。

.img {
　width: 50%;
}
.img img {
　aspect-ratio: 489.862 / 81.356;
}

いかがでしょうか？

今回は、SVG画像がズレる・ガタつく原因と対処法について解説しました。

SVGは非常に柔軟で便利な描画形式ですが、細かな属性やスタイルの設定次第で表示が大きく変わる繊細な一面もあります。

「なんかズレる…」と感じたら、まずは preserveAspectRatio="none" を疑ってみましょう。

それだけで、あなたのデザインがピタッと気持ちよく決まるかもしれません。

ぜひ参考にしてみてください！