LoginSignup
49
48

More than 5 years have passed since last update.

@takana8(takehara kanako)

アイコン画像をSVGスプライトにしたい話

Last updated at Posted at 2014-08-18

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スプライト化

SVG概論

タスクランナー

GruntとGulpの比較

49
48
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
49
48