プログラムデザイナーへの旅路プログラムデザイナーへの旅路SVGスプライトを使ってみたお話2017.09.04こんにちは!本日はSVGスプライトのお話をしてみようかと思います。SVGスプライトってなんぞ?cssスプライトって昔の手法でありましたよね。一枚画像でbackground-positionを変更するだけにすれば、画像リクエスト数を減らせるってヤツですね。それのsvgバージョンかなぁと思っていたのですが、全然違いました・・・いや、全然違うことはないのかな・・・svgスプライトを一言でまとめるならsvgファイルを一つにまとめて、使いたい時に呼び出そうぜ!といったものかと。svgをインラインで書くと、とんでもなくhtmlファイルが汚される気しませんか?無駄に行数取られて、何個も書いた時には、メッチャ見にくくなるのがストレスでした。Z"/></svg>こんな感じに。長い・・・1つならまだしも、これが5つ6つとなってくると本当に無理だ・・・ボクはこれが嫌すぎて、画像として扱うようになりました。alt="">こんな感じ。これだとcssで色の変更とかが出来なくなるので、svgの恩恵が50%くらい減ってしまいます。ホバーで色を変えたい場合などは画像をもう一枚切り出して・・・jsでsrc変えて・・・みたいな。凄く面倒だけど、やはり高解像度ディスプレイを気にしなくて良いという点で利用していました。そんな時に出会ったsvgスプライト。svgスプライトとの出会い実は結構前からsvgスプライトの存在は知っていたのですが、冒頭に書いた通り、cssスプライトのsvgバージョンだと思っていたボクは学ぼうともしませんでした。最近またsvgスプライトの記事をよく見るようになったので、使ってみようと思ったが最後・・・ホントに何でもっと早く使わなかったのかと思うくらい便利なヤツでした!という流れで今回の記事に至っております。svgスプライトの設定をしよう使う方法は色々あるみたいなのですが、今回はgulp-svg-spriteを使った方法をご紹介しようと思います。--save-devそして、gulpの設定に入ります。オプションは色々あります。'/img'));});ボクの今回の目的は、元々入っているfill属性、もしくはstyleタグを消した上で、svgを吐き出せればオッケーという感じでしたのでこれで問題なし。svg-spriteコマンドを打つpublic/imgの中に、sprite.svgという名前で全部のsvgファイルがまとめられたファイルが出来上がる出来上がったsprite.svgから必要なものを使うという感じです。ポイントとしては、modeをsymbolで吐き出す所でしょうか。svgスプライトを使ってみようでは実際に使う時はどうするのか。svgスプライトを利用するにあたって、キーワードはsymbolとuseです。いや、実際は他にも色々使う方法はあるのだろうとは思うのですが、今回はsymbolとuseを利用します。svgではpathタグを囲むように<g>というのが入っていたりします。svgスプライトでは、このgタグをsymbolタグに書き換えます。gがないsvgとかもあったりしますが、ようは、pathをsymbolで囲ってやるということですな。svg-spriteによって吐き出されたsprite.svgを見てみましょう。今回はFacebookとTwitterのアイコンを入れてみました。注目すべきは<symbol></symbol>の間にpathが入っていて、それが連続されてるって所ですかね。各symbolにはidが入っています。実はこのid、元ファイルの●●●.svgの●●●の部分が勝手にid名として入ってくれています。吐き出されたコードはどうでもいいので、放っておきましょう。使うべきはこのsymbolに振られたidを利用します。xlink:href="img/sprite.svg#●●●"></use>といった具合に、ファイルのパス→ファイル名→id名を組み合わせれば表示されます。xlink:href="img/sprite.svg#twitter"></use></svg>なんということでしょう・・・これで表示されます。完璧じゃないか!!!!!もう感動レベルですよね。svgスプライトの落とし穴さて、こんな感じで無事表示されるかと思うのですが、いくつか問題点もあります。実際に見てはいないが、IE11で、useは使えないらしい(表示されない)chromeで見たら表示されないこんな問題がボクの調べた範囲では、確認されました。src="/path/to/svg4everybody.js"></script><script>svg4everybody();</script>これで終わり。こっちもオプションがあるみたいですが、試していないので、何のオプションかは不明・・・chrome見れない問題どうやらローカル環境で見れないだけのよう。FirefoxやSafariだと問題ないのですが、chromeだけ、この現象が起こりました。サーバー上では問題なく表示されるので、こちらは気にせず進める・・・もしくは、gulpなどでローカルサーバーを立てる・・・こんな感じで解決できました。終わりに今回もなんだかんだで、もの凄く長くなってしまった・・・SVGスプライト・・・今まで見て見ぬふりをしてきましたが、使ってみると本当に便利だなぁと感じました!実はまだ、実案件では使っていないので、次の案件は利用してみようかと。