SVGスプライトにしたい理由
- スプライト生成を自動化したい
- アイコンのちょっとした色変更などでPhotoshopを開くのがつらい
アイコンフォントかSVGかData URIかビットマップか
-
SVG
- 多色にも対応したいから
- 楽にレイアウトしたいから
- HTMLを汚したくないから
- モダンな感じにしたいから
SVG画像呼び出しの選択肢
- 個別ファイル
- スプライト
- fragment identifiers方式（一般的なCSSスプライトと同じ）
- stacks方式（SVGでレイヤーを重ねて、その表示／非表示を指示する）
- インライン記述：
- HTML内にXML形式で記述するため、CSSやJavaScriptでの制御に対応
- defs方式（
defsタグで記述） - symbols方式（
symoblsタグで記述）
どれにするか
-
上記のなかだったら、インライン記述が良さ気かな…？
- 個別ファイルだとリクエスト増えるし、モダンじゃない感
- stacks形式はまだバグが多そう（参考）
- スプライトだとCSSによる色変更などができない？のでインラインのほうが良さ気
- インラインだったらsymbols方式が良さ気（参考）
- The viewBox can be defined on the symbol, so you don't need to use it in the markup (easier and less error prone).
- title and desc tags can be added there as well, making accessibility easier to do right.
- Symbols don't display as you define them, so no need for a block.
- symbolごとにviewBox（画像の表示範囲と表示サイズを指定する属性）を指定できるので色々な形状の画像に対応してるし、titleタグとdescタグを書いておけばアクセシビリティもアップするよ、という話
タスクランナー
-
Gulp
- コミュニティが活発だから
- プラグインがそれなりに多いから
- Gruntよりモダンな感じがするから（雰囲気）
Gulpのプラグイン
使いたい
-
- 個別SVGファイルを結合してスプライト化する（ Gruntプラグインの「grunt-svgstore」と同等）
- symbols方式でも書き出し可能
- フォールバック用pngの書き出し可能
-
- svgoプラグインでSVG画像容量圧縮
気になる
-
- SVGからアイコンフォントを生成
-
- SVGからフォールバック用PNGを生成
-
- PNG、JPEG、GIF、SVGの画像容量圧縮
- PNGはoptipng、GIFはgifsicle、JPEGはjpegtran、SVGはsvgoで圧縮
参考リンク
SVGスプライト化
- SVG "symbol" a Good Choice for Icons
- Icon System with SVG Sprites
- Better SVG Sprites With Fragment Identifiers
- SVG Stacks
- 03-画像形式との比較.md
- Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II
- WebKitでのSVGを背景画像にすると起こるバグ
- GULP SVG SPRITES - ALTERNATIVE WORKFLOW
- HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ
SVG概論
- A Compendium of SVG Information
- アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
- どっちのベクターSHOW!! SVG vs Webフォント を比較する
- Retina対応にSVGは本当に使えるのか？
- スマートフォンサイトにおける画像の最適化と使いどころ
- SVG MANIAX - CSS Nite After dark7
- How to Use SVG Image Sprites
- ドットインストール｜SVG入門（全14回）