ダンサー兼フロントエンドエンジニアのシスコです！
もう夏も終わりにさしかかってますね！ 今年も夏らしいことはひとつもしていません。夏で思い出すものといえば、子供のころ夏休みにやっていた「幽遊白書」（暗黒武術会編まで）。今でも鮮明に思い出せるくらい毎年見ていました。最近も見返したのですが、やっぱり面白かったですね！
さて、早いことに、フロントエンドエンジニアを超初心者からはじめて、気づいたら1年とちょっとが経ってしまいました。そんな今日この頃、あるサイトを見て「こういうやり方もあるのかっ……！」と少しテンションが上がった学びを共有したいと思います！
SVGスプライト
SVGスプライトとは、CSSスプライトのように複数のSVGをひとつのファイルにまとめて扱う手法のこと。
いくつか手法があるのですが、最近学んだのはインラインHTMLをuse要素で参照するというものです。
symbol要素でグループ化
use要素で呼び出すために、使用する複数のSVGをsymbol要素でグループ化させます（同じようなグループ化要素でgタグがあります）。
- symbol要素の特徴
- ・gタグはgの部分が描画されるが、symbolはそのままだと描画されない。
useで指定することで描画させられる。 - ・viewboxが指定できるので、描画のときwidth, heightで拡大・縮小できる。
（レスポンシブにいいねっ！）
symbolの中は、path, circle, polygonなど図形部分を記述させます。
各SVGにidをつけるのも忘れないでください！ use要素で呼び出すときに必要になるのでっ！
<div id="preload-svg">
<svg style="display:none;">
<!-- facebook -->
<symbol id="icon-facebook" viewBox="0 0 16 16">
<path d="M9.5 3h2.5v-3h-2.5c-1.93 0-3.5 1.57-3.5 3.5v1.5h-2v3h2v8h3v-8h2.5l0.5-3h-3v-1.5c0-0.271 0.229-0.5 0.5-0.5z"></path>
</symbol>
<!-- twitter -->
<symbol id="icon-twitter" viewBox="0 0 16 16">
<path d="M16 3.538c-0.588 0.263-1.222 0.438-1.884 0.516 0.678-0.406 1.197-1.050 1.444-1.816-0.634 0.375-1.338 0.65-2.084 0.797-0.6-0.638-1.453-1.034-2.397-1.034-1.813 0-3.281 1.469-3.281 3.281 0 0.256 0.028 0.506 0.084 0.747-2.728-0.138-5.147-1.444-6.766-3.431-0.281 0.484-0.444 1.050-0.444 1.65 0 1.138 0.578 2.144 1.459 2.731-0.538-0.016-1.044-0.166-1.488-0.409 0 0.013 0 0.028 0 0.041 0 1.591 1.131 2.919 2.634 3.219-0.275 0.075-0.566 0.116-0.866 0.116-0.212 0-0.416-0.022-0.619-0.059 0.419 1.303 1.631 2.253 3.066 2.281-1.125 0.881-2.538 1.406-4.078 1.406-0.266 0-0.525-0.016-0.784-0.047 1.456 0.934 3.181 1.475 5.034 1.475 6.037 0 9.341-5.003 9.341-9.341 0-0.144-0.003-0.284-0.009-0.425 0.641-0.459 1.197-1.038 1.637-1.697z"></path>
</symbol>
<!-- instagram -->
<symbol id="icon-instagram" viewBox="0 0 16 16">
<path d="M14.5 0h-13c-0.825 0-1.5 0.675-1.5 1.5v13c0 0.825 0.675 1.5 1.5 1.5h13c0.825 0 1.5-0.675 1.5-1.5v-13c0-0.825-0.675-1.5-1.5-1.5zM11 2.5c0-0.275 0.225-0.5 0.5-0.5h2c0.275 0 0.5 0.225 0.5 0.5v2c0 0.275-0.225 0.5-0.5 0.5h-2c-0.275 0-0.5-0.225-0.5-0.5v-2zM8 5c1.656 0 3 1.344 3 3s-1.344 3-3 3c-1.656 0-3-1.344-3-3s1.344-3 3-3zM14 13.5v0c0 0.275-0.225 0.5-0.5 0.5h-11c-0.275 0-0.5-0.225-0.5-0.5v0-6.5h1.1c-0.066 0.322-0.1 0.656-0.1 1 0 2.762 2.237 5 5 5s5-2.238 5-5c0-0.344-0.034-0.678-0.1-1h1.1v6.5z"></path>
</symbol>
</svg>
</div>↑このように、SVGをひとつのファイルにまとめておきます。
use要素を使って描画させる
ひとつにまとめたSVGの中から、使いたいものをuse要素を使って呼び出します！
<svg aria-labelledby="iconFacebook-title" role="img">
<title id="iconFacebook-title">share facebook</title>
<desc>share facebook</desc>
<use xlink:href="#icon-facebook"></use>
</svg>xlink:hrefに先ほどsymbolに振ったidを指定することで、任意のSVGを描画させることができます！
- SVGスプライトのメリット
- ・メンテナンス性が良い（ひとつだけ直したいときや、削除したいときにすぐ対応できる）
・ファイルをひとつにまとめて画像リクエストの回数を減らせる
・ 中身の部分だけ変化するSPA, Pjaxとか真価を発揮しそう
・svg部分のコードがすっきり見える（pathの長いものだと相当鬱陶しい）
その反面、use要素での描画はIE10~では表示されないというデメリットもあります……が……！ そこはsvg4everybodyなどのpolyfillがあるので、そちらを使用して対応させることができます！
svg4everybody
これを最近知って少し驚いたので、知らなかったよって方はぜひ試してみてください。ほんとに良いですよ。
currentColorキーワード
これも同じタイミングで知りました！
currentColorキーワードとは……？
要素の colorプロパティの計算値です。プロパティや、デフォルトでは継承を行わない子要素のプロパティに、色のプロパティを継承させることができます。
currentcolorキーワードを colorプロパティそのものに使うと、color: inheritとして扱われます。
2つの子要素が同じ色のデザインだったとき（例：アイコンと文字が同色）などに非常に有効です（あとでコード書きます）。個別に色を設定せず、currentColorとしておいて親要素に適用させたい色を指定してあげることで、一気に同じ色にさせることができます。
使い回すパーツで、色だけ違うときも親要素の色指定だけ変えてあげることで楽に変更することができます！
自分は今、仕事でだいぶこれを使っています！ 色違いの同じパーツがあったり、SVGにも適用でき、path要素まで辿らなくても色の変更ができたりするので便利です。
まとめ
実用性ある学びが得られて、今それが生かされているので良かったなぁ、と思っています！ イケてるサイトを見て学ぶことの大切さを実感してます！
みなさんも時間があったら、自分の好きなサイトの中身を見てみてください。なかなか面白いですよ！
それではまた！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
