最新ニュース、芸能、ネットの話題をまとめ読み

 

はしくれフロントエンドの「これ知ってる?」 SVGスプライト・currentColorキーワード

  • このエントリーをはてなブックマークに追加
ダンサー兼フロントエンドエンジニアのシスコです!

もう夏も終わりにさしかかってますね! 今年も夏らしいことはひとつもしていません。夏で思い出すものといえば、子供のころ夏休みにやっていた「幽遊白書」(暗黒武術会編まで)。今でも鮮明に思い出せるくらい毎年見ていました。最近も見返したのですが、やっぱり面白かったですね!

さて、早いことに、フロントエンドエンジニアを超初心者からはじめて、気づいたら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として扱われます。
<color> – CSS | MDN – Mozilla Developer Networkより

2つの子要素が同じ色のデザインだったとき(例:アイコンと文字が同色)などに非常に有効です(あとでコード書きます)。個別に色を設定せず、currentColorとしておいて親要素に適用させたい色を指定してあげることで、一気に同じ色にさせることができます。
使い回すパーツで、色だけ違うときも親要素の色指定だけ変えてあげることで楽に変更することができます!

自分は今、仕事でだいぶこれを使っています! 色違いの同じパーツがあったり、SVGにも適用でき、path要素まで辿らなくても色の変更ができたりするので便利です。

まとめ

実用性ある学びが得られて、今それが生かされているので良かったなぁ、と思っています! イケてるサイトを見て学ぶことの大切さを実感してます!

みなさんも時間があったら、自分の好きなサイトの中身を見てみてください。なかなか面白いですよ!

それではまた!

Yomerumoをフォローする

Yomerumoから人気記事をお知らせします!

Twitter

おもしろ最新記事

記事一覧

注目ニュース

> もっと見る


掲載情報の著作権はニュース提供元企業等またはGMOアドマーケティング株式会社に帰属します。記事の無断転用を禁じます。
すべての人にインターネット
関連サービス