PNGをSVGに変換:ロゴ・アイコンをベクター化

PNGのロゴ・アイコン・線画をブラウザで編集可能なSVGパスにトレース。無料、アップロードなし、透かしなし。ベクター化の限界も正直に説明します。

ブラウザーネイティブ
プライバシー第一
無料

今すぐ変換

ファイルをここにドラッグ&ドロップ

または

使い方

ロゴが平坦化されたPNGとしてしか残っていないと、繰り返し悩みのタネになります。マーケティングは看板で鮮明に使いたい、開発チームはファビコンとして欲しい、資料ではRetinaディスプレイで4倍サイズに置きたい——けれども拡大するたびにぼやけるか、ジャギーが出てしまいます。SVGはこれを解決します。形をピクセルではなく数式として保存するため、どんなサイズでも鮮明に描画されるからです。問題は、PNGには形が一切含まれておらず、色のついた点の格子しかないことです。そこから取り出せるものは何もありません。 そのため、このツールは元のベクターを復元するのではありません。新しいベクターをトレースします。ビットマップをピクセルにデコードし、約16色のパレットに減色して、それらの色領域の境界にベクターパスと曲線を当てはめます(imagetracerjsを使用し、写真ノイズではなくフラットなアート向けに調整しています)。出力はポリゴンから作られた新たな近似です。2色のロゴやきれいなアイコンであれば、トレース結果は元画像とほとんど見分けがつかず、その後も自由に編集できます。 同じ手法は写真ではうまくいきません。写真には数千のほぼ同じ階調があり、はっきりしたエッジがないため、トレーサーはそれを四角ばった色のゾーンに押し込むか、数万もの細かいパスを吐き出し、元のPNGより大きくて見栄えの悪いSVGになってしまいます。ロゴ、アイコン、線画、ステンシル、単色のUIスクリーンショットこそが得意分野です。 すべてはブラウザ内で行われます。PNGはローカルで読み込まれ、ローカルでトレースされ、SVGがそのまま手元に返ってきます。アップロードなし、透かしなし、結果への課金もありません。

関連変換ツール

あなたのワークフローに役立つ他の強力なコンバーターを発見してください

PNG最適化ツール:ピクセルそのまま、可逆圧縮

oxipngでPNGファイルを可逆圧縮。フィルターとDEFLATEの最適化でピクセルはそのまま容量だけ削減。ブラウザ内で動作し、アップロードも画質劣化もありません。

PNGをAVIFに変換 - 可逆圧縮で透過もそのまま

ブラウザ上でPNGを可逆圧縮のAVIFに変換。AV1のイントラ符号化が、全ピクセルと透過をそのまま残したままファイルを小さくします。アップロード不要、すべて端末内で完結。

PNGをBase64に変換:PNGをData URIにエンコード

ブラウザ内でPNGをBase64のData URIにエンコード。HTML・CSS・JSに貼り付けて小さなアイコンをインライン化できます。アップロード不要、ワンクリックでコピー、可逆。

PDFをPNGに変換:各ページを鮮明なPNG画像に書き出し

PDFの各ページをブラウザで高解像度のPNGに書き出します。1ページにつき1枚のPNG、複数ページはZIPで、アップロードは一切なし。無料でプライバシーも安心。

PDFをJPGに変換:1ページ1枚のJPEG、すべてブラウザ内で完結

PDFの各ページをブラウザ内で個別のJPGに変換します。ページは白地に重ねてJPEGとして書き出し、複数ページはZIPでダウンロード。アップロードは一切なし。

PNGをWebPに変換:軽量化しつつ透過を保持

PNGをブラウザでそのままWebPに変換。透過を保ったままファイルを軽くします。アップロード不要で、ファイルが端末から出ることはありません。最新のブラウザならどれでも動作します。

機能

  • ファイルアップロード不要
  • 100% プライバシー重視
  • ブラウザー駆動
  • 高速処理
  • 永久無料

対応フォーマット

.png .jpg .jpeg

出力: SVG

技術仕様

input Format PNGラスタービットマップ(JPG/JPEGも可)
output Format SVG(Scalable Vector Graphics、実際のパス)
compression Type 非可逆ベクター化:色の量子化、エッジトレース、曲線フィッティング
quality Retention フラットなロゴ・アイコンは高品質、写真・グラデーションは低品質
color Space Support RGB/RGBA入力、トレース中に約16色へ量子化
max Resolution お使いの端末のメモリのみが制限
processing Time 瞬時、ブラウザ内で実行

主な利点

  • 本物のパストレース。SVGコンテナに包んだビットマップではありません
  • トレース出力はピクセル化やぼやけなくどんなサイズにも拡大可能
  • 完成したSVGに透かしもダウンロード課金もなし
  • 完全にブラウザ内で動作し、ロゴやモックアップが端末を離れません
  • 出力はIllustrator・Inkscape・Figma・Affinityできれいに開いて編集可能
  • パレットを約16色に調整し、鮮明なロゴ・アイコン結果を実現

一般的な使用例

  • 平坦化されたPNGしか残っていないとき、スケーラブルなロゴを再構築
  • あらゆる画素密度に耐える鮮明なアイコンの準備
  • 線画、ステンシル、モノグラムのベクター化
  • CricutやSilhouetteマシン向けのカットファイルの生成
  • 単色のUIスクリーンショットを編集可能な図形に変換
  • Webヘッダーやスプライト向けの軽量でスケーラブルなグラフィックの作成

プロのヒント

  • 最もきれいなトレースには、色数の少ないフラットで高コントラストなアートを使う
  • 写真は避ける。巨大で雑然としたSVGに膨れ上がります
  • 先に背景を切り抜くか消して、トレーサーが余計なものを無視できるようにする
  • より鮮明なエッジ検出のため、手持ちで最も高解像度のPNGから始める
  • 結果をベクターエディタで開き、はみ出した断片を削除してパスを整える
  • 細い線がトレースで消えたら、元のPNGで太くして再度トレースする

よくある質問

いいえ、どのツールにもできません。PNGはピクセルだけなので、元のパス・フォント・レイヤーは完全に失われています。このコンバーターはピクセルをトレースして、見えるものを近似する新しいベクター図形を作ります。結果は元画像のように見え、無限に拡大できますが、あくまで再構築であり元のデータではありません。元の.ai・.svg・.epsファイルがまだあるなら、そちらを使ってください。
トレースは画像を少数のパレットにまとめ、各色領域を輪郭で囲みます。写真には連続的なグラデーションがあり、きれいなエッジがないため、トレーサーはそれを四角ばったゾーンに帯状にまとめるか、数千もの極小のパスを生成します。いずれにせよ肥大化した低精度のファイルになります。写真はPNG・JPG・WebPのまま保ち、フラットなグラフィックだけをベクター化してください。
ソリッドカラーが数色で境界がはっきりしているものすべてです。ロゴ、アプリアイコン、線画、ステンシル、モノグラム、シンプルなイラスト、単色のUIスクリーンショットなどです。色数が少なくコントラストが高いほど、トレースは元画像に近づき、ファイルも小さくなります。
はい。出力は実際のパスからなる標準的なSVGなので、Illustrator・Inkscape・Figma・Affinity Designerで開いて、色の変更、ギザギザのエッジの平滑化、はみ出した断片の削除、パスの結合ができます。トレースが完璧な形状を生み出すことはまれなので、短い後処理は当たり前であり、シンプルなアートならすぐ済みます。
いいえ。ベクター化は仕組み上、非可逆な近似です。画像はおよそ16色に量子化され、エッジは曲線で当てはめ直されるため、細かいディテール、アンチエイリアスのピクセル、微妙な陰影は簡略化されるか失われます。フラットなロゴでは損失はほとんど見えませんが、ディテールの多いアートでは顕著です。これはPNGからWebP可逆のような可逆なコンテナ変換とは別の処理です。
おおむね維持されます。PNGの完全に透明な部分は図形としてトレースされないため、SVG内でも背景は空のままです。柔らかい半透明のエッジ(アンチエイリアス)は量子化の際に簡略化され、細い縁取りが付くことがあります。最もきれいに切り抜くには、エッジのはっきりした透明背景のPNGから始めるか、トレース前に背景を消しておいてください。
アップロードも透かしもありません。PNGはJavaScriptで完全にブラウザ内でデコード・トレースされ、フル品質のSVGはお使いのマシン上で生成され、何もどこにも送られません。サーバーコストが発生しないため、課金も登録もなく、未公開のロゴやクライアントのブランディングにも安全に使えます。
はい。ベクター化したSVGは、ラスターアートからカットファイルを準備する一般的な方法です。カッティングマシンは辿るための実際のパスを必要とするからです。シンプルで高コントラストの画像を使い、Design SpaceやSilhouette Studioでトレースされたパスを確認し、はみ出した小さな図形を削除してからマシンに送ってください。