Inkscapeを使ってペイント画像をトレースし、SVGファイルを作るときのメモです。 Inkscapeには「ビットマップをトレース」があり、これを使えば簡単にペイント画像をSVGにすることができます。 しかし、この機能は万能ではありません。 パスのノードが非常に多くなったり、微妙な線を読み取ってくれなかったりします。 単純な画像(アイコンやイメージクリップ)なら、手作業でトレースした方が良い場合があります。
手作業でSVG化するとき、Inkscapeに下絵のペイント画像を読み込ませて、それをパスでなぞることになります。 このとき、元画像をそのまま読み込んだのでは下絵とパスが混ざってよくわからない状態になります。 少し加工した物を下絵にした方が良いでしょう。
単純に元画像の明るさを上げて、白っぽい絵にすると楽になります。 白地に黒い線の元画像なら、白地に灰色の線に加工して下絵にします。 Inkscapeに下絵を読み込んだとき、作業済みの部分が黒、未作業の部分が灰色で見えるので分かりやすくなります。
それでも十分なんですが、私の場合は下絵を青くした方が分かりやすかったので、GIMPで青い下絵を作ってみました。
試しに使ったのはこのpng画像です。
以前ActionScriptのネタに使ったヤツ。 自分で描いたので残念な絵になっています。
...気を取り直して、これをGIMPに読み込んで、青っぽい下絵を作ります。 手順は、
-
画像メニュー → モード → グレースケール
- 画像 → モード → RGB
-
色 → 諧調を反転
-
色 → 単色塗り → ダイアログで黄を選択
-
色 → 諧調を反転
-
色 → 明るさ-コントラスト → 明るさ調節
これで青っぽい下絵の完成。 Inkscapeのファイルメニューから下絵を読み込むと、白紙に画像オブジェクトが追加された状態になります。 サイズも調節されていて楽。 これをなぞってSVGにします。
下絵が見えなくなるので、塗りつぶしは後でやります。 線の太さが変わるときは、「ストロークをパスに変換」を使って太さ調節です。
全部トレースしたら、塗りつぶしを設定して、下絵オブジェクトを消し、プレーンSVGで出力すれば完成。 こんな画像になります。
出力されたsvgの内容をhtmlソースに直書きしています。 見れるブラウザは限られているかも。 例えば、Firefoxならabout:configでhtml5.enable=trueにしなければ表示されません。 他のブラウザは、
- Opera 10.53 : x
- IE 8.0 : x
- Google Chrome 4.1 : x
って、全部ダメですね。 しかし、bloggerにsvgはアップロードできないようなので、今回はこの形で。 対応ブラウザが無いけど見たい人は、ソースからsvg以下のタグをコピー&ペーストしてsvgビューアで見てください。
根気があれば、漫画とかもSVG化できそうですね。 ただ、すごく時間がかかります。 デジタルコミックとかがSVG化されたら面白そうだと思っていたんですが、手間がかかりすぎるので無理っぽいです。
ちなみに、出力されたsvgファイルにはなぜかフォントのスタイルが追加されることがあるようです。 ファイルサイズを減らすため、フォントを使っていない場合はテキストエディタでsvgファイルを開いて消しましょう。
でお買い物
