前に投稿した「どうでもよかった女」のSVGコード。 inkscapeで出力したままだと無駄な情報が多いので置換や手作業で省サイズ化しています。 Inkscape SVGでの出力が139,017バイトだったのが、省サイズ化で108,995バイトに。 2割減ですね。
省サイズ化の概要は前書いた投稿(↓)の通り。
今回はプレーンSVGで出力して、いらない文字列を消してます。
inkscapeはstyle属性に省略できるはずのデフォルト値も出力してしまいます。 「stroke-miterlimit:4」とか「fill-opacity:1」とかです。 それの削除が一番面倒でしたね。 置換用のスクリプトを組んでおいた方が後で楽かも?
「stroke:none」と「stroke-width:??」のセットも無駄でした。 これは、絵によっては残しておくのが必要なこともあるのかな? まあ、前の投稿では全部削除で。
/svg/defsの下にグラデーションの設定情報があります。 linearGradientとかradialGradientとかです。 この中にあるstop要素のid属性は消してもいいみたいです。 (絵によるかも?)
完全に省サイズ化するためにはlinearGradient要素やradialGradient要素で使われていないモノが無いか、絵のオブジェクトからidを引いて確かめるべきでした。 inkscapeの「Defのバキューム」がきちんと働いていたらそこまでしなくてもいいんですが、inkscapeがまだ開発版ってことでやっておいた方がいいかと。 でも面倒なので今回は割愛で。
面倒といえば、全部のレイヤーに同じだけtransform="translate(x,y)"されてたのをまとめたのは面倒でした。 これは多分、ファイルメニューの「ドキュメントの設定」から「ページサイズを描画全体または選択オブジェクトにあわせる」をしたからですね。 今回は絵をあらかた描き終わってからセリフを入れて余白を決めました。 絵の枠のサイズの四角形を作る → 「～選択オブジェクトにあわせる」でサイズ設定 → 四角形の削除をしてます。 それの影響。 レイヤーのg要素を全部囲うg要素を作ってそちらにtransformを作成 → レイヤー毎のtransformを削除で地味に省サイズしました。 そこまでやらなくても良かったかも?
今回はtransformが全部同じだったのでそれでよかったのですが、オブジェクトの触り方によってはレイヤーごとにバラバラのtransformになってしまうことがあります。 省サイズのためには、inkscapeが公開用のSVGを出力するときに全オブジェクトのtransformをなくして即値にして欲しいところ。 まぁ、無いものねだりですけど。
最初に投稿したSVG画像は80Kバイトでした。 そのときはbloggerに投稿できるか不安だったけど、アッサリ受け付けてくれました。 今回はさらにサイズが増えてます。 それもアッサリ投稿受け付け。 bloggerは懐が広いですね。
でお買い物
