目次
デジタルビジネス部所属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;
}最後に
SVGの色パターンをCSSだけで増殖させる方法でした。
簡単………しっかり解説すると長くなってしまいました。
サイトの規模・パターン数によってこれがベストではないことをすでに感じていますが、何かお役に立てたらハッピーです。
