ラスターのピクセルからベクターパスへ
PNG、JPEG、JPG、WebP、AVIF、BMPはピクセルの格子を保存します。SVGは形、塗り、座標を保存し、対応ソフトウェアが異なるサイズで描き直せます。ベクトル化では、隣り合うピクセルを解析し、見た目の領域をまとめ、境界をたどってベクターパスで近似します。
ファイル名の変更やSVG内へのビットマップの埋め込みでは、この再構成は行われません。VectorizeThisは元画像の見た目から実際のSVG形状を生成します。
ブラウザ内で処理
対応画像のデコード、トレース、評価、出力準備は利用者の端末で行います。通常の変換では元画像のバイト列を変換サーバーに送信しません。ローカル処理を基本とすることで、調整のたびにサーバーとの通信を待たずに複数の結果を比較できます。
トレース候補の比較
すべての画像に最適な設定はありません。平面的なアイコンと写真では情報が異なり、カット用ファイルとウェブ用イラストでも要件が違います。
図柄では6種類の単色方式、または最大4種類のパレット構成にわたる10、16、18、20個のカラー候補を比較します。有用な結果が複数残れば、パレットを選んでからSVGを選びます。写真と複雑なイラストは専用の最適化処理を使います。加工用途は物理寸法と形状チェックを保持し、SVGOを無効にします。詳しくは自動選択のドキュメントをご覧ください。
したがって「最良の結果」は、その画像と用途に最も適した総合的な候補を指します。単にピクセルの類似度が最高、あるいはファイルが最小という意味ではありません。
用途によって優先事項が変わる
- ウェブ、ロゴ、アイコンでは、整理された見た目、編集できる色、効率的なコードを重視します。
- 写真や複雑なイラストでは色と細部を多く保持するため、パスが増える場合があります。
- Cricut、カッティングプロッター、レーザー、CNCでは、実用的な形状、閉じた領域、物理寸法、加工しづらい形の警告を重視します。
- 自動では、用途が未定の場合に見た目の再現性と扱いやすい出力を両立します。
加工チェックで問題の可能性を見つけても、すべての機械、材料、刃、カーフ、読み込み設定、アプリ固有の規則を考慮できるわけではありません。
出力の整理とチェック
トレース後、VectorizeThisはブラウザやエディターとの互換性に向けてSVGを整え、余分なコードを削除し、選択した出力設定を適用します。小さなパレットでの色変更、currentColorの使用、検出した背景の削除、有効範囲へのトリミング、必要に応じたコード整形ができます。
複雑すぎる形、小さな孤立領域、開いたパスなど、選んだ作業に関係する条件も確認できます。警告は確認すべき情報であり、ファイルが失敗する証拠ではありません。
自動トレースの限界
明確な輪郭と十分なサイズがある画像は、通常、単純で元に近いパスになります。ノイズ、JPEGの乱れ、ぼけ、グラデーション、透明度、細かな質感、重なる色には解釈が必要です。元画像にない細部は復元できず、元のデザイナーと同じ構成になるとは限りません。
並列プレビューや手動設定は、利用者の視覚的な判断も重要なために用意しています。加工ファイルは本番前に対象ソフトウェアと材料でテストしてください。
変更のテスト方法
トレースや順位付けの変更は、アイコン、ロゴ、線画、多色画像、低解像度画像、写真、加工向けの例を含む代表画像でテストします。自動テストで重要なブラウザ動作と出力方針を保護し、ベンチマーク比較で公開前に品質の低下を見つけます。
技術記事の作成方法
技術説明は、変換ツールの実際の動作、代表画像でのテスト、W3C SVG仕様などの一次資料に基づきます。ツールの動作に大きな変更があればページを見直します。
VectorizeThisの開発者は Maxime Desrosiers です。期待どおりに動作しない結果は、変換ツールのフィードバックを送信か、お問い合わせから報告できます。