SVGエコシステムを探索する
変換ツールから詳細なチュートリアル、ソフトウェアワークフローまで、画像のベクタライズについて知っておくべきすべてのこと。
違いをご覧ください：PNGピクセルから本物のSVGパスへ
PNGはピクセルで作られています。SVGはパスと形状から構築されます。この違いが重要です。
ラスターPNGを適切な解像度を超えて拡大すると、ピクセルグリッドがますます目立つようになり、エッジがぼやけたりギザギザに見えたりすることがあります。適切にベクタライズされたSVGは、代わりにジオメトリを使用してアートワークを記述します。パスは必要なサイズで再描画されます。
PNG: ラスター画像
SVG: ベクターグラフィック
隠されたPNGではない、本物のSVG
.svg で終わるすべてのファイルが真にベクタライズされているわけではありません。
ラスター画像はSVGコンテナ内に単に埋め込まれることがあります。ファイルは技術的にはSVGかもしれませんが、その中のアートワークは依然としてピクセルで作られています。
当社のコンバーターは違います。
PNG内の表示可能な領域を分析し、そこから実際のSVGパスデータを作成します。つまり、結果には、元のPNGを単に別のファイル形式でラップするのではなく、本物のベクターシェイプを含めることができます。
良いPNGからSVGへの変換とは何か？
役立つベクターグラフィックは、単に .svg で終わるPNGのコピーではありません。
良い変換は、編集やスケーリングができ、デザインや製造ソフトウェアに送信できるクリーンで使えるパスを生成します。
トレーサーがノードを作成しすぎたり、重要な色を誤って結合したりすると、生成されたSVGは技術的には有効でも実用的には無用になる可能性があります。
適切な設定でよりクリーンなSVGパスを取得
画像が異なればトレースのアプローチも異なります。すべてのPNGに完璧に機能する単一の設定はありません。
フルカラーベクタライゼーション
アートワークに複数の色が含まれており、個別のベクター領域として保存する必要がある場合に使用されます。
白黒トレース
単色ロゴ、シルエット、クラフトカッティング用プロジェクトに最もクリーンな結果をもたらします。
カラーカウント
トレーサーが作成する異なる色領域の数を制御します。数値を高くするとバリエーションが維持されますが、ファイルの複雑さが増します。
詳細とスムージング
精度とパスの複雑さのバランスを取ります。詳細度を高くするとノイズがトレースされ、スムージングを行うとクリーンな曲線が作成されますが、鋭い角は丸くなります。
重要な色を保持する
ベクタライザーはトレースする前にPNGの色を簡略化します。
少ない色
類似した色合いを単一のクリーンなベクターシェイプに統合することで、ファイルサイズを縮小し、SVGの編集を容易にします。
より多くの色
微妙なバリエーション、影、ハイライトを保持しますが、SVG内のパスの数が大幅に増加します。
ロゴをクリーンでスケーラブルなSVGアートワークに変換
ロゴは、写真のようなディテールではなく、明確な幾何学に基づいていることが多いため、ベクタライズの最適な候補の1つです。PNGロゴをSVGに変換すると、ピクセル化することなく、Webサイト、印刷物、看板などでブランドをシームレスに使用できます。
画像のベクタライズ方法を学ぶどの画像が最もSVGに変換しやすいですか？
ベクタートレースは、ソース画像に明確な形状と認識しやすい境界線が含まれている場合に最適に機能します。
最高の結果
アイコン
シンプルなアイコンは、多くの場合、不要なジオメトリがほとんどないコンパクトでクリーンなベクターシェイプに変換されます。
ラインアート
描画、署名、輪郭、モノクロのアートワークは、白黒トレースで特によく機能します。
フラットなイラスト
色が明確に分かれているイラストは、全体的なデザインを維持しながら、複数のベクター領域として再構築できます。
文字とシンプルなグラフィック
バッジ、シンボル、タイポグラフィベースのアートワーク、デカール、シンプルなグラフィックは、ソース画像の境界線がシャープな場合にきれいにトレースされることがよくあります。
より複雑な画像
写真
写真には、数千、数百万もの微妙な色のバリエーションが含まれています。ベクタライズすることは可能ですが、結果は通常、完璧な写真の再現ではなく、定型化されたベクターの解釈になります。
グラデーション
滑らかなグラデーションは、元の色の変化を近似するために複数のベクター領域を必要とする場合があります。
細かい髪と質感
小さなディテールは多くのパスを生成し、結果として得られるSVGを不必要に複雑にする可能性があります。
影
柔らかい影には、単純なベクタージオメトリとして表現するのが難しい、色調の緩やかな変化が含まれています。
非常に低解像度の画像
ベクタライゼーションでは、元の画像に存在しない詳細を復元することはできません。一般に、より大きくてクリーンなソースPNGは、トレーサーに処理に役立つ情報を提供します。
PNGをSVGに変換する方法
PNGをアップロードする
デバイスからPNGを選択するか、コンバーターにドラッグします。画像はブラウザ内でローカルに処理されます。
ベクタライゼーション設定を選択する
アートワークに応じてフルカラーまたは白黒を選択します。必要に応じて、色数、詳細、スムージング、透明度を調整します。
SVGをプレビューする
ダウンロードする前に、ベクター結果と元のPNGを比較します。通常サイズで2つの画像が同一に見えるかどうかだけを確認するのではなく、形状、色、エッジ、および詳細レベルに注目してください。
必要に応じて簡略化する
SVGにプロジェクトに必要な色数や小さな詳細が多く含まれている場合は、色数やトレースの詳細度を下げてから再度プレビューしてください。通常、シンプルなアートワークの方がシンプルなパスが作成されます。
SVGをダウンロードする
完成したベクターファイルを保存し、互換性のあるベクター編集、カッティング、デザイン、または製造ソフトウェアで開きます。
なぜPNGをSVGに変換するのか？
ピクセル化なしでスケール
PNG画像は固定数のピクセルで構成されています。拡大しすぎるとピクセルが目立ちます。SVGパスはどんなサイズでも数学的に再描画されます。
ベクターシェイプを編集
本物のSVGには、互換性のあるベクターソフトウェアで選択・編集できるパスが含まれています。
パスベースのアートワーク作成
カッティングマシン、レーザーワークフロー、ベクターエディターはパスとジオメトリで動作します。ベクタライズはラスター領域をそのジオメトリに変換します。
どんなサイズでも再利用
適切なベクターロゴやアイコンは、サイズごとに新しいラスターファイルを作成することなく、大小さまざまな用途に再利用できます。
PNG vs SVG: その違いは？
| 特徴 | PNG | SVG |
|---|---|---|
| グラフィックタイプ | ラスター | ベクター |
| 構成要素 | ピクセル | パスと図形 |
| スケーリング | 解像度に依存する | 解像度に依存しない |
| 透明度 | はい | はい |
| 形状編集 | ピクセルベースのワークフロー | ベクターパスの編集 |
| 最適な用途 | 写真、テクスチャ、ラスターアートワーク | ロゴ、アイコン、イラスト、パス |
| カッティングワークフロー | 通常は最初にトレースが必要 | 使用可能なベクターパスを含めることができる |
| 拡大 | ピクセル化する可能性がある | ベクターパスはスケーラブルなまま |
SVGはPNGよりも優れていますか？
常にそうとは限りません。
画像が写真のような詳細、複雑なテクスチャ、またはピクセルレベルの効果に依存している場合は、PNG を使用します。
アートワークがスケーラビリティ、パス編集、幾何学的形状、またはベクターベースのワークフローからメリットを得る場合は、SVG を使用します。
PNGからSVGへのベクタライゼーションはどのように機能しますか？
PNGからSVGへの変換は、より正確には画像ベクタライゼーションまたは画像トレースと呼ばれます。コンバーターは単にファイル拡張子を変更するだけではありません。可視のラスターアートワークをベクタージオメトリとして再構築する必要があります。
簡単に言うと、トレースプロセスには以下が含まれます。
PNGを読み取る
ブラウザは、ソース画像に含まれるピクセル、色、および透明度を読み取ります。
色情報を簡素化する
関連するピクセルの色は、選択した色設定に基づいて、より大きな視覚領域にグループ化できます。
境界を検出する
トレーサーは、画像のさまざまな領域間の意味のあるエッジを識別します。
ベクターパスを作成する
それらの境界は、スケーラブルなSVGパスに変換されます。
滑らかにして簡略化する
不必要な複雑さを軽減し、結果のパスをきれいにし、扱いやすくすることができます。
SVGを生成する
最終的なジオメトリは、SVGファイル内にベクターパスデータとして書き込まれます。
これが、まったく同じPNGから、2つの異なるトレース設定でまったく異なるSVGが生成される理由です。
画像トレースの仕組みを学ぶ一般的なデザインソフトウェアでSVGを使用する
PNGtoSVGによって生成されたSVGは、最新の設計ワークフローのほとんどと互換性のある標準のベクターパスデータを使用します。
ベクターデザイン
- Adobe Illustrator (.ai)
- Inkscape
- Figma
- Affinity Designer
- CorelDRAW
カッティングとクラフト
- Cricut Design Space
- Silhouette Studio
- Sure Cuts A Lot (SCAL)
- Make the Cut
レーザーワークフロー
- LightBurn
- Glowforge App
- LaserGRBL
ウェブ
- HTML5/CSS (インラインSVG)
- Reactおよびフロントエンドフレームワーク
- WordPressとウェブビルダー
(SVGサポートが有効になっている場合)
ブラウザベースのプライベートベクタライゼーション
アートワークを変換するためだけに外部サーバーに保存する必要はありません。PNGtoSVGは、ブラウザでローカルに画像を処理します。
PNGは変換自体のために当社のサーバーに送信されるのではなく、お客様自身のデバイスでデコードおよびトレースされます。
サインアップ不要
アカウントを作成したりメールアドレスを提供したりすることなくコンバーターを使用できます。
変換のためのサーバーアップロードなし
ベクタライズするために画像をデバイスから送信する必要はありません。
透かしなし
ダウンロードされたベクターには当社のロゴはマークされていません。
透明な処理
プロセスをブラックボックスとして提示するのではなく、ベクタライゼーションが何を行うか、設定が結果にどのように影響するかを説明します。