画像の埋め込みはベクトル化ではありません
SVG には、埋め込みラスター イメージを含めることができます。コンテナーは拡大縮小されますが、ピクセルはまだぼやけています。真のベクトル化では、領域とエッジを推定し、それらをパス、塗りつぶし、ストローク、シェイプとして表現します。
自動トレースでは、元のベジェ曲線、フォント、レイヤー、またはデザイン意図は復元されません。
最適な候補者
- ハイコントラストのモノクロアイコン。
- フラットカラーのシンプルなロゴ。
- きれいな線画または署名。
- 大きな実線領域を含む図。
- ブロック状のスケーリングが意図されている場合のピクセル アート。
最高品質のソースを使用してください。小さな JPEG では、余分なパスとなるリンギングやぼやけたエッジが発生します。
写真が不適切な SVG を作成する理由
写真には、連続した色、テクスチャ、ノイズ、ソフトエッジが含まれています。トレースすると、何千ものシェイプが作成され、元のファイルよりも大きくて遅いファイルが作成される可能性があります。
意図的にポスタライズされたスタイルが必要でない限り、写真には JPEG、WebP、または AVIF を使用してください。
色数で複雑さを制御
| Source | 開始戦略 | Follow-up |
|---|---|---|
| モノクロアイコン | 単色のトレース | ノードとコーナーを簡略化する |
| フラットロゴ | 限定パレット | タイプと正確なジオメトリを再作成 |
| 線画 | 高コントラスト、適度なスムージング | ギャップやストロークを修復する |
| ピクセルアート | ハードエッジ、スムージングなし | 意図したグリッドに揃える |
| Photo | デフォルトではトレースしない | 必要に応じて手動で説明します |
Jivaroのコンバータを使用してください
- Image to SVG Converter を開きます。
- 現在のバッチ制限内で、PNG、JPG、WebP、GIF、BMP、または AVIF ファイルを追加します。
- ロゴ/アイコン、詳細カラー、シンプルモノクロ、または高速バッチを選択します。
- カラーとトレースのコントロールを調整します。
- 通常ズームと高ズームで比較してください。
- SVG ソースとファイル サイズを検査します。
- 個別のファイルまたは ZIP をダウンロードします。
パスの複雑さを検査する
結果をベクター エディターで開きます。パス/ノード数、ノイズによる小さな形状、重複する塗りつぶし、閉じていないパス、透明度、viewBox、寸法、埋め込まれたラスター データを確認します。単純化は、意図した形を変えるまでしか役に立ちません。
タイポグラフィーとブランドマスターは再構築が必要
文字をトレースすると、元のフォントやカーニングではなく、ピクセルのアウトラインが生成されます。編集可能な状態にしておく必要がある公式ロゴ、アニメーション、印刷物、またはアートワーク用に、タイプおよび幾何学的プリミティブを手動で再作成します。
安全保障と輸出
SVG は XML であり、スクリプト、外部参照、フィルター、埋め込みコンテンツを含めることができます。公開する前に、信頼できない SVG をサニタイズします。 viewBox、寸法、透明度、および意図した最小サイズでの外観を確認します。
実践的な手動再構築ワークフロー
- ラスター参照をロックされたレイヤーに配置します。
- 真の幾何学的プリミティブと対称性を特定します。
- まず大きな形状を再作成します。
- 使用する制御点はできるだけ少なくしてください。
- 正しいフォントまたはカスタム アウトラインを使用してタイポグラフィを再構築します。
- 間隔、半径、ストローク幅を数値で揃えます。
- 小さいサイズと大きいサイズで比較してください。
- 参照を削除し、スタンドアロン ベクトルを検査します。
自動トレースでは大まかなシルエットや色の領域を提供できますが、手動での再構築では意図的なマスターが作成されます。
SVG をウェブ用に最適化する
エディターのメタデータ、非表示レイヤー、不要な精度、重複した定義を削除します。正しい viewBox を保持します。外部依存関係を回避し、信頼できないコンテンツをサニタイズします。レンダリング、インタラクティブな場合のフォーカス/アクセス可能な名前付け、および 1 ページに多数の SVG が表示される場合のパフォーマンスをテストします。
よくある質問
埋め込まれたラスター イメージが含まれているか、ソースのエッジがすでにぼやけている可能性があります。
詳細なトレースにより、何千ものパスと座標を作成できます。
重要な領域を保持する最小限のものを使用し、複雑さを検査します。
それを出発点として扱います。ブランドマスターのジオメトリとタイポグラフィを手動で再構築します。
関連するJivaroアプリ
PNG、JPG、WebP、GIF、BMP、AVIF画像を切り抜いて最適化SVGへ変換し、背景除去、配色調整、色変更を行い、個別ファイルまたはZIPで書き出せます。
アプリを開く出典と参考文献
- スケーラブル ベクター グラフィックス (SVG) 2XXQPH0002QXZW3C · リファレンス
- PotraceXXQPH0002QXZPotrace · 参照
- 画像ファイルの種類と形式のガイドMDN Web ドキュメント · リファレンス
- 画像から SVG コンバーターJivaro · ファーストパーティ