Inkscape で png の画像を SVG に変換する方法

Web サイトを実装中に、ロゴを png で作成し、SVG に変換するときに色々と詰まったので、変換方法の手順を log として残しておく.

手順

使用しているツールは Inkscape.

1. Inkscape を起動

2.「ファイル」→「インポート」で SVG にしたい画像ファイルを選択

選択後のダイアログでいろいろな設定ができるが、ここは触らずにそのまま「OK」にする.

1. 「パス」→「ビットマップのトレース」で画像ファイルのアウトラインを抽出

2. 「ビットマップのトレース」タブを編集

画像がプレビューに表示されるまで「明るさの境界」の「しきい値」を変更する.

しきい値を 1 にするとプレビューが真っ暗になる.
今回の場合だと、一部画像がプレビューしきれなかったが画像サイズを大きくすることで解決できた.

「適用」を押下すると、パスの抽出結果がキャンバスに表示される.

元画像は不要になるので削除する.

2. 「ページサイズをコンテンツに合わせて変更」を押下

3. モーダルをとじてキャンバスに戻る
コンテンツに合わせてキャンバスの大きさが変わる.

ここまでできたら、出来上がったものを .svg で保存する.

以上！