SVGOの最適化で困ること、そして複合パス

これはSVG Advent Calendar 2014の第10日目の参加記事です。


昨日は@kiyopikkoさんによる「SVGOを使ったSVGの軽量化方法（アニメーションさせるときの注意とか）｜2.IDEA」でした。
SVGOは最適化ツールとしてとても便利なのですが、その反面ちょっとやり過ぎて元のファイルから表示が崩れてしまうことがあります。そういった点についてもとても分かりやすく解説されているのでお勧めです。

最適化し過ぎるSVGOの困った部分

今回はせっかくなので便乗して、今日もSVGOに関する話題にしてみます。
そもそもSVGOって？という部分については上記の記事を参考にしてください。


SVGOで最も注意が必要なプラグインが「mergePaths」です。

• svgo/mergePaths.js - svgo - GitHub

例えばこうしたSVGファイルがあったとします。

適用前

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
<style type="text/css">
	path{
		fill:#5BFF34;
		stroke:#008405;
		stroke-width:6;
	}
</style>
	<path d="M35 22c-38 0-40 56 1 57 46 1 41-57-1-57z"/>
	<path d="M138 14L82 55l69 30z"/>
</svg>

Illustratorの用語で「アピアランス」という言葉がありますが、塗り色・線の色・線幅など全く同じアピアランスのオブジェクトが並んだ場合に、このプラグインは「複合パス化」します。
SVGのコード的にはこうなります。

適用後

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
<style type="text/css">
	path{
		fill:#5BFF34;
		stroke:#008405;
		stroke-width:6;
	}
</style>
	<path d="M35 22c-38 0-40 56 1 57 46 1 41-57-1-57zM138 14L82 55l69 30z"/>
</svg>

複合パス化することで複数のpath要素が一つにまとまりその分、記述量が抑えられます。
これが何十、何百個も適用されるとファイルサイズもかなり変わりますし、要素がまとまることでJavaScriptでのDOM操作の際にも高速化するのでメリットも大きいです。


ただし、注意する点もあります。
特にこういうケース。

適用前

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
<style type="text/css">
	path{
		fill:#5BFF34;
		stroke:#008405;
		stroke-width:6;
	}
</style>
	<path d="M35 22c-38 0-40 56 1 57 46 1 41-57-1-57z"/>
	<path d="M88 14L32 55l69 30z"/>
</svg>

図形が重なりあっていると

適用後

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
<style type="text/css">
	path{
		fill:#5BFF34;
		stroke:#008405;
		stroke-width:6;
	}
</style>
	<path d="M35 22c-38 0-40 56 1 57 46 1 41-57-1-57zM88 14L32 55l69 30z"/>
</svg>

このように元の表示から崩れてしまいます。
そうなっては困りますから、SVGOを利用する際には「mergePaths」プラグインは無効にして使うことをお薦めします。

><