UltKit
画像11
画像変換画像圧縮画像サイズ変更画像切り抜き画像をPDFに変換証明写真作成画像をSVGに変換画像のツール一覧 →
PDF13
PDF圧縮PDF変換PDFを画像に変換PDF結合PDF分割PDFロック解除PDF保護PDFのツール一覧 →
文書・データ7
PDFに変換文書変換画像をテキストに変換（OCR）画像をExcelに変換データ変換電子書籍変換文書・データのツール一覧 →
動画6
動画変換動画圧縮動画を音声に変換動画をGIFに変換動画トリミング音声を動画に変換動画のツール一覧 →
音声4
音声変換音声圧縮音声トリミング音声を文字起こし音声のツール一覧 →
その他のツール22
QRコード作成ZIP圧縮オンラインで解凍タイムゾーン変換単位変換パスワード生成文字数カウントカラーピッカーその他のツール一覧 →
ブログ使い方

PNGをSVGに無料で変換

PNGはベクター化の元画像として最適です。輪郭が劣化しない可逆圧縮で、背景もすでに透明になっていることが多いためです。PNGをアップロードして残す色数を選べば、拡大・編集できる図形で構成されたSVGをダウンロードできます。

画像をSVGに変換

またはJPG, JPEG, JFIF … ファイルをここにドロップ ·

1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除

出力
8

ファイルは当社のサーバーで処理され、30分後に削除されます。

このツールの使い方

  1. 1

    PNGをアップロード

    PNGのロゴ、アイコン、ステッカー、イラストを追加します。一度に最大20枚まで処理できます。大きめに書き出した画像ほどきれいにトレースできるため、幅64 pxのファビコンより幅1000 pxのPNGが向いています。

  2. 2

    トレースモードを選ぶ

    一般的なロゴならカラーモードはカラー、色数は8のままで問題ありません。線画なら白黒に切り替えるか、デザインに使われている色の数に合わせて色数を設定してください。

  3. 3

    SVGをダウンロード

    ベクター化してSVGを作成します。できたファイルを開いて曲線を拡大し、縁がギザギザに見える場合は詳細設定のスムージングを上げて、もう一度実行してください。

SVG変換にPNGが最適な理由

PNGは1995年に、特許の問題がないGIFの代替として作られ、1996年10月にW3C勧告となりました。圧縮は可逆なので、赤と白の境目はそのまま保たれ、ノイズやブロックは出ません。トレース処理にとっては理想的な入力です。2色の境界がピクセルどおりの位置にあるため、当てはめた曲線が元のデザインにぴたりと沿います。

PNGは、ピクセルごとに不透明度を持つアルファチャンネルも扱えます。Figma、Canva、Photoshopなどから書き出したロゴやアイコンは通常これを使っており、透明な部分は背景、不透明な部分は絵柄というマスクとしてそのまま使えます。同じロゴのJPEGには白い四角が焼き込まれているため、JPEGをSVGに変換では強めのスムージングと背景を削除が必要になることが多いです。

入力がきれいなので、このページでは精細さ70、スムージング40を使い、JPEG向けのページでは滑らかにされてしまう小さな角やセリフを残します。設定の詳しい使い方はPNGをSVGに変換するガイドで例を交えて説明しています。

カラー・グレースケール・白黒のトレース

初期設定

カラー

色のグループごとに、塗りつぶしパスのレイヤーになります。

  • 2〜64色
  • ブランドカラーを保持
  • 図形が重なる構造で色を変えやすい
おすすめ: ロゴ、アイコン、ステッカー、フラットなイラスト
濃淡

グレースケール

カラーと同様ですが、グループが灰色の階調になります。

  • 2〜64階調
  • 色かぶりなし
  • 鉛筆画や木炭画に最適
おすすめ: スケッチ、版画、モノクロ印刷物
2階調

白黒

1回の区切りで、各ピクセルがインクか無地のどちらかになります。

  • しきい値1〜254
  • ファイルが最小
  • パスは1セット
おすすめ: 署名、ステンシル、カッティングシートやレーザー加工

線画をPNGからSVGに変換するときのしきい値

  1. 60

    いちばん濃いインクだけが残ります

  2. 128

    初期設定は中間のグレーで分けます

  3. 170

    薄い線やアンチエイリアスの線も残ります

  4. 220

    薄いグレーが黒になり、縁が太くなります

PNG

Portable Network Graphics

PNG は、1996年に PNG Development Group が公開し、のちに W3C と ISO が標準化した可逆のラスター形式です。すべてのピクセルを正確に保持し、完全なアルファ透明に対応し、文字、シャープな輪郭、単色の面をノイズなく扱えます。この正確さから、スクリーンショット、ロゴ、アイコン、UI グラフィックに最適です。代償はサイズで、PNG で保存した写真は、同じ写真の JPEG や WebP の数倍になることがよくあります。すべてのブラウザ、OS、編集ソフトで PNG を開けます。

圧縮方式
可逆
透過
対応
アニメーション
非対応
登場時期
1996 · PNG Development Group
PNG 変換

SVG

Scalable Vector Graphics(SVG)

SVGは、2001年に W3C が標準化した XML ベースのベクター形式です。ピクセルではなく図形、パス、テキストを記述するため、どんなサイズでも鮮明で、ロゴやアイコンでは通常とても小さなファイルになります。透過、CSSによるスタイル指定、スクリプト、アニメーションに対応し、すべてのブラウザーがそのまま表示できます。写真には向かず、複雑なイラストは描画が遅くなることがあります。Illustrator、Inkscape、Figma、ブラウザーで開いて編集できます。

圧縮方式
–
透過
対応
アニメーション
対応
登場時期
2001 · W3C
SVG 変換

PNGはもともと輪郭がくっきりしていて、背景が透明なことも多いため、印刷やカッティングマシン、レスポンシブなサイトでも拡大縮小できるロゴやアイコンにしたいときに、SVGへトレースします。SVGからPNGへの変換はその逆で、SVGを読み込めないアプリ向けにベクターをピクセルへ描画します。

トレース前にPNGを整える

  1. 大きく書き出す

    PNGは表示サイズの2〜3倍で保存してください。曲線はピクセルの縁に合わせて当てはめられるため、ピクセルが多いほど正確な曲線になります。

  2. 効果を平坦にする

    ドロップシャドウ、光彩、グラデーションは、それぞれ何十もの細い帯になってしまいます。書き出す前に非表示にし、必要ならSVG側で付け直してください。

  3. 色数を数える

    デザインに使われているベタ色の数を確認し、その数を入力してください。CNCやレーザー加工には、同じファイルをCAD形式にトレースするPNGをDXFに変換が使えます。

PNGをSVGに変換：よくある質問

アカウント登録なしでPNGをSVGに無料変換できますか？

はい。アカウント登録なしでアップロード、トレース、ダウンロードまででき、1回に最大20ファイルまで処理できます。アップロードしたPNGと完成したSVGは、30分後にサーバーから削除されます。

PNGの透明部分はどうなりますか？

PNGのアルファチャンネルによって、どのピクセルが絵柄の一部かがトレース処理に伝わります。そのため、完全に透明な部分は白い図形にならず、空白のまま残ります。通常は背景を削除を使う必要はありません。PNGに白や色付きの背景が焼き込まれている場合だけオンにしてください。

トレースしたPNGアイコンの各図形のまわりに薄い輪郭が出るのはなぜですか？

なめらかなPNGの縁はアンチエイリアス処理されており、いちばん外側のピクセルは半透明か、2色が混ざった色になっています。トレース処理がこの混ざった色を、余分な細い色として読み取ることがあります。色数を1〜2減らすかスムージングを上げると、このふちどりは図形に溶け込みます。

Illustratorの画像トレースやInkscapeのビットマップのトレースと比べてどうですか？

考え方は同じで、色を減らし、輪郭を見つけ、曲線を当てはめます。Illustratorには「白黒ロゴ」や「16色」などのプリセットがあり、Inkscapeには明るさのしきい値やマルチカラースキャンがあります。ここではカラーモード、色数、しきい値が同じ役割を果たし、インストールは不要です。

PNG内の文字はSVGで編集可能なテキストになりますか？

いいえ。文字は輪郭の図形としてトレースされるため、見た目は保たれますが、文字として打ち直すことはできません。ロゴには向いていますが、文字だらけのスクリーンショットなら打ち直したほうが早いです。

PNGがちょうど5色を使っています。SVGでその色をそのまま保てますか？

色数を5に設定してください。すべてのピクセルが5つのグループに分けられ、ベタ塗りのPNGなら、そのグループが元の色とほぼ一致します。