SVG画像を使って、背景を波型や斜めにする方法

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

  1. SVG画像を用意
  2. 疑似要素を使い、画像に重ねる
  3. 斜めに切り抜きたい場合
  4. 外部svgの色を変えたい場合は?
  5. 切り抜きに便利そうなサイト

1 SVG画像を用意

今回は「Custom Shape Dividers」のサービスを使用

illustratorとかAdobe XDとか、何でも良いけれど、
パスでできた、型抜きに使いたい画像を作り、.svg形式で書き出し。

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

2 疑似要素を使い、画像の上に重ねる

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%;
}

考え方として、

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

3 斜めに切り抜きたい場合

三角形の形の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;
}

4 外部svgの色を変えたい場合は?

HTMLに直でsvgを書いている場合、クラス名などをつけておけば、CSS側でもプロパティの変更がしやすそう。。
でも、今回CSSで外部で読み込んでいる場合のsvgファイルだと、
その形での変更がきかないので、別の方法が必要になります。

1 直にsvgファイルを開いて、fill=の値を変える

fill="%23○○○○○○"

#○○○○○○の色にしたい場合、上記のような形で記入。

ただ、使用しているmacのChrome (Version 89)で、
逆に指定が効かなく?なってしまったため、通常の色指定方法で対応。

2 むしろCSSにsvgの中身を埋め込み、fill=を変更

 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=“〇〇” preserveAspectRatio="none"><path  d=“〇〇” fill="%23〇〇〇〇〇〇" /></svg>');

上記の〇〇の部分を、.svgのファイル内から持ってきてコピペ。

例えば、斜めのsvgの例だと、こんなかんじ↓に。

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200,120H0l0-16.5L1200,0V120z" fill="%23ffffff"></path></svg>');

ここから、sassでfillだけを変更するmixinを設定する方法もあるようで、
複数回svgを使いたい場合は、とても効果的そう。
※IE11では表示されないので、その場合は、Base64形式にコードを変換。

3  mask-imageプロパティ で変更

mask-imageにurl(svgファイル)として指定し、
さらにbackground-colorで背景色を指定することで変えられる、
ということです、、、が、、この方法は作業環境でなぜかうまくいかず。

他はCSSスプライトを使う、などもあり。
今回は大きな背景画像1枚を変えるだけなので、1or2で対処。
そもそも対応していないブラウザもあるので、
こちらはまた別のトピックとして、研究をしてゆく予定💡

5 切り抜きに便利そうなサイト

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

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

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

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