完全無料
PNG を SVG に 変換
PNGやJPGなどのラスター画像を拡大しても画質が落ちないSVGベクター画像に変換します。ブラウザ内で安全かつ高速に処理されます。
PNG/JPG をここにドロップ
最大50MBまで対応
または
PNGやJPGなどのラスター画像を拡大しても画質が落ちないSVGベクター画像に変換します。ブラウザ内で安全かつ高速に処理されます。
最大50MBまで対応
PNG から SVG への変換は、基本的にはトレース操作であり、形式の変更ではありません。 PNG はピクセルを保存します。 SVG は幾何学的プリミティブを保存します。ピクセル グリッドからスケーラブルなベクトル パスに移行するには、ビットマップを解釈し、類似した色の領域の周囲に近似形状を描画する必要があります。結果は本当にスケーラブルであり、ピクセル化することなく自由にサイズを変更できますが、ソースを完全に再現したものではありません。写真コンテンツのトレースは、ピクセルレベルの色の変化がすべて形状となり、目的を果たさない巨大な SVG が生成されるため、トレースが不十分です。ロゴ、アイコン、線画、および高コントラストのグラフィックスは、明確に定義された境界を持つ少数の色領域を持っているため、きれいにトレースされます。
このコンバータは、potrace に似たベクトル トレース アルゴリズムの JavaScript ポートである imagetracerjs ライブラリを使用します。 PNG は RGBA ビットマップにデコードされ、ビットマップは構成可能なパレットを使用してカラー領域にセグメント化され、各領域の境界がパスにトレースされ、ベジェ近似を使用してパスが簡略化され、結果のパスが SVG パス要素として出力されます。サーバーにアップロードすることなく、パイプライン全体がブラウザーで実行されます。
トレース パラメーターは、忠実度とファイル サイズの間のトレードオフを制御します。より多くの色とより細かいディテールを使用すると、ソースにさらに一致する大きな SVG が生成されます。色を減らし、トレースを粗くすると、より様式化された雰囲気を持つ、より小さい SVG が生成されます。デフォルトはロゴとアイコン用に調整されています。複雑な画像は、設定を調整したトレース パスから恩恵を受ける場合もあれば、単純にベクトル化の候補として適していない場合もあります。
PNG のベクトル化は、元の解像度を超えて画像を拡大縮小する必要がある場合に最も役立ちます。特にロゴは適度なサイズの PNG として提供されることが多く、看板、Retina ディスプレイ、および大判プリントで鮮明に表示される必要があります。ベクトル トレースは、品質を損なうことなくスケールする SVG を生成します。トレードオフは、元のピクセルへの忠実度です。
また、SVG は、色数が少なく平らな領域が大きいグラフィックの場合、PNG よりも大幅にコンパクトです。 256×256 の PNG アイコンは 8 KB になる可能性があります。 2 色または 3 色を含む同等の SVG は、多くの場合 1 KB 未満です。 Web フロントエンドに配信される UI アイコン ライブラリの場合、ベクター バージョンではバンドル サイズが削減され、すべての表示密度での鮮明さが向上します。
PNG をドロップし、トレース設定を選択し、SVG を生成します。
imagetracerjs は多段階のパイプラインを実装します。色の量子化では、K-means クラスタリングまたはメディアン カットを使用してビットマップを固定数の色に減らします。エッジ検出は領域間のピクセル境界を識別します。輪郭トレースは境界に従って閉じたポリゴンを生成します。線と曲線のフィッティングは、パス データを削減するためにベジェ曲線でポリゴンを近似します。
最も重要なアルゴリズム パラメーターは、色数 (通常: 4 ～ 32)、pathomit (このピクセル数よりも短いパスはノイズとして破棄されます)、ltres (ライン許容値 - 新しいセグメントに分割される前にエッジがどの程度逸脱できるか)、および qtres (二次曲線許容値 - 曲線がどの程度積極的に平滑化されるか) です。デフォルトはロゴに適しています。複雑な画像には、画像ごとの調整が役立ちます。
出力は、パス要素を含む標準の SVG 1.1 です。各色の領域は塗りつぶし属性を持つ 1 つのパスになります。結果のファイルは、任意のブラウザ、ベクトル エディタ、または SVG 対応の設計ツールで開きます。ファイル サイズは主にパス数とノード密度によって決まります。一般的なトレースされたロゴは 1 ～ 10 KB です。