30秒でわかる結論
グラデーション、質感、筆のタッチ、写真をそのまま見せたいなら、元画質SVGが安全です。ロゴの色面や線を編集したい、または非常に単純な形をどこまでも拡大したいなら、純粋なベクターSVGを試してください。
ファイルの中には何が入っているのか
SVGはXMLベースのコンテナなので、内部がベクター図形だけである必要はありません。<image>要素でPNGなどのラスター画像を格納することも、<path>で座標と曲線を記録することもできます。拡張子だけで編集可能性を判断できないのはこのためです。
| 項目 | 元画質SVG | 純粋なベクターSVG |
|---|---|---|
| 中心となる構造 | SVG内に高解像度のラスター画像を埋め込む | 輪郭と色面をpath座標で記録 |
| 元画像との視覚的な近さ | 高い。現在のcanvasをそのまま保持 | トレース結果によって変わる |
| 色面ごとの編集 | 難しい。埋め込み画像全体が1つのまとまり | 可能。ただしpathが多いと作業が重い |
| 無限拡大 | 不可。高解像度化でピクセル感が現れるのを遅らせるだけ | path自体は解像度に依存しない |
| 複雑な写真・イラスト | 適している | 多くの場合、ファイルが大きくなりノイズが増える |
| ロゴ・アイコン・シルエット | 保存用として利用可能 | 編集が目的なら、より適している |
元画質SVGの長所と限界
DrowPackは現在のcanvasをPNGデータにして、SVGの画像要素内に埋め込みます。ユーザーは1xから10xまで拡大時の鮮明度を選べますが、元のサイズとブラウザメモリに応じて、実際の倍率は安全な範囲に制限されます。この方式では、グラデーションや小さなハイライトを無理にpathへ分割しないため、元画像に近く見えやすくなります。
適している場合
- 写真、ペインティング、水彩、ブラシの質感など、連続的な色変化が多いとき
- 外部システムがSVG拡張子を求めるものの、内部の個別図形を編集する必要がないとき
- Web画面で元画像の印象を保つことが最優先のとき
- 自動トレースで数万個のpathが生まれるのを避けたいとき
避けたい誤解
- 10xを選んでも、すべての元画像に実在する情報まで10倍鮮明になるわけではありません。
- 埋め込まれた画像を拡大し続ければ、最終的にはラスターのピクセルが見えます。
- Illustratorで開けても、目、髪、背景がそれぞれ編集できる図形に分かれるわけではありません。
- SVGコンテナのオーバーヘッドと埋め込み画像があるため、同じPNGより必ず小さくなるわけではありません。
純粋なベクターSVGの長所と限界
純粋なベクターモードは、画像の色と明るさの境界を検出してpathを作成します。単純なロゴやシルエットなら、少数の明確な図形に整理できることがあります。一方、アンチエイリアスされたピクセルや質感まで色面として解釈すると、非常に小さなpathが急増します。
適している入力
- 背景と主題がはっきり分かれた単色のシルエット
- 色数が少なく、境界が明確なロゴやアイコン
- 太く閉じた線で描いた白黒線画
- 印刷、カッティング、サイズ変更のために実際のpathが必要な単純図形
難しい入力
- 髪、目のハイライト、半透明効果が多いイラスト
- ノイズや圧縮跡のある小さなJPG
- 写真、照明のグラデーション、布や紙の質感
- 白い背景と内部の白いディテールが同時にあり、背景除去の判断が曖昧な画像
pathが多いほど良いベクター、ではありません
ピクセルの縁をそのまま追った数万個のpathは、拡大しても階段状の座標を保持することがあります。複雑さは増えても、作者が意図した滑らかな曲線を復元したことにはなりません。
入力タイプ別の選択表
| 入力 | 最初に試す形式 | 理由 | 純粋なベクターを試す条件 |
|---|---|---|---|
| 写真 | PNG/JPGまたは元画質SVG | 連続した色調と質感を保つ | ポスタライズ風の表現が目的のときだけ |
| 複雑なキャラクターイラスト | 元画質SVG | 小さな装飾と色変化を維持 | 色面数を減らした別バージョンを用意したとき |
| シンプルなカラーイラスト | 両方を比較 | 編集性とファイルサイズのバランスが必要 | 輪郭が明確で色数が少ないとき |
| 白黒線画 | 純粋なベクターSVG | 明るさのしきい値で線を分けやすい | 細い線が切れる場合はしきい値とノイズ除去だけを少し調整 |
| ロゴ・アイコン | 純粋なベクターSVG | 図形編集とサイズ変更に向いている | 小さなJPGなら、先により大きな元画像を確保 |
| シルエット・ステッカー輪郭 | 純粋なベクターSVG | 主題と背景の区別が単純 | 背景除去後、輪郭が閉じているか確認 |
どちらかを選ぶための比較手順
- 最終用途を一文で書きます。「Webで元画像どおりに見せたい」のか、「色面を編集したい」のかを先に分けます。
- 元画質SVGを初期値で作成します。100%と400%表示で見た目の品質とファイルサイズを記録します。
- 入力に合うクイックベクターモードを選びます。最初からすべての詳細値を上げないでください。
- 同じ2か所を比較します。輪郭線1か所と最小の内部ディテール1か所を決め、白い隙間、形の変化、欠落を確認します。
- SVG構造と容量を確認します。エディターで開き、path数が作業可能な範囲か、ブラウザプレビューが重すぎないか確認します。
- 目的を満たす、より単純な方を選びます。違いが見えないなら、複雑度の低い結果の方が管理しやすくなります。
最終ファイルの確認
- 使用するアプリでSVGが正常に開くか
- 400%表示で輪郭が意図した形になっているか
- 白い背景と内部のハイライトが正しく区別されているか
- 小さな文字やロゴの穴がふさがっていないか
- 純粋なベクターのpath数とファイルサイズが編集可能な範囲か
- 元画質SVGを純粋なベクターとして説明していないか
自動トレースは、素早く始めるための手段です。商標、大判印刷、精密カッティングのように曲線の正確さが重要な作業では、結果を基に手作業でベジェを整えるか、元のベクターデータを使う方が安全です。