SVGの利点
ウェブサイトを構築してそのサイトに画像を追加するときに、最も重要なことを判断する必要がある場合は、使用するファイル形式が正しいかどうかを判断する必要があります。 グラフィックによっては、1つのフォーマットが他のフォーマットよりも優れている場合があります。
多くのWebデザイナーはJPGファイル形式に慣れています。この形式は、写真のような深みのある色の画像に最適です。 この形式は、イラストのアイコンのようなシンプルなグラフィックスでも機能しますが、その場合に使用するのに最適な形式ではありません。 これらのアイコンの場合、SVGがより良い選択になります。 正確な理由を見てみましょう：
SVGはベクトル技術です
つまり、ラスタテクノロジではありません。 ベクトル画像は、数式を使用して作成された線の組み合わせです。 ラスターファイルは、ピクセルまたは色の小さな四角形を使用します。 これは、SVGがスケーラブルで、デバイスの画面サイズに合わせて拡張する必要があるレスポンシブウェブサイトに最適な理由の1つです。 ベクトルグラフィックスは数学の世界に存在するので、サイズを変更するには、単に数値を変更します。 ラスタファイルでは、サイズを変更する際にかなりのオーバーホールが必要になることがあります。 ベクタ画像を拡大したい場合は、システムが数学的で、ブラウザがその数学を再計算して線を滑らかにするだけなので、歪みはありません。 ラスターイメージを拡大すると、画質が低下し、ファイルの色が見え始めるとファイルがぼやけてきます。 数学は拡大して収縮しますが、ピクセルは収縮しません。 イメージを解像度に依存しないようにするには、SVGがその能力を提供します。
SVGはテキストベースです
グラフィックスエディタを使用してイメージを作成すると、完成したアートワークがイメージとして表示されます。 SVGの動作は異なります。 あなたはまだいくつかのソフトウェアプログラムを使用することができ、絵を描いているように感じることができますが、最終的な製品はベクトル線や単語の集合です（ページ上のベクトルだけです）。 検索エンジンは言葉、特にキーワードを調べます。 JPGをアップロードすると、グラフィックのタイトルやaltテキストフレーズに制限されます。 SVGコーディングでは、可能性を広げ、より検索エンジンに優しい画像を作成します。
SVGはXMLであり、他の言語フォーマットでも機能する
これはテキストベースのコードに戻ります。 SVGで基本イメージを作成し、 CSSを使ってそれを磨くことができます。 はい、イメージは実際にはSVGファイルですが、SVGをページに直接コーディングして編集することもできます。 ページのテキストなどを変更するのと同じ方法でCSSで変更することができます。これは非常に強力で簡単に編集することができます。
SVGが簡単に編集される
これはおそらく最大の利点です。 あなたが正方形の写真を撮るとき、それはそれが何であるかです。 変更を加えるには、シーンをリセットして新しい画像を撮る必要があります。 あなたがそれを知る前に、あなたは四角形の40の画像を持っていますが、それはまだかなり正しいです。 SVGを使って間違えた場合は、テキストエディタで座標や単語を変更すれば完了です。 私は正しく配置されていないSVGサークルを描いたので、これに関連付けることができます。 私がしなければならなかったのは、座標を調整することでした。
JPG画像は重くなることがあります
画像を物理的なサイズで拡大したい場合は、ファイルサイズも大きくなります。 SVGでは、あなたがどれくらい大きくしても、ポンドはまだポンドです。 幅2インチの正方形は、幅100インチの正方形と同じになります。 ファイルサイズは変更されません。これはページパフォーマンスの観点から優れています！
だからどちらが良いですか？
それでは、SVGやJPGといったより良いフォーマットは何ですか？ それは画像そのものに依存します。 これは、「何が良いのか、ハンマーかスクリュードライバーか」と尋ねるようなものです。 それはあなたが達成する必要があるものに依存します！ これらの画像フォーマットについても同様です。 写真を表示する必要がある場合は、JPGが最適です。 アイコンを追加している場合は、SVGが良い選択肢になります。 SVGファイルを使用するのが適切な時期については、こちらをご覧ください 。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：6/6/17