WEBデザイナー

【IE11対応】背景画像のsvgを自由に色変えしたい

KUROSU

作成: 2020.12.22 更新: 2020.12.21

1. SVGファイルを最適化
- - Illustratorで作業
  - 複合パスの必要性
2. SVGOMGでさらにダイエット
3. エディタでソースを確認する
1.　テンプレートとなるmixinを定義する
2. URLエンコード(IEのため)
3. テンプレートに挿入
4. fillを変数にして、気軽に色変える
5. サイトカラーを変数で管理している場合

デジタルビジネス部所属Webデザイナーの黒須です。

SCSSを利用して、CSS（background-image）にSVGファイルを指定し、SVGらしくアイコンの色変えをサッと実現する方法を紹介します。

第一章　
SVGファイルそのものを整えてから

色変えするしないにかかわらず、SVGファイルの中身を理解し、気を配りましょう。

1. SVGファイルを最適化

見た目は問題がなさそうなSVGファイル…
しかし

隠れた不要なレイヤー
要らない空パス
パスが閉じていない

など、データとして問題がないかチェックします。

Illustratorで作業

不要な隠しレイヤーなどを全て削除
パスをアウトライン化
同じ色は複合パスでまとめる（cmd + 8）

複合パスの必要性

同じ色（fill1つで指定）のパスは1つにまとめます。
また複合パスでまとめることでデータを軽量化できます。
必要な物だけ残しシンプルでわかりやすいデータを目指します。

例えばこのような2つの＞の字でデザインされた矢印アイコンは、複合パスにできます。

複合パスにせずそのまま書き出した場合、
SVGの中身（テキストデータ）はこんな感じ　※テキストエディタで開く

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
<g><polygon points="69.8,0 0,69.8 176.2,246 0,422.2 69.8,492 315.8,246"/></g>
<g><polygon points="246,0 176.2,69.8 352.4,246 176.2,422.2 246,492 492,246"/></g>
</svg>

<g></g>が2つで、＞の字パスが2つ描かれていることがわかります。

複合パスにした場合

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
<path d="M69.8,0L0,69.8L176.2,246L0,422.2L69.8,492l246-246L69.8,0z M246,0l-69.8,69.8L352.4,246L176.2,422.2L246,492l246-246L246,0z"/>
</svg>

パスが1つになりました。
この1つのパスに対して、fillでカラー指定すれば一発で色が変えることができます。
（パスが複数ある場合それぞれfillを記述しなければならないため余計な手間が増えます）

なおここまでの作業は、コーディングに渡す時点で完了していることが望ましいです。
隠れたレイヤーやパスが本当に要らないものかジャッジするのは作成者（デザイナー）の仕事です。
完成したファイルを次の工程（コーディング）に渡しましょう！
色変えを前提に作成している…などデザイン時に考慮している部分もしっかり共有しましょう。

2. SVGOMGでさらにダイエット

Adobe系・FigmaなどアプリからSVGを書き出した状態では、Web掲載時には必要ない記述が含まれているため、削除してファイルサイズを軽減します。
https://jakearchibald.github.io/svgomg/
ありがたい「SVGOMG」というWebサービスに、サッと湯通しします。
初期設定でひとまず問題ありません。

llustratorで書き出したままのファイル

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 563.56 543.71">
 <g id="レイヤー_1" data-name="レイヤー 1">
  <g id="Layer_1" data-name="Layer 1">
   <path d="M77.14,0,0,77.14,194.72,271.86,0,466.58l77.14,77.13L349,271.86ZM291.7,0,214.56,77.14,409.28,271.86,214.56,466.58l77.14,77.13L563.56,271.86Z"/>
  </g>
 </g>
</svg>

SVGOMGを通したファイル

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 563.56 543.71">
  <g data-name="レイヤー 1">
    <path d="M77.14 0L0 77.14l194.72 194.72L0 466.58l77.14 77.13L349 271.86zM291.7 0l-77.14 77.14 194.72 194.72-194.72 194.72 77.14 77.13 271.86-271.85z" data-name="Layer 1"/>
  </g>
</svg>

すっきりしました。
もっと複雑なファイルであればその効果は歴然です！

3. エディタでソースを確認する

SVGOMGしたファイルに問題がないか、まず確認します。

中身を理解する必要がありますし、この一手間の積み重ねが美しいサイトを作ります。
datan-name、<g></g>、id・height・widthなど、使用する明確な予定が無ければ削除します。
（ie11で表示が豆粒になるバグが発生した場合はwidth/heigthを入れると解決するパターンがあるため適宜残してもよいです）

シンプルなSVG　理想の形

<svg xmlns="http://www.w3.org/2000/svg" viewBox="〇〇〇〇">
  <path d="〇〇〇〇"/>
</svg>

この形を目指します。
エディタでファイルを開き、余計な部分を削除します。

最終的なファイル

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 563.56 543.71">
  <path d="M77.14 0L0 77.14l194.72 194.72L0 466.58l77.14 77.13L349 271.86zM291.7 0l-77.14 77.14 194.72 194.72-194.72 194.72 77.14 77.13 271.86-271.85z"/>
</svg>

シンプルで気持ちがいいです。
これでSVGファイルの準備ができました。

第二章　
いよいよコーディング SCSSでパターン作成

SCSSで簡単にコーディングするために、mixinを作成し使いまわします。
ひとまず完成形はこちらです。

SCSSでの使い方

.btn-A {
  @include svg-arrow(re-color($white));
}

.btn-B {
  @include svg-arrow(000);
}

$white（サイトカラーを格納している変数）や、000(カラーコード)を指定し、その色のSVGを呼び出している感じがありますね。

CSSコンパイル結果

.btn-A {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 563.56 543.71'%3E%3Cpath fill='%23ffffff' d='M77.14 0L0 77.14l194.72 194.72L0 466.58l77.14 77.13L349 271.86zM291.7 0l-77.14 77.14 194.72 194.72-194.72 194.72 77.14 77.13 271.86-271.85z'/%3E%3C/svg%3E") 50% 50%/100% 100% no-repeat;
}

コンパイルすると、この面倒なSVGデータを自動で書き出してくれます。
fill=’%23ffffff’（fill=#fff）　白のカラーコードがちゃんと入っています。

では、このmixinの作り方、具体的に何をしているのか解説します。

1.　テンプレートとなるmixinを定義する

mixinテンプレート

@mixin svg-〇〇() {
  background: url("data:image/svg+xml;charset=utf8,△△")
  50% 50% / 100% 100% no-repeat;
}

mixinはこんな感じです。↑コード内の

〇〇 = mixinに好きな名前をつける（接頭語を「svg-」とするmyルール策定）
△△ = SVGのテキストデータを記述する（次の項目で詳しく解説します）

このmixinを複製し、アイコンのストックを作っていくイメージです。

2. URLエンコード(IEのため)

SVGのテキストデータはそのままではIEが理解できないので、URLエンコードします。
https://yoksel.github.io/url-encoder/
※シングルクウォーテーションにする必要があります
（エンコーダーが一緒にやってくれます便利〜）
※SVGファイルをエディタで開いてください

SVGテキストデータを

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 563.56 543.71">
 <path d="M77.14 0L0 77.14l194.72 194.72L0 466.58l77.14 77.13L349 271.86zM291.7 0l-77.14 77.14 194.72 194.72-194.72 194.72 77.14 77.13 271.86-271.85z"/>
</svg>

エンコードすると、こうなります

%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 563.56 543.71'%3E%3Cpath d='M77.14 0L0 77.14l194.72 194.72L0 466.58l77.14 77.13L349 271.86zM291.7 0l-77.14 77.14 194.72 194.72-194.72 194.72 77.14 77.13 271.86-271.85z'/%3E%3C/svg%3E

3. テンプレートに挿入

エンコードしたSVGのテキストデータを、テンプレート「△△」部分に挿入します

@mixin svg-arrow() {
  background: url("data:image/svg+xml;charset=utf8,△△")
  50% 50% / 100% 100% no-repeat;
}

@mixin svg-arrow() {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 563.56 543.71'%3E%3Cpath d='M77.14 0L0 77.14l194.72 194.72L0 466.58l77.14 77.13L349 271.86zM291.7 0l-77.14 77.14 194.72 194.72-194.72 194.72 77.14 77.13 271.86-271.85z'/%3E%3C/svg%3E")
  50% 50% / 100% 100% no-repeat;
}

色を指定する「fillの指定」を path と d=”〜” の間あたりに追加します。

@mixin svg-arrow() {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 563.56 543.71'%3E%3Cpath fill='%23ffffff' d='M77.14 0L0 77.14l194.72 194.72L0 466.58l77.14 77.13L349 271.86zM291.7 0l-77.14 77.14 194.72 194.72-194.72 194.72 77.14 77.13 271.86-271.85z'/%3E%3C/svg%3E")
  50% 50% / 100% 100% no-repeat;
}

fillの指定

fill='%23ffffff'

#ffffffを直接指定しています。
「#」もエンコードする必要があるので「%23」にします。

これで、白色の矢印アイコンのmixin「svg-arrow()」ができました。
さらに、色の変更を簡単するため、ひと工夫します。

4. fillを変数にして、気軽に色変える

@mixin svg-arrow($color: 000) {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 563.56 543.71'%3E%3Cpath fill='%23#{$color}' d='M77.14 0L0 77.14l194.72 194.72L0 466.58l77.14 77.13L349 271.86zM291.7 0l-77.14 77.14 194.72 194.72-194.72 194.72 77.14 77.13 271.86-271.85z'/%3E%3C/svg%3E")
  50% 50% / 100% 100% no-repeat;
}

変数を定義し、svg-arrow($color: 000) 　例：000をデフォルトに定義

// Before
@mixin svg-arrow() { 〜 }

// After
@mixin svg-arrow($color: 000) { 〜 }

mixinの中で受け取っています。fill=’%23#{$color}’

// Before
fill='%23ffffff'

// After
fill='%23#{$color}'

使用するときは、

.btn-B {
  @include svg-arrow(fff);
}

違う色の指定が簡単です。

5. サイトカラーを変数で管理している場合

@include svg-arrow($red);

このように、変数で管理しているカラーを使いたいですね。
しかし、このままではコンパイルエラーになります。

変数の中身次第ですが、カラーコード用の「#」が入っているため問題が起こります。

$red: #e94527;

したがって、データ的に「#」を削除するfunctionを作成し、正しい形に直せば利用できます。

カラーコード#抜き関数

@function re-color($code) {
  @return str-slice("#{$code}", 2);
}

カラーコード入りの変数を使いたいときは、この「#抜き関数」で補完する感じです

//変数
.btn-A {
  @include svg-arrow(re-color($red));
}

//カラーコード #付きの場合
.btn-B {
  @include svg-arrow(re-color(#fff));
}

//カラーコード数値のみなら、re-color不要
.btn-C {
  @include svg-arrow(fdfdfd));
}

カラー「$red」を指定して、SVGを呼び出すことができました。

また、アイコンの初期カラーは全て変数の「$main」カラーにするmyルールを定めた場合、
mixin側にも「#抜き関数」を使用します。

@mixin svg-arrow($color:re-color($main)) {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 563.56 543.71'%3E%3Cpath fill='%23#{$color}' d='M77.14 0L0 77.14l194.72 194.72L0 466.58l77.14 77.13L349 271.86zM291.7 0l-77.14 77.14 194.72 194.72-194.72 194.72 77.14 77.13 271.86-271.85z'/%3E%3C/svg%3E")
  50% 50% / 100% 100% no-repeat;
}