2010年6月9日水曜日

inkscapeで出力できるSVGの種類と省サイズ化

inkscapeはたまに落書きしている程度で、人に見せるようなネタは描いてないんですが、一応メモ。

inkscape 0.47 で出力できるSVG形式は以下の3つです。

  • Inkscape SVG (svgz)
  • プレーンSVG (svgz)
  • 最適化SVG

Inkscape SVG はinkscape専用のタグや属性が付いている分、少し大きめです。 それらは描いているときには必要ですが、絵を見るだけの人には不要な情報です。 ウェブサイトなどで公開する絵はInkscape SVGにしない方がいいでしょう。 作業用の形式。 公開する絵は、他の2つの形式のどちらかになります。

普通に公開する絵はプレーンSVGが良さそうです。 ただし、文字を使っていなくてもフォントのスタイル情報が埋め込まれたり、要らない情報がけっこう付いてきます。 ファイルサイズが増えるので、消せるものはテキストエディタで消した方がいいでしょう。

最適化SVGは「ファイルの種類」の下から5番目にこっそりあります。 上の2つの形式にあるような無駄な情報が付いていません。 省サイズで良さそうな形式。 良さそうではあるんですが、ワザワザ上の2つと分けているのが意味ありげですね。 ブラウザでは読み込めるので大丈夫だとは思うんですが、安全策をとるならプレーンSVGにした方がいいのかもしれません。

後で修正するときのことを考えて作業用のInkscape SVGはとって置きつつ、公開用の形式をプレーンにするか最適化にするか考える事になりそうです。

作業用のInkscape SVGから公開用SVGを作る前に、ファイルメニューの「Defのバキューム」で編集中に出来たゴミをとっておきましょう。 どういう条件かは分かりませんが、バキュームした後もいらないパターンが残ることがあるようです。 使っていないパターンが残ってないか編集メニュー/XMLエディタで確認しておきましょう。 パターンは「/svg:svg/svg:defs/」にあります。 パターンのidを確認して整理です。

使うパターンが多いなら、パターンを作るたびにXMLエディタでidを設定した方が良いかも知れません。 XMLエディタ以外でもidを変えられるかもしれませんが、未確認。 idは「pattern_????」の形式にすると分かりやすいかと。 半角英数の文字が使えました。

出力されたSVGファイルにはスペースと改行が付いています。 ファイルサイズを減らしたい場合はこれも削除で。 スペースは「Inkscapeの設定」で「SVG出力/インデントのスペース」を0にすれば減らせますが、行頭のスペースと改行は無くせません。 普段svgファイルをテキストエディタで見る...人は少ないかもしれませんが、そのとき見辛くなるだけです。 インデントはそのままにしておいて、公開するファイルのスペースや改行だけテキストエディタで削除した方がいいでしょう。

zip圧縮されたsvgz形式はサーバーの設定や見る人のブラウザによって表示されたり表示されなかったりするようなので、今は保留で。 将来svgzが使えるようになって、さらに省サイズ化が必要なときは手動で圧縮かな?

  1. 上に書いたように無駄な情報を消したSVGファイルを作成。
  2. gzipで圧縮。
  3. 拡張子をsvgzにすればOK。

最後に、最適化SVGで出力したとき、他の形式と違う表示になったことがありました。 どうやら/svg:svgの属性、widthとheightがviewBoxに変更されているせいのようです。 毎回そうなるわけでは無いようです。 細かい条件は不明。 viewBoxになるとパターンの表示が拡大縮小で変わってしまいます。 気になるときはテキストエディタでviewBox→widthとheightに直す必要があります。 その他にも最適化SVGで変更される要素があるかもしれませんが、今確認したのはそれだけです。