2016-12-15

SVGOでSVGをインライン化

SVGをインラインでHTMLに含める場合、SVGOを通した方が良い。HTMLファイルのサイズへ与える影響が大きいからだ。しかしデフォルトの設定だと、色々消えたり消えなかったりするのでそこそこ設定が必要になる。特にimg要素のalt属性に近いtitle要素のid属性とそれを参照するaria-labelledby属性は残さなければならない。

SVGOの設定はYAMLで書き、CLIに--configオプションでそのファイル名を渡して実行する。

$ svgo --config=.svgo.yml -o - src/img/logo.svg

YAMLでの設定は以下のようにした。

plugins:
  - cleanupIDs: false
  - removeUnknownsAndDefaults:
      unknownAttrs: false
  - removeXMLNS: true

SVGの要素から参照されていないid属性を消す機能と未知の属性を消す機能を無効にすることで、うまくいくようにする。併せてHTMLへインライン化する際にはxmlns属性は不要なので、それを消す機能を有効にしておく。IllustratorやInkscape、Sketchなどが埋め込んでしまう様々な属性が残ってしまうので、事前にそこそこ処理しておく必要がある。

ということでロゴやソーシャル・アイコンがインラインSVGになった。色の制御をCSSに集約できて楽になった。まだ自前でCLIを叩いてインライン化しているので、img要素でSVGファイルを参照していたらインライン化してしまうなど機械化したい。

またaria-*属性残す機能はみなSVGOのコアに欲しい気がするので、data-*属性と同じように設定で残せるようにしたい。