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-*
属性と同じように設定で残せるようにしたい。