SVGファイルを使って、背景を波型や斜めにする方法

Webデザインでちょっとしたアクセントをつけたいときなど、
例えばキービジュアルとかで使えそうな
svgファイルを使って拡大しても荒れない方法を調べたので、
備忘録もかねてメモします。

SVG画像を用意

まず最初に、何でも良いけれど、illustratorとかAdobe XDなどを使い、
型抜きに使いたいパス画像を作ったら、svg形式で書き出します。

今回は、Custom Shape Dividersのsvgファイルを使用しました。

Illustratorで作ったデータの場合、
.svgのファイルを開いて、<svg>タグの中にpreserveAspectRatio=”none”を追加してあげると、
画像のアスペクト比を変更できるようになるので、入れておくと扱いやすいです。

疑似要素として、画像の上に重ねる

HTMLに直接svgを記述するやり方もある(その方がCSSでの変更も簡単そう？)けれど、
あまりHTMLの方をごちゃごちゃさせたくなかったので、
今回は、CSSにsvgの外部ファイルを読み込んで表示させる方法を選択しました。

<section class="wave">
<h2>Contents</h2>
</section>

.wave {
	background: url("../img1.jpg") no-repeat center;
	background-size: cover;
	height: 500px;
	position: relative;
	display: flex;
	/*contentsをcenterに*/
	justify-content: center;
	align-items: center;
	font-size: 3.0rem;
	font-weight: 600;
	color: #FDFCDC;
}

.wave::after {
	background: url("../wavesNegative.svg");
	bottom: 0;
	content: '';
	height: 150px;
	position: absolute;
	width: 100%;
}

考え方として、下記のようにsvgファイルを背景画像の位置に合わせて重ねています。

1. 切り抜きたい背景画像をposition:relativeに指定して、基準の位置に。
2. その疑似要素(::after)に、background:でSVG画像を読み込み。
3. 疑似要素をposition:absoluteとして、bottom:0の位置で２つがぴったり重なるように指定。

斜めに切り抜きたい場合

三角形の形のsvg画像を用意して、::beforeと::afterにそれぞれ同じ三角形のsvgを、上下で180度回転して配置しています。

<section class="tilt">
<h2>Contents</h2>
</section>

.tilt {
	background: url("../img1.jpg") no-repeat center;
	background-size: cover;
	height: 500px;
	position: relative;
	display: flex;
	/*contentsをcenterに*/
	justify-content: center;
	align-items: center;
	font-size: 3.0rem;
	font-weight: 600;
	color: #FDFCDC;
}

.tilt::before,.tilt::after {
	background: url("../tilt.svg") no-repeat center;
	content: '';
	height: 50px;
	position: absolute;
	width: 100%;

}

.tilt::before {
	top:0;
	transform: rotate(180deg);
}

.tilt::after {
	bottom: 0;
}

切り抜きに便利なサイト

背景画像を切り抜いて使う際に、
良さそうなジェネレーターがあったのでいくつかご紹介します。

今回、こちらの波型のsvgファイルをダウンロードして使用しました。

https://www.shapedivider.app/

「Custom Shape Dividers」と似たサービス。さらに使い方がシンプルそうです。

Get Waves – Create SVG waves for your next design

A free SVG wave generator to make unique SVG waves for your …

https://getwaves.io/

svgを使わなくてもできる簡単な模様の場合、これも使えそうです。

CSS Section Separator Generator

A collection of customizable CSS section separators, with th…

https://wweb.dev/resources/css-separator-generator

ブラウザによってsvgが正しく表示されないとき

(※2022年3月追記)
斜めの背景を設定していて、ブラウザ別に確認してみたところ、
下記のように、chromeとsafariは表示されている一方、
なぜかfirefoxだけ幅が広がらず、ちゃんと表示がされていない、
ということがありました。(自分だけ？)

色々調べてみた結果、
斜めの擬似要素の箇所に下記のbackground設定を追加すると
直ることもあるようです。
今回はそれをfirefoxのみに加えて、表示を正しくすることができました。

.bg::after {
background-size: 100% 100%;
}

/*firefoxのみに適応する場合*/
@-moz-document url-prefix() {
.bg::after {
background-size: 100% 100%;
}
}