PNG を SVG に変換。
PNG、JPG、WebP の画像の形をトレースしてベクターのパスにし、SVG を作ります。残す色の数と、輪郭をどこまで忠実にたどるかを選び、元の画像と見比べてから、SVG コードをコピーするかファイルをダウンロードします。ロゴ、アイコン、フラットなイラストに向いています。ブラウザの中で動くので、画像がアップロードされることはありません。
ロゴ、アイコン、フラットなイラストに向いています。写真は小さな図形が大量にでき、ファイルが大きくなります。
ブラウザ内で動作します。ここに追加したものはアップロードも保存もされません。
SVG を PNG に変換するPNG を SVG に変換する方法
- 画像を選ぶか、上の枠にドロップします。PNG、JPG、WebP に対応しています。
- 色数を決めます。 2 から 24 まで、最初は 8 です。2 色のロゴなら 2〜3 で足ります。色を増やすと陰影が残りますが、図形も増えます。
- 細かさを選びます。 「細かく」は輪郭に忠実、「標準」はたいていのロゴ向き、「なめらか」は曲線が丸くなり図形が減ります。
- 変換して元の画像と見比べ、コードをコピーするか
.svgファイルをダウンロードします。
知っておきたいこと：
- ロゴとアイコン向き。 トレースは、べた塗りの部分を図形に変えます。写真は何千もの小さな図形と大きなファイルになるので、写真は WebP か JPG のままにしましょう。
- 大きな画像。 トレースの前に、長い辺が 1,000 ピクセルになるよう縮小します。ロゴには十分で、SVG も小さく保てます。
- 元データではなくトレース。 デザイナーがロゴの SVG、AI、Figma ファイルを持っているなら、そこから書き出すほうが確実です。トレースは、ビットマップしか残っていないときのためのものです。
Codex で SVG を整える
トレースした SVG はそのまま使えますが、Codex に頼むとプロジェクトで扱いやすくなります。点を減らす、CSS で変えられる 1 色にする、読み込めるコンポーネントにする、といったことです。
トレースした SVG を整える
この SVG は、私たちのロゴをトレースしたものです。見た目を変えずにパスを単純にし、[2px] より小さい図形を消して、メインの色を currentColor にして CSS で変えられるようにし、スクリーンリーダー向けの title を付けてください。そのうえで、size プロパティを持つ [Logo] という [React] コンポーネントにしてください。
よくある質問
この PNG → SVG 変換ツールは無料ですか？
はい。登録も透かしも、1 日の回数制限もありません。
画像はアップロードされますか？
いいえ。ブラウザがあなたのデバイス上で画像をトレースし、SVG を作ります。サイトが数えるのはツールが使われたことだけで、入れた内容は記録しません。
SVG のファイルが大きいのはなぜ？
写真やグラデーションのように、色が多いか細かい模様がある画像なのだと思われます。色数を減らして「なめらか」を選ぶと、結果の下に表示される図形の数が減ります。写真は SVG への変換に向かないので、WebP を使いましょう。
できた SVG はあとで編集できますか？
はい。結果は塗りつぶしのパスでできた普通の SVG で、図形ごとに 1 本のパスです。Figma、Illustrator、Inkscape で開くことも、コードを直接編集することもできます。