PNG を SVG に変換する方法｜ロゴをきれいに、背景は透過

ロゴの PNG を SVG に変換するには、画像をベクターの図形にトレースし、輪郭と色を見直してから書き出します。いちばん大事なのは元画像の鮮明さです。トレースでロゴを拡大縮小に強いデータにはできますが、PNG の時点で潰れている文字や細部までは確実には戻せません。

※ 葉のイラストはトレースの考え方を示したもので、実際の変換結果ではありません。

この記事では、画像のベクター化ツールを使って、ロゴを SVG にする手順を紹介します。白い背景の消し方や、小さなパーツを失わないコツも取り上げます。対応形式は PNG、JPG、WebP（最大 10 MB）で、アカウント登録は要りません。

PNG を SVG に変換すると何が変わる？

PNG は画像を小さな点（ピクセル）の集まりとして保存します。一方、ベクターのパスは形を座標と曲線で表すため、元のピクセルを引き伸ばすことなくサイズを変えられます。

ただし、拡張子が .svg でも、ベクター化されているとは限りません。SVG にはラスター画像をそのまま埋め込むこともでき、W3C の SVG 仕様でも image 要素として定められています。PNG を SVG に入れただけなら、元のビットマップの弱点はそのまま残ります。編集できるロゴにしたいなら、ベクター編集ソフトで選択して色を変えられる、トレース済みのパスが必要です。

トレースはあくまで近似です。ベタ塗りの色やはっきりした境界は形を拾いやすく、ぼかし、影、小さな文字は形を取り戻しにくくなります。ロゴを作ったデザイナーから元のベクターデータをもらえるなら、まずそちらを使ってください。手元にラスター画像しかないときこそ、画像のベクター化が役に立ちます。

トレースする前に PNG を確認する

元のデザインデータから直接書き出したような、いちばん鮮明なロゴ画像を選びます。画面の一部が写り込んだスクリーンショット、斜めから撮った写真、余白が大きすぎる画像は避けたいところです。完成した SVG と見比べられるよう、元画像は残しておきます。

背景にも注意が必要です。画像編集ソフトで見える市松模様は、ふつうは透過部分の表示です。ところが、市松模様そのものが PNG に描き込まれていることもあります。そのファイルをトレースすると、マス目がひとつずつ図形になってしまいます。

小さな文字が入ったロゴは、アップロード前に文字を拡大して見ておきます。PNG の段階で隣り合う線がくっついているなら、細部の設定を上げても離れないことがあります。ぼやけた画像から文字を取り戻そうとするより、編集ソフトで文字を作り直すほうが確実な場合が多いです。

PNG を SVG に変換してロゴをベクター化する手順

1. 画像を読み込み、画像の種類を見る

画像を SVG に変換するツール を開き、画像を選択をクリックするか、PNG をアップロード欄にドロップします。最初の結果が出るまで、ページは開いたままにしておきます。

読み込むと、ツールが初期設定を自動で当てはめます。調整項目が閉じている場合は調整を開き、画像の種類を見ます。フラットなロゴやアイコンならロゴがおすすめです。設定を変える前に、元画像とベクター結果を見比べてください。最初のトレースで主な形がすでに取れていることもあります。

2. 色数の上限を決める

最大色数で配色をシンプルにします。2 色のロゴなら、まず 2 色で試し、両方の色が残るか見てみます。陰影のあるロゴは、もう少し色数が必要です。必要な色は残し、輪郭にできる細かな中間色まで別々の図形にしないのがねらいです。

配色を編集では、色見本を選ぶとその色を変更できます。ブランドカラーを固定を使うと、配色を変えても指定した色は保たれます。似た色見本を選んで選択した色を統合を押せば、統合先の色にまとめられます。調整のたびにプレビューを見直し、特に 2 色が接する部分に注目してください。

3. 細部と滑らかさは別々に調整する

小さな切り欠き、細い線、文字のすき間が消えてしまうときは細部を上げます。不要な点が残るときは下げます。細部を上げると SVG は大きく複雑になりやすいので、高ければよいというものではありません。

滑らかさで輪郭の整い方を調整します。角と曲線は特に注意が必要です。何が効いたのかわかるよう、一度に動かす項目はひとつだけに。拡大して輪郭をチェックしたら、実際にロゴを使うサイズまで縮小して見直します。大きく拡大したときに整って見える変更でも、小さく表示したロゴでは読みにくくなることがあります。

4. 白い背景は慎重に消す

PNG の白い背景を消したいときは白を除去をオンにします。消えるのは外側につながった白い背景で、ロゴの中の白い部分がすべて消えるわけではありません。

白抜きの文字や、外側の背景に接している白いパーツは必ずチェックしてください。囲まれた内側の空間も要注意です。外とつながっていない白い部分は残ることがあります。色付きの背景、影、描き込まれた市松模様は、画像編集ソフトやベクター編集ソフトで別に片付ける必要があるかもしれません。

背景を透過した SVG にするには、ロゴの周りが実際に透過になっている必要があります。書き出したデータを明るい背景と暗い背景の両方に置いてみると、残った白い図形や薄い縁を見つけやすくなります。

5. 書き出して SVG をチェックする

続けて編集するなら、SVG の出力用途でデザインを選びます。Web サイトに載せるなら、コードを軽量化したWebが合っています。処理が終わったらSVG をダウンロードを選びます。

今使っているロゴと差し替える前に、ベクター編集ソフトで開いて次の点をチェックします。

• 図形を選択して、色を変えられる。
• 文字のすき間、狭い間隔、小さなディテールが残っている。
• 色が意図した配色になっている。
• 明るい背景でも暗い背景でも、背景の見え方に問題がない。

印刷や加工に使う場合は、寸法や入稿条件をその作業で使うソフトで確認してください。SVG をダウンロードできたからといって、そのまま入稿できるデータになっているとは限りません。

よくあるトレースの失敗と直し方

輪郭がガタガタする。 より鮮明な PNG があれば、そちらから始めます。滑らかさは少しずつ上げるのがおすすめです。上げすぎると、意図した角まで丸くなります。それでも残る乱れは、パスを手で直す必要があるかもしれません。

図形の数が多すぎる。 最大色数か細部を下げ、大事な部分が残っているか見比べます。ほとんど同じ色が並んでいるなら、配色の中で統合します。

文字の形がおかしい。 トレースした文字は図形になり、編集できるテキストにはなりません。正確な文字の形が必要なときや、あとで文言を変える予定があるときは、編集ソフトで正しいフォントを使って入れ直してください。

よくある質問

PNG を SVG に変換するのは無料ですか？

画像の変換と SVG のダウンロードは無料で、登録は要らず、透かしも入りません。テキストからベクターアートを生成する機能は別のツールで、ログインが必要です。こちらも現在は無料ですが、アカウントごとに 1 日の生成回数に上限があります。

ぼやけたロゴも、SVG にすればくっきりしますか？

拡大縮小できる輪郭は作れますが、元画像にない細部は確実には戻りません。正確さが必要なら、より鮮明な PNG を使うか、崩れた部分を手で作り直すのが確実です。

透過背景は SVG でも保たれますか？

元画像の透過部分にも対応しています。ただ、柔らかい縁や影は簡略化されることがあるので、書き出した結果は一度見ておくと安心です。不透明な白い背景なら白を除去を試し、残った図形をチェックします。

Illustrator（イラレ）の画像トレースとどちらを使えばよいですか？

Illustrator を使える環境なら、画像トレースでも PNG をパスに変換できます。ソフトを入れずにブラウザで済ませたいときや、手元に Illustrator がないときは、画像のベクター化で SVG を作り、Illustrator、Inkscape、Figma などで開いて仕上げる方法があります。色やノードのちょっとした修正だけなら、ベクターエディタ オンラインでもブラウザ上で直せます。

元の PNG がなくてもロゴは作れますか？

テキストからベクター生成 を使えば、説明文からロゴのたたき台を作れます。生成したアートワークを整え、正確なブランド名の文字はベクター編集ソフトで加えてください。

最後は SVG を開いて確かめる

PNG から SVG への変換がうまくいったかどうかは、そのロゴらしさを作る形、色、間隔が残っているかで決まります。鮮明な元画像から始め、気になるところだけを調整し、書き出したファイルは実際に使う場面で見てみてください。手元のロゴがあれば、ロゴの PNG を SVG に変換するところからすぐに始められます。