Inkscape で png の画像を SVG に変換する方法
Web サイトを実装中に、ロゴを png で作成し、SVG に変換するときに色々と詰まったので、変換方法の手順を log として残しておく.
手順
使用しているツールは Inkscape.
Inkscape を起動してファイルをインポートする
1. Inkscape を起動
2.「ファイル」→「インポート」で SVG にしたい画像ファイルを選択
選択後のダイアログでいろいろな設定ができるが、ここは触らずにそのまま「OK」にする.
インポートした画像をトレースする
1. 「パス」→「ビットマップのトレース」で画像ファイルのアウトラインを抽出
2. 「ビットマップのトレース」タブを編集
画像がプレビューに表示されるまで「明るさの境界」の「しきい値」を変更する.
しきい値を 1 にするとプレビューが真っ暗になる.
今回の場合だと、一部画像がプレビューしきれなかったが画像サイズを大きくすることで解決できた.
「適用」を押下すると、パスの抽出結果がキャンバスに表示される.
元画像は不要になるので削除する.
キャンバスのサイズを縮小する
1. 「ファイル」→「ドキュメントのプロパティ」でプロパティモーダルを開く
2. 「ページサイズをコンテンツに合わせて変更」を押下
3. モーダルをとじてキャンバスに戻る
コンテンツに合わせてキャンバスの大きさが変わる.
ここまでできたら、出来上がったものを .svg で保存する.
以上！