inkscapeで出力するSVGの省サイズ化

1ヶ月くらい前に書いた「inkscapeで出力できるSVGの種類と省サイズ化」の追加情報です。

1. 最適化SVGで出力
2. inkscapeで開きなおす
3. プレーンSVGで出力

をやってみました。

この手順で操作すると、プレーンSVGで出力したときにinkscapeのオブジェクト表示が真っ黒になります。 これは一時的なもので、inkscapeで開きなおしたりブラウザで開いたらちゃんと表示されます。

プレーンSVGで出力した時点では、ファイルサイズは最適化SVGの出力よりやや大きめです。 さらに省サイズ化をするためテキストエディタで次のデータを消します。

• 2行目の「<!-- Created with Inkscape (http://www.inkscape.org/) -->」
• オブジェクトのid
• テキスト用のスタイル情報
• 改行とスペース

削除するidは絵本体の物のみが対象です。 defs内のidを消さないように注意。 リンクオフセットはプレーンSVGで出力するときに普通のパスに変換されるので無関係です。 その他に消してはいけないidとかもあるかもしれませんが、未確認。 もしもの時のために、省サイズ化前のinkscape SVG形式のファイルは残しておきましょう。

inkscapeはテキスト情報がないオブジェクトにもテキスト用のスタイル情報を付けます。 最適化SVGで出力したときにそのスタイル情報は全て消えると思っていたんですが、少し残るようです。 これもテキストエディタの置換で全部削除。

これで、ただ「プレーンSVGで出力→テキストエディタで要らないデータ削除」をするよりは小さくなりました。 絵によるかもしれませんが...

そして、ルート直下のsvgタグの属性にwidth&heightとviewBoxの両方が書いてあるので必要な方だけ残して完成。

わざわざこんな事をしたのは「最適化SVG」が怪しいからなんですよね。 最後に「プレーンSVGで出力」を通しておけばその怪しさが軽減するんじゃないかっていうプランです。 最適化SVGは「保存ダイアログ/ファイルの種類」で他の雑多な出力形式の中にコッソリあります。 何年かたってブラウザのバージョンが上がったら、最適化SVGで出力したファイルだけ表示が崩れるんじゃないかって考えるのは気にしすぎでしょうか? わざわざこんな手順を踏んだらより怪しくなるっていう方が正しいかも?

SVGの仕様について詳しければ怪しいかどうか分かるんでしょうけど、そこまで調べる気力はまだないです。 とりあえず今回気付いた点、オブジェクトのスタイルの書き方がプレーンSVGと最適化SVGでは違ってました。

• プレーンSVG : style属性に全て並べて書く
• 最適化SVG : fillなど結構多くの項目を専用属性に書く

SVGはスタイルの書き方が2種類あるのか。 後で面倒なことになりそうな仕様ですね。