[PR] 記事内に広告が含まれています

SVGで背景画像時に比率を変更できない時の対処法

サイト制作

SVGで背景画像時に比率を変更できない時の対処法

CSSでSVGを背景画像として指定しているときに、background-sizeを変更しても、思ったように図形の大きさが変わらないことがあります。

たとえば、次のように背景画像としてSVGを指定しているケースです。

.point {
  display: block;
  width: 100%;
  padding: 8px 20px 56px;
  background-image: url("images/point-bg.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 140% 100%;
}

この場合、background-size:100% 100%;からbackground-size:140% 100%;に変更しても、SVG内の図形サイズが変わらないことがあります。

一見するとCSSが効いていないように見えますが、原因はCSSではなく、SVG側の縦横比の扱いにある場合があります。

 

background-sizeを変えてもSVGの図形サイズが変わらない原因

SVGにはviewBoxという表示領域の指定があります。

たとえば、次のようなSVGです。

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1400" viewBox="0 0 1100 1400">
  ...
</svg>

このSVGは、横幅が1100、高さが1400なので、縦長の比率を持っています。

そしてSVGでは、preserveAspectRatioを指定していない場合、基本的には縦横比を保ったまま表示されます。

つまり、SVGの中身は「横に伸ばされる」のではなく、「元の比率を保ったまま収まる」ように描画されます。

そのため、CSS側で次のように指定しても、

background-size: 140% 100%;

SVGの中身は縦横比を維持しようとします。

今回のように高さ側が100%で固定されている場合、SVG内の図形サイズは高さ基準で決まります。

その結果、横幅を100%から140%に変えても、図形そのものの見た目サイズが変わらないことがあります。

 

CSSが効いていないわけではない

ここで勘違いしやすいのは、background-sizeが効いていないわけではないという点です。

background-size:140% 100%;を指定すると、背景画像を表示するための領域は横方向に広がります。

しかし、SVG側が縦横比を保って描画されるため、SVGの中にある図形までは横に伸びないことがあります。

つまり、CSSでは背景画像の表示領域を変えています。

しかし、SVGの中身が縦横比を守っているため、見た目としては図形サイズが変わっていないように見えるわけです。

 

対処法1:SVGにpreserveAspectRatio=”none”を追加する

SVGを背景エリアに合わせて横方向にも伸ばしたい場合は、SVGの先頭にpreserveAspectRatio="none"を追加します。

変更前は次のような形です。

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="1400" viewBox="0 0 1100 1400">

これを次のように変更します。

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="1400" viewBox="0 0 1100 1400" preserveAspectRatio="none">

追加するのは、次の部分だけです。

preserveAspectRatio="none"

これで、CSS側のbackground-size:140% 100%;がSVGの中身にも反映されやすくなります。

つまり、背景画像として使っているSVG全体が、指定した横幅と高さに合わせて変形するようになります。

 

preserveAspectRatio=”none”を使う時の注意点

preserveAspectRatio="none"を指定すると、SVG全体が指定されたサイズに合わせて引き伸ばされます。

そのため、SVG内に複数の装飾が入っている場合は、それらも一緒に変形します。

たとえば、背景の楕円だけでなく、点線やアイコンなども同じSVG内に入っている場合、それらも横方向に伸びる可能性があります。

今回のように、ふわっとした背景用の図形だけであれば、大きな問題にはなりにくいです。

しかし、ロゴ、文字、アイコン、正円、人物イラストなど、形が崩れると困る要素には向いていません。

 

対処法2:比率を維持したまま表示する

SVGの形を崩したくない場合は、preserveAspectRatio="none"を使わず、CSS側で比率を維持したまま表示します。

たとえば、次のような指定です。

.point {
  background-size: cover;
}

または、次のように高さを基準にする方法もあります。

.point {
  background-size: auto 100%;
}

この方法ではSVGの比率は保たれます。

ただし、表示領域とSVGの比率が合わない場合、上下左右のどこかが切れる可能性があります。

つまり、比率を守る場合は「切れる可能性がある」。比率を崩す場合は「全体は収まるが形が変形する」。このどちらを優先するかで選ぶことになります。

 

背景装飾なら多少の変形は問題になりにくい

背景に使うSVGが、写真やロゴではなく、抽象的な図形であれば、多少変形しても違和感が出にくいです。

たとえば、淡い色の楕円、雲のような形、波形、斜めの背景などは、端末幅や要素の高さに合わせて少し伸びても自然に見えます。

スマホでは文字サイズや改行位置によって、要素の高さが変わります。

そのため、すべての端末で同じ比率のSVGをぴったり表示しようとすると、かえって調整が難しくなります。

実務では、背景装飾用のSVGは「正確な比率で見せる画像」ではなく、「伸縮しても破綻しにくい装飾パーツ」として扱うことが多いです。

 

単純な図形ならCSSの疑似要素で作る方法もある

背景に置きたい図形が単純な楕円や丸い装飾だけであれば、SVGを使わずCSSの疑似要素で作る方法もあります。

.sc-point {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 20px 56px;
  overflow: hidden;
}

.sc-point::before {
  content: "";
  position: absolute;
  top: 24px;
  right: 35%;
  width: 110px;
  height: 142px;
  background: #fff7e1;
  border-radius: 48% 52% 55% 45% / 44% 48% 52% 56%;
  transform: rotate(5deg);
  z-index: -1;
}

この方法なら、SVGのviewBoxやpreserveAspectRatioに振り回されません。

「この位置に、このサイズの淡い図形を置く」という管理がCSSだけでできます。

ただし、複雑な形やIllustratorで作った背景デザインをそのまま使いたい場合は、SVGのほうが向いています。

 

どの方法を選べばいいか

SVG背景の表示方法は、目的によって選びます。

背景の形が少し変形してもよく、要素全体に自然に広げたい場合は、SVGにpreserveAspectRatio="none"を追加する方法が使いやすいです。

一方で、SVGの形を崩したくない場合は、background-size:cover;やbackground-size:auto 100%;などを使い、比率を保ったまま表示します。

また、単純な楕円や丸い背景装飾だけであれば、SVGではなくCSSの疑似要素で作る方法も実務的です。

 

まとめ

SVGを背景画像として使っていると、background-sizeを変更しても図形サイズが変わらないことがあります。

その原因は、SVGが縦横比を保ったまま描画されているためです。

SVGを横方向にも伸ばしたい場合は、SVGの先頭にpreserveAspectRatio="none"を追加します。

ただし、この指定はSVG全体を変形させます。

背景装飾のように多少形が変わっても問題ない場合には使いやすいですが、ロゴや正確な形を保ちたい画像には向いていません。

SVG背景が思ったように拡大されない時は、CSSだけでなく、SVG側のviewBoxとpreserveAspectRatioも確認してみてください。

タイトルとURLをコピーしました