SVGを使わない方がよい場合

はじめに

SVGはロゴ、アイコン、図に有効ですが、すべての画像に適した形式ではありません。変換ボタンが動作することと、出力が公開に適していることは別の問題です。

画像の細部を保つために数千、数万のパスが必要になるなら、SVGの拡大性より構造の大きさと描画コストが問題になります。

複雑な画像がSVGに適さない理由

SVGは形を一つずつ記述します。写真には細かな色、光、影、質感が連続して存在するため、それらを形で近似するとパスと座標が急増します。圧縮されたラスター画像なら一つの画像として効率よく扱える情報です。

実際の変換例: 写真

細部の多い食べ物の写真をSVGKITでトレースしたところ、30,460個のパスが生成され、出力SVGは元のJPGの約4.9倍になりました。処理にも約10.2秒かかりました。

元のJPG

SVG出力のプレビュー

入力

1,086,903バイト

出力SVG

5,313,647バイト

パス

30,460個

処理時間

約10.2秒

よくある失敗

SVGの方が専門的に見えるという理由で選ぶ

形式はブランドイメージではなく、情報構造と配信要件で選びます。

写真にSVGを使う

写真はラスター形式に適しています。トレースは元の細部を正確に保たず、構造も大きくします。

巨大なトレースSVGをそのまま公開する

パス数が多いSVGは、ダウンロード後の解析と描画にも負荷を与えます。

スクリーンショットをSVGへ変換する

文字やUIのアンチエイリアスが不要なパスになります。内容がテキストなら、可能な限りHTMLとして提供します。

ベストプラクティス

• -写真にはWebPまたはJPGを使用します。
• -透明度が必要な複雑画像にはPNGまたはWebPを検討します。
• -変換前にSVGにする具体的な理由を書き出します。
• -出力サイズ、パス数、処理時間を確認します。
• -実際のページで描画とスクロールを確認します。
• -SVGが不適切なら、変換をやめる判断をします。

実務での手順

1. 1
   画像が写真、スクリーンショット、形中心のどれかを分類します。
2. 2
   拡大、編集、CSS制御の必要性を確認します。
3. 3
   元のベクターデータがあるか探します。
4. 4
   必要な場合だけテスト変換します。
5. 5
   サイズ、パス数、見た目を元画像と比較します。
6. 6
   SVGが複雑ならラスター形式を維持します。

FAQ

SVGは写真に向いていませんか？

通常は向いていません。写真の連続した色と質感は、WebPやJPGの方が効率よく表現できます。

SVGがパフォーマンスを低下させることはありますか？

あります。大きなマークアップ、多数のパス、フィルター、アニメーションは解析と描画の負荷を増やします。

WebPはSVGより優れていますか？

用途が異なります。写真にはWebP、単純な形やアイコンにはSVGが適しています。