久しぶりにInkscapeの「最適化SVG」を使ってみたら結構変わっていたのでメモ。

項目が増えてタブ3つになってます。

オプションタブ

Number of significant digits for coordinates: (範囲:0-10 初期値:5)

座標の数値の精度の指定。数値の有効桁数が指定の数より大きい場合に小数点以下を切り詰めます(四捨五入)。3を指定した場合、3.14159 が 3.14 に、123.4567 が 123 に、9876.5432 が 9877 になります。

カラー値を短縮する (初期値:ON)

色は#RRGGBBAA という形(#+16進数8桁)で記録されていますが、不透明度100%(AAがff)の場合は#RRGGBBに、さらに可能な場合は#RGBの形に短縮します。

CSS属性をXML属性に変換する (初期値:ON)

style要素やstyle属性の指定をXML属性に変換します。また省略可能なもの(デフォルト値と同じ指定)は削除するようです。

Collapse groups(グループの整理) (初期値:ON)

使われていないグループを削除し、その中身を親グループに移します。これには「Remove unuse IDs」も有効になっている必要があります。

同じ属性用のグループを生成する (初期値:ON)

共通の1つ以上の属性を持つ要素をまとめるグループを作ります。

エディターデータを保持する (初期値:OFF)

エディター用の特定の要素・属性を削除しません。現在対応しているのはInkscape、SodipodiとAdobe Illustrator用のデータです。(OFFにすると削除します)

Keep unreferenced definitions (初期値:OFF)

使われていない要素定義を削除しません。

レンダリングバグを回避する (初期値:ON)

いくつかのよく知られているレンダリングバグ(主にlibSVGのもの)を回避します。その代わりSVGのファイルサイズが大きくなります。

SVG出力タブ

Documennt options

Remove the XML declaration (初期値:OFF)

XML宣言(必ずしも必要ではないが、SVG内で特殊文字を使っている場合は必要)を削除します。

メタデータを除去する (初期値:ON)

著作権情報や作者情報、SVG非対応ブラウザ用の情報など全てのメタデータを削除します。

コメントを除去する (初期値:ON)

全てのXMLコメントを削除します。

Embed raster images(ラスター画像の埋め込み) (初期値:ON)

PNGやJPEGなどのラスター画像を外部から読み込んでいる場合、Base64エンコードでテキスト化してSVG内に取り込みます。ファイルサイズは取り込まない場合(SVGと外部画像の合計)よりも大きくなりますが、ファイルが1つにまとまるので取り扱いが楽になります。

viewBoxを有効にする (初期値:OFF)

SVGのページサイズを縦横100%(つまり表示領域いっぱいに表示される)にするとともに、描画領域をviewBox属性に設定します。(これは機能していない気がします)

Pretty-printing(ソースの画面表示用)

Format output with line-breaks and indentation (初期値:ON)

ソースに改行とインデントを入れて整形します。SVGをテキストエディタで修正するつもりがないなら、このオプションをOFFにした方がファイルサイズが小さくなります。

Indentation characters: (スペース/タブ/None 初期値:スペース)

インデントに使う文字の指定です。「None」の場合はインデントをなしにします。このオプションは、上の「Format output with line-breaks and indentation」がOFFの場合は効果がありません。

Depth of indentation: (範囲:0-10 初期値:1)

インデント量の指定です。例えば2を指定するとそれぞれ2つ分のスペースかタブでインデントされます。

Strip the "xml:space" attribute from the root SVG element (初期値:OFF)

ルートSVG要素のxml:space属性を削除します。その結果、連続した空白は1つの空白にまとめられます。(xml:space属性がない場合は、これがOFFでも連続した空白は1つになります)

IDsタブ

Remove unused IDs (初期値:ON)

使われていない全てのIDを削除します。これらはレンダリングに必要ありません。

IDを短縮する (初期値:OFF)

小文字のみを使ってIDを最小の長さにして、よく使われる順に短いIDを割り振ります。例えば、"linearGradient5621"というIDが一番使われているなら、これは"a"になります。

Prefix shortened IDs with:

短縮IDの頭につける文字の指定です。

Preserve manually created IDs not ending with digits (初期値:ON)

#arrowStart や #arrowEnd、#textLabelsのような手作業でつけたわかりやすいID(数字で終わってないもの)をそのままにします。Inkscapeを含む多くのSVGエディターが生成する数字で終わるIDは削除または短縮化します。

Preserve the following IDs:

そのままにしたいIDをカンマ区切りで指定します。

Preserve IDs starting with:

指定した文字で始まるIDをそのままにします。例えば "flag"を指定すると、"flag-mx"、"flag-pt"などがそのままになります。

全ての項目を確認したわけではないので、理解が間違っているところがあるかも。

さて、Inkscapeで最適化SVGを使って保存しようとするとエラーが出るわけですよ。MacPortsでインストールしたInkscapeです。

ダイアログの文章を読んでみると、Pythonにscourというモジュールがインストールされていないのが原因のようです。

PythonがOS付属のものを使うようになっていたので、MacPortsのものに切り替え。これはInkscapeをインストールした時に一緒に入ってるはずです。

sudo port select python python27

そして、Python27用のpip(パッケージ管理ツール)をインストール&選択。

sudo port install py27-pip
sudo port select --set pip pip27

それからようやくモジュールのインストール。

sudo pip install scour

これで最適化SVGが使えるようになりました。

現在登録しているところのおぼえがき。

• 海外の大手老舗DeviantArt。現在新デザイン画面に移行中のようで、ログインして「eclipse」のスイッチをONにすると新デザインになります。
• 国内大手老舗pixiv。割と最近デザインがかわったんでしたっけ?
• 国内大手老舗TINAMI。私の絵に関していえば、pixivよりも閲覧数が多い感じ。
• GALLERIA。今回これを書くにあたってイラストSNSを見て回った際に登録してみた。
• Riot。同じくここにも登録してみた。

DAとpixivはサイズが違うだけで同じカバー絵なのですが、DAの方は大画面向けのセッティングらしく、カバー絵の周囲が切り取られた形の表示になってます。

GALLERIAのカバー絵は、サイズ関係のことが全く説明になく困りました。CSSの指定を見ると、横は最小1200ピクセル、縦は最大345ピクセルになってたので、1200x345のサイズで作りました。横幅が1200ピクセルぴったりのウィンドウで見ない限り、右側か下側が切り取られた表示になります。

絵の背景によく水玉模様を使ってます。これはグレー地(キャラのシルエットをぼかしたり、円形のグラデーションだったり)をハーフトーン処理して作ります。Photoshopならカラーハーフトーンフィルター、GIMPなら新聞印刷フィルターですね。

元のグラデーション

Photoshop カラーハーフトーン

GIMP 新聞印刷(丸)

GIMP 新聞印刷(線形)

GIMP 新聞印刷(ダイヤモンド)

GIMP 新聞印刷(PS四角(ユーグリッド点))

GIMP 新聞印刷(PSダイヤモンド)

Photoshopカラーハーフトーンの設定は、最大半径20pixel、角度が各45。GIMPの方は、セルサイズ20、分離方法RGB、角度が各45、オーバーサンプル4です。

最大半径やセルサイズの数字を大きくすれば、水玉が大きくなるわけです。

さて、模様が丸だけ(GIMPでは四角や線も使えますが)というのはちょっとつまらないですね。ということでここからが本題です。星型やハート型でハーフトーン処理してみましょう。

任意のパターンで処理する方法については叶精作さん(パソコン通信の昔から積極的にノウハウを公開している偉い人)が解説しています。かいつまんでいうと、元絵の上にパターンを通常モード40%とスクリーンモード70%で重ねて統合、トーンカーブをいじって白黒はっきりさせる、というところです。

さっそくスクリーンパターン用のSVGデータを作りました。 (ダウンロード:星型 / ハート型)

GIMPでの手順はこんな感じ。

1. 元絵を用意する。
2. パターンを新規画像として読み込む。ここでは10x10ピクセルのサイズとした。
3. 開いた画像を全選択してコピー。するとパターンのリストにコピーしたものが登録されるので、それをクリック。
4. 元絵の上にパターンを敷き詰めた新規レイヤーを作る。レイヤーメニューから「新しいレイヤーの追加...」を選ぶか、レイヤーダイアログのレイヤー追加ボタンを押すとダイアログが開くので、塗りつぶし色をPatternにして作成。
5. 作ったレイヤーを複製。下のレイヤーをNormalモード/不透明度40%、上のレイヤーをScreenモード/不透明度70%にして画像を統合(「画像」メニュー > 「画像の統合」)。
6. トーンカーブ(「色」メニュー > 「Curves...」)を調整。左下の点を右へ、右上の点を左に寄せる。 左寄りにすると白っぽく、右寄りにすると黒っぽくなるので、ちょうどよい所を探す。
7. 完成。

トーンカーブの調整のほか、描画モードや不透明度を変えると仕上がりが変わってきます。

ちなみに冒頭のグラデーションを処理したらこんな感じ。

星型。パターンの大きさ28ピクセル。

ハート型。パターンの大きさ28ピクセル。

さて、よく見るとパターンの形がいびつになっているところもあります。パターンのサイズが大きく、元絵に明るさが大きく変化する部分があるとそれが顕著になりますね。
同じ写真をパターンサイズ64ピクセルで処理したものですが、右上の明るい部分に接している星の形がいびつになってます。

では別の道具でこの問題を回避してみましょう。Inkscapeのタイルクローン機能を使います。

1. 元絵を読み込み、45度回転させる(「オブジェクト」メニュー > 「変形」の「回転」タブ内)。
2. 新規レイヤーにパターン用のオブジェクトを1つ作る(今回はフォントを利用)。敷き詰める矩形領域(元絵を全部覆う四角)の左上になるように配置する(ガイドを利用すると楽)。
3. パターン用オブジェクトを選択した状態で「編集」メニュー > 「クローン」 > 「タイルクローンを作成...」を選択。ダイアログが開く。
4. 「トレース」タブを開き、一番上の「Trace the drawing under the clone/sprayed items」にチェック。「1.画面から採取するもの:」の「L」(明るさ)を選択。「3.抽出値の適用対象:」の「サイズ」にチェック。「Apply to tiled clones:」の「幅、高さ」を選択、必要なサイズを入力。「保存したタイルのサイズと位置を使用する」のチェックを外す。
5. 「作成」ボタンを押す。(作成されるクローンの数に応じて時間がかかる)
6. できた各クローンの大きさが小さめなので拡大する。クローン元のオブジェクトが選択されているので、45度回転させたのち、拡大処理をする。(クローン元のオブジェクトをいじると全クローンに影響するので、クローン元だけ処理すればよい)
7. 全選択して(元絵は選択しない)逆方向に45度回転させ、元の方向に戻す。
8. 「Objects」リストで元絵の目玉を閉じ、非表示にする。
9. 「ファイル」メニュー > 「PNG画像にエクスポート...」でダイアログを開く。「エクスポート領域」に「ページ」を選択、「画像サイズ」と「ファイル名」を適宜変更して「エクスポート」ボタンを押す。
10. 完成。(透明部分をGIMPで白くしてある)

手順の中でも書きましたが、生成クローン数が多くなるほど処理時間がかかるようになるので注意が必要です。(100や200ぐらいなら問題ないはず)

ではまとめです。

カラーハーフトーン/新聞印刷フィルター

簡単

パターンが丸のみ(新聞印刷ではプラス四角と線)

自作スクリーン

自分でスクリーンパターンを用意すればいろんなパターンが使える

フィルターに比べ手順が多くめんどくさい

トーンカーブなど調整部分をきちんとやらないと綺麗に仕上がらない

Inkscapeタイルクローン

パターンの歪みがない綺麗な仕上がり

フィルターに比べ手順が多くめんどくさい

オブジェクト数に気をつける必要あり

用途に応じて使い分けましょう。

ねこみみさん。