ラスターとベクターの違い

はじめに

ラスター画像は色をサンプリングしたピクセルの格子を保存します。ベクターグラフィックはブラウザーが必要なサイズで描く図形を記述します。拡大するときに既存のサンプルを引き伸ばすのか、図形を描き直すのかが重要な違いです。

このガイドでは1つの円を使い、拡大とトレースを区別します。変換ツールの精度を測る実験ではありません。変換手順はImage to SVG、不適切な結果の判断はWhen NOT to use SVGで扱います。

同じ図形を2通りで表す

以下のSVGは中心と半径で円を定義します。SVGKITが学習用の図形を直接作成し、Chromiumのcanvasで32 x 32のPNGに描画しました。PNGは写真のスクリーンショットではなく、SVGもPNGをトレースしたものではありません。

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><circle cx="144" cy="144" r="85" fill="#e74c3c"/></svg>

32 x 32 PNG

直接作成したSVG

ラスターの寸法

32 x 32

ベクターの円

1

32ピクセルのPNG、直接作成したSVG、計測記録を確認できます。記録したChromiumでの実行ではPNGが695バイト、SVGが143バイトでした。この2ファイルのサイズであり、PNGとSVGのエンコーダーの優劣ではありません。再現用のスクリプトとブラウザーのバージョンも記録しています。

拡大の違いを再現する

ダウンロードした2つのファイルをHTMLと同じフォルダーに置き、等しい寸法で表示します。

<img src="circle-raster-32.png" width="256" height="256" alt="拡大したラスターの円">
<img src="circle-authored.svg" width="256" height="256" alt="ベクターの円">

最初は両方の幅と高さを32にし、次に256へ変更します。デバイスピクセル比が1の画面で256 CSSピクセルに表示すると、ラスターの1サンプルは補間前の計算で各軸の画面ピクセル8個分に広がります。ブラウザーは滑らかに拡大できますが、元にない精密な輪郭を復元することはできません。SVGは対象の解像度で円をラスタライズします。最終的にはどちらも画面上のピクセルになります。

違いを観察しやすいよう、意図的に小さな入力を使っています。十分な解像度のPNGなら、用途に合うサイズでSVGと同じように鮮明に見える場合があります。ブラウザーの補間やデバイスピクセル比も影響するため、ベクターでもアンチエイリアスや小さなサイズでの位置合わせは重要です。

編集の違いを再現する

SVGのr="85"だけをr="64"へ変更します。中心は(144, 144)のままで半径が小さくなります。fill="#e74c3c"をfill="#167544"へ変更すると円全体の色が変わります。

書き出したPNGには半径やfill属性がありません。ビットマップエディターで塗り直すことはできますが、元のパラメーターは明示的に残っていません。PNGをトレースしても、円1個ではなくアンチエイリアスの輪郭に沿った複数のパスになる場合があります。

よくある失敗

SVGにはベクター図形しか入らないと考える

SVGはimage要素でラスター画像を含められます。内部の画像のピクセル解像度は固定のままです。PNGをSVGで包んでもベクター化にはなりません。SVGのimage要素を参照してください。

トレースを編集可能な原本と混同する

パスが意図したオブジェクトではなく、輪郭の断片を表すこともあります。座標を編集できることと、意味のある円、レイヤー、文字、制約を持つことは別です。

文字をトレースしても検索できると考える

文字の輪郭は図形であり文字データではありません。選択できる文字が必要なら、スクリーンショットをトレースせず、適切な文書やHTMLの構造にテキストを残します。

ベストプラクティス

• -編集用の原本と配信用の出力を分けて保管します。
• -プレビューだけでなく必要な最大表示サイズでも確認します。
• -SVGに図形、埋め込み画像、または両方があるか確認します。
• -後から変更するオブジェクトに合わせて編集方法を選びます。

実務での手順

1. 1
   対応すべきサイズと変更する属性を決めます。
2. 2
   原本がピクセル、明示的な図形、混合表現のどれかを確認します。
3. 3
   ラスターとベクターの候補を同じサイズで表示します。
4. 4
   半径や色の変更など、実際に必要な編集を試します。
5. 5
   必要な見た目と編集を支える表現を選びます。

FAQ

ベクターグラフィックにはピクセルが関係しないのですか？

いいえ。ブラウザーは最終的に画面へピクセルを描きます。ベクターは固定の格子を拡大するだけでなく、要求された解像度に合わせてピクセルを計算できるようにします。

高解像度のPNGもSVGと同じくらい鮮明になりますか？

はい。その表示サイズに十分な元のピクセルがあれば可能です。この例は拡大の限界を示すために32ピクセルの出力を使っています。

トレースで元の円の半径を復元できますか？

確実ではありません。サンプルから図形を推定するためです。この例で半径が分かるのは、PNGを作る前に定義したからです。