メインコンテンツへスキップ
画像・ベクター化

PNGをSVGに変換する

PNGのロゴ、アイコン、イラストを、透過背景ごと拡大縮小自在なSVGに。ベタ塗り・精細・幾何学的なデザイン向けのプリセット付き。

ここにPNG画像をドラッグ&ドロップ

または ファイルを選択

または画像を貼り付け(Ctrl+V)

PNG · 1ファイル最大20MB

設定

モード

品質

結果

ここに結果が表示されます

くわしく知る

PNGをSVGに:知っておきたいこと

SVGにしやすいPNG

PNGは、ベクター化の出発点としていちばん向いていることが多い形式です。JPEGのようなノイズがなく、透過背景もSVGでそのまま透明になります。書き出したロゴ、アイコン、スタンプ、輪郭のきれいな線画のスキャンなら、いちばんきれいなパスになります。ロゴなら512〜1024pxあれば十分です。

SVGがPNGより大きくなることがある理由

SVGはすべての図形をテキストの座標で記録します。シンプルなロゴなら数KBで済みますが、細かいPNGや写真のようなPNGは何千ものパスになり、元の画像より重くなることもあります。「白黒」モードや「シンプル」プリセットを使えば、図形の数が減ってなめらかになり、ファイルも軽くなります。

PNGをベクターに:色・輪郭・品質

ここでは「PNGをベクターに」も「PNGをSVGに」も同じ意味です。ピクセルを図形としてトレースし、どのベクター編集ソフトやブラウザでも開けるSVGファイルとして保存します。「カラー」モードでは画像の色ごとに別々のレイヤーとして残し、「白黒」モードでは、はんこやカッティングマシン、アイコンに最適な、きれいな1枚のシルエットにします。輪郭をなめらかにするには、手元でいちばん大きなPNGから始め、ベタ塗りのロゴなら「シャープ」プリセット、イラストなら細部のレベルを上げましょう。細部を増やすほど小さな形が残り、減らすほど曲線がなめらかで、ファイルも軽くなります。

PNGとSVG、どちらを使う?

写真、スクリーンショット、やわらかいグラデーションのある画像はPNGのままにしましょう。ピクセルのほうがうまく表現でき、ファイルも小さく済みます。ファビコンからバナーまで、どんなサイズでもくっきりさせたいロゴ、アイコン、イラスト、文字や、コードで色を変えたい画像にはSVGを使います。Webサイトなら両方を使い分けられます。ロゴとアイコンはSVG、写真はPNGかWebPです。

使い方

PNGからSVGへの変換は4ステップ

  1. PNGを追加する

    PNGファイルをドラッグ&ドロップするか、クリックして選びます。ファイルプランなら複数のファイルをまとめて追加できます。手元にPNGがなければ、サンプル画像で試せます。

  2. カラーモードを選ぶ

    フルカラーでベクター化するなら「カラー」、単色のシルエットにするなら「白黒」を選びます。

  3. 品質を調整する

    プリセット(シンプル・精細・シャープ)を選ぶか、細部のレベルや色の精度などの詳細設定を調整します。

  4. SVGをダウンロード

    SVGと元の画像を並べて見比べ、拡大して輪郭を確認してから、ベクターファイルをダウンロードします。

活用ガイド

PNG→SVG変換を使いこなすコツ

しくみ

PNG(Portable Network Graphics)をSVG(Scalable Vector Graphics)に変換すると、ピクセルでできた画像が、図形や曲線を数式で表したものに変わります。PNGがピクセル1つひとつの色を記録するのに対し、SVGは座標、パス、塗りの色で画像を表すので、どんなサイズにしてもギザギザになりません。

PNGは可逆圧縮とアルファチャンネルの透過に対応した、優れたラスター形式です。ただ、看板や名刺、レスポンシブなWebサイトのために画像のサイズを変えたいとき、ピクセルは足かせになります。SVGなら解像度に左右されないので、16×16のアイコンにも1600×1600のポスターにも、同じファイルでどちらもくっきり使えます。

かんたん・すばやい

プライバシーと安全性

このPNG→SVG変換ツールは、WebAssemblyの技術ですべてブラウザ内で動きます。画像がサーバーにアップロードされることはなく、変換はお使いの端末で行われます。傍受されるものも、漏れるデータも、どこかに保存されるファイルもありません。タブを閉じれば、すべて消えます。

発表前のロゴやお客様のデザインも端末から出ません。トレースエンジンはお使いのブラウザで動きます。

ブラウザ内で完結
よくある質問

PNG→SVG変換のよくある質問

PNGからSVGへの変換について知っておきたいこと