The Acorn Spirit’s Journey

tomisan.com

【今更聞けない】svgファイルの取り扱い【scss】

【今更聞けない】svgファイルの取り扱い【scss】

SVGファイル、近年はsvg形式のファイルを使用する頻度が高くなりましたね！
一昔前は、ウェブで使う画像といえばJPGかGIFか、あるいはPNGでしたのに。

ところで、svgファイルってどんなふうにhtmlに貼り付けてますでしょうか！？

【基本】
htmlファイルに直接imgタグで貼り付ける

<img src="image/xxx.svg" alt="">

【cssでsvgを読み込む】

.classname {
  background-image: url(../image/xxx.svg);
}

上記のように、svgファイルは直接svgファイルを指定して表示できますが
この方法だと、従来のjpgやgif、pngを表示させるのと何ら変わりはありませんね。

しかし、せっかくのsvgですから、
svgファイルらしい（？）使い方も知っておくととても便利に使いまわしが出来ます！

まず、そもそもなんですが
svgファイルをメモ帳などのエディターで開いてみましょう。
jpgやgif、png等の画像ファイルをエディターで開いて編集などしませんが（笑）
svgファイルはエディターで開いて編集することが出来ます。

<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g fill="#212121" fill-rule="nonzero">
      <path d="M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,3.5 C7.30557963,3.5 3.5,7.30557963 3.5,12 C3.5,16.6944204 7.30557963,20.5 12,20.5 C16.6944204,20.5 20.5,16.6944204 20.5,12 C20.5,7.30557963 16.6944204,3.5 12,3.5 Z M12,7 C12.4142136,7 12.75,7.33578644 12.75,7.75 L12.75,11.25 L16.25,11.25 C16.6642136,11.25 17,11.5857864 17,12 C17,12.4142136 16.6642136,12.75 16.25,12.75 L12.75,12.75 L12.75,16.25 C12.75,16.6642136 12.4142136,17 12,17 C11.5857864,17 11.25,16.6642136 11.25,16.25 L11.25,12.75 L7.75,12.75 C7.33578644,12.75 7,12.4142136 7,12 C7,11.5857864 7.33578644,11.25 7.75,11.25 L11.25,11.25 L11.25,7.75 C11.25,7.33578644 11.5857864,7 12,7 Z">
      </path>
    </g>
  </g>
</svg>

たとえば、上記のsvgファイルのタグですが、
簡単なところでいうと、色を変える（16進数を書き換える）のは楽にできますね！
色を変えるために、わざわざイラレ等のアプリを起動する必要はありません。
　

svgのタグを活用する。

【bootstrapのソース使用時に使える escape-svg 】

“escape-svg” は、bootstrap の _functions.scss 使用の場合で利用可能です。

// variables
$circle: url('data:image/svg+xml ,<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#212121" fill-rule="nonzero"><path d="M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,3.5 C7.30557963,3.5 3.5,7.30557963 3.5,12 C3.5,16.6944204 7.30557963,20.5 12,20.5 C16.6944204,20.5 20.5,16.6944204 20.5,12 C20.5,7.30557963 16.6944204,3.5 12,3.5 Z M12,7 C12.4142136,7 12.75,7.33578644 12.75,7.75 L12.75,11.25 L16.25,11.25 C16.6642136,11.25 17,11.5857864 17,12 C17,12.4142136 16.6642136,12.75 16.25,12.75 L12.75,12.75 L12.75,16.25 C12.75,16.6642136 12.4142136,17 12,17 C11.5857864,17 11.25,16.6642136 11.25,16.25 L11.25,12.75 L7.75,12.75 C7.33578644,12.75 7,12.4142136 7,12 C7,11.5857864 7.33578644,11.25 7.75,11.25 L11.25,11.25 L11.25,7.75 C11.25,7.33578644 11.5857864,7 12,7 Z"></path></g></g></svg>');

// scss
.icon-circle {
  background-image: escape-svg($circle);
}

　

【独自エンコ仕様 bg-svg】

bootstrap未使用時はこれで。

// functions
@function url-encode($string) {
  $map: (
    "%": "%25",
    "&lt;": "%3C",
    "&gt;": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&amp;": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}
@function bg-svg($string) {
  @return url('data:image/svg+xml;charset=utf8,#{url-encode($string)}');
}
// scss
.icon-circle {
  background-image: bg-svg('<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#212121" fill-rule="nonzero"><path d="M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,3.5 C7.30557963,3.5 3.5,7.30557963 3.5,12 C3.5,16.6944204 7.30557963,20.5 12,20.5 C16.6944204,20.5 20.5,16.6944204 20.5,12 C20.5,7.30557963 16.6944204,3.5 12,3.5 Z M12,7 C12.4142136,7 12.75,7.33578644 12.75,7.75 L12.75,11.25 L16.25,11.25 C16.6642136,11.25 17,11.5857864 17,12 C17,12.4142136 16.6642136,12.75 16.25,12.75 L12.75,12.75 L12.75,16.25 C12.75,16.6642136 12.4142136,17 12,17 C11.5857864,17 11.25,16.6642136 11.25,16.25 L11.25,12.75 L7.75,12.75 C7.33578644,12.75 7,12.4142136 7,12 C7,11.5857864 7.33578644,11.25 7.75,11.25 L11.25,11.25 L11.25,7.75 C11.25,7.33578644 11.5857864,7 12,7 Z"></path></g></g></svg>');
}

上記の書き方でsvgが表示されない（たとえばIE11等）場合は、svgタグをエンコードします。
エンコードするツール→エンコード・デコードフォーム

// scss
.icon-circle {
  background-image: bg-svg('%3Csvg%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23212121%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M12%2C2%20C17.5228475%2C2%2022%2C6.4771525%2022%2C12%20C22%2C17.5228475%2017.5228475%2C22%2012%2C22%20C6.4771525%2C22%202%2C17.5228475%202%2C12%20C2%2C6.4771525%206.4771525%2C2%2012%2C2%20Z%20M12%2C3.5%20C7.30557963%2C3.5%203.5%2C7.30557963%203.5%2C12%20C3.5%2C16.6944204%207.30557963%2C20.5%2012%2C20.5%20C16.6944204%2C20.5%2020.5%2C16.6944204%2020.5%2C12%20C20.5%2C7.30557963%2016.6944204%2C3.5%2012%2C3.5%20Z%20M12%2C7%20C12.4142136%2C7%2012.75%2C7.33578644%2012.75%2C7.75%20L12.75%2C11.25%20L16.25%2C11.25%20C16.6642136%2C11.25%2017%2C11.5857864%2017%2C12%20C17%2C12.4142136%2016.6642136%2C12.75%2016.25%2C12.75%20L12.75%2C12.75%20L12.75%2C16.25%20C12.75%2C16.6642136%2012.4142136%2C17%2012%2C17%20C11.5857864%2C17%2011.25%2C16.6642136%2011.25%2C16.25%20L11.25%2C12.75%20L7.75%2C12.75%20C7.33578644%2C12.75%207%2C12.4142136%207%2C12%20C7%2C11.5857864%207.33578644%2C11.25%207.75%2C11.25%20L11.25%2C11.25%20L11.25%2C7.75%20C11.25%2C7.33578644%2011.5857864%2C7%2012%2C7%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

scssの場合、色を変数で管理していることも多々あると思いますが
色指定部分を変数に書き換える場合は下記のようにします。

fill="'+ $color +'"


アイコンをsvgにしていて、ボタンやナビケーションに使用、
hoverやactive時に色を変える、といった色変更はよくあると思いますが、
色違いのアイコンファイルをわざわざ用意してもいいのですけど
scss上でタグを書き換えて色変更するという方法もあるわけですね。


svgファイル使用時に注意する点としては、

illustrator等にて作成、”書き出し“したままのsvgファイルは、
データの幅・高さサイズが（viewBox=””）整数になっていない場合が多いです。

デザインから書き出したsvgファイルをイラレで開き、
アートボードのサイズを整数に直し（例：アートボードが24✕24ピクセル ⇒ viewBox=”0 0 24 24″）、
さらに、余分なグループは解除、また、
レイヤー名を日本語のままにしておくと、svgタグの中に日本語が入ってしまいますので
レイヤー名にアルファベットで名前を付けてください。

実はこれが一番面倒くさい作業だったりしますね。
昨今、svg形式で書き出すことが多々ありますが、アイコンのviewBoxサイズの統一は必須かなと。

なぜ整数がいいのか、とか
できれば偶数の数値で揃えたいんだよ、とか
そういう話は機会があればまた。

コメントは受け付けていません。