画像を SVG に変換

画像を SVG にするということ

PNG はピクセルの格子です。拡大すれば、ピクセルが大きくなるだけです。SVG は数式で表された図形の集まりなので、どんな大きさでもくっきりしたままです。名刺でも、屋外の大看板でも、まだ存在しない画面でも。

問題は、たいてい SVG が手元にないことです。あるのは誰かがメールで送ってきた 400 px の PNG のロゴで、それを看板に載せなければならない、という状況です。

このツールは絵を図形としてなぞります。 色と色の境目を見つけ、そこに本物のベクターパスを引きます。出てくるのはきちんとした SVG で、拡大しても、色を変えても、どのデザインソフトで開いても大丈夫です。

トレースにできること、できないこと

トレースは元のファイルを復元するものではありません。見えているものの周りをなぞるだけで、結果は何を入れるかで決まります。

うまくいくもの：

• べた塗りのロゴやワードマーク
• アイコン、記号、ピクトグラム
• 線画、スケッチ、ペン画
• 図表、地図、間取り図
• ステンシル、シルエット、スタンプ

写真ではうまくいきません。 写真には色と色のきれいな境目がなく、なだらかな変化が何百万もあるだけです。トレースするとそれが数千個の小さな色のかたまりになります。形式上は SVG ですが、たいてい元の写真より*大きく*、何の役にも立ちません。このツールは写真らしき画像を見分けて、こぼれた絵の具のような 12 MB のファイルを渡す代わりに、その旨をお伝えします。

設定について

まず、その画像が何かを選んでください。ロゴ・アイコン、線画、細かいイラスト。これは 3 つのスライダーをちょうどよい出発点に合わせるだけで、あとから調整できます。

• 色の数がいちばん効きます。トレースは絵を少数の色に減らし、それぞれの領域をなぞる仕組みです。2 色のロゴを 8 色でトレースすると、アンチエイリアスのふちまで別の図形として拾ってしまいます。2 色なら、きれいに出ます。色は多いより少ないほうが、ほぼ常に良い結果になります。
• なめらかさは、アンチエイリアスが輪郭に残すガタつきをならします。輪郭がギザギザなら上げ、本来の細部まで丸まってしまうなら下げてください。
• 細部は、どのくらい小さい図形なら捨てるかを決めます。ゴミやノイズを落としたいなら下げ、細かく描き込まれた絵の細部を残したいなら上げてください。

トレースして、右側の結果を見て、調整して、もう一度トレースする。それぞれ数秒です。

背景を除く

背景を除くにすると、絵の後ろにある大きなべた塗りの図形を捨てるので、SVG の背景が白い四角ではなく透明になります。

他人のページや色のついたヘッダーに載せるロゴには、これを使ってください。背景そのものがデザインの一部なら、オフのままにします。

使う前に輪郭を確かめてください

右側のトレース結果を拡大してみてください。鋭くあるべき角、なめらかであるべき曲線、そして小さな文字。ここがトレースの限界の出るところです。

ほぼ合っているのに落ち着かない仕上がりなら、まず色数を減らしてみてください。元の画像がとても小さい場合、そもそも無かった細部をトレースは推測するしかありません。64 px のファビコンが、くっきりしたロゴになることはありません。

アップロードはされません

画像はブラウザの中で読み込まれ、トレースされます。サーバーに届くことはありません。未発表のロゴ、クライアントのブランドマーク、秘密保持契約下の素材なら、これは重要な点です。

サイズ制限も待ち時間もありません。とても大きな画像はトレース前に縮小されます。ある程度を超えると、余分なピクセルは細部ではなくノイズしか増やさないからです。

こんなときに使われています

• PNG でしか残っていないロゴを、看板や印刷に載せることになった
• コードの中で色や大きさを変える必要があるアイコン
• カット、彫刻、刺繍のために用意するスケッチや線画
• カッティングマシンやレーザー用のステンシルやシルエット
• 図表を編集できる形にする
• どんな画面でもくっきり表示される ウェブサイト用の SVG を得る

知っておくとよいこと

• SVG にはきちんとした viewBox が入っているので、CSS や HTML で幅を指定しても正しく拡大縮小されます
• SVG コードをコピーを押すとマークアップがクリップボードに入り、ページやコンポーネントにそのまま貼り付けられます
• 結果は Illustrator、Inkscape、Figma、Affinity で開け、パスを手で編集できます
• 図形が数千個になるのは、ツールが失敗したのではなく、その画像に対して設定が合っていないという意味です。色数を減らしてください
• 逆方向は SVG を PNG に や SVG を JPG に をどうぞ
• 写真の背景を消したい場合は 背景を削除 をどうぞ

使い方

• クリックしてアップロードを押すか、ロゴや図を枠にドロップします
• 何の画像かを選びます：ロゴ・アイコン、線画、細かいイラスト
• トレースするを押し、右側の結果を見ます
• 輪郭が乱れているときは、まず色の数を調整して、もう一度トレースします
• 透明な背景が必要なら背景を除くにチェックを入れます
• SVG をダウンロードを押すか、SVG コードをコピーしてページに直接貼り付けます

関連ツール

• SVG を PNG に — 逆方向
• SVG を JPG に — SVG を平らな画像として
• 背景を削除 — 写真から被写体を切り抜く
• 画像を拡大 — 小さなビットマップを、トレースせずに大きくする
• ファビコン作成 — 結果をサイトのアイコンにする
• 画像を圧縮 — やはりビットマップが正解だったとき