Scalable Vector Graphicsを使用する利点
Scalable Vector Graphics（SVG）は、今日のウェブサイトデザインにおいて重要な役割を果たしています。 あなたが現在あなたのウェブデザインの仕事でSVGを使用していない場合、そうすることを始めなければならないいくつかの理由と、これらのファイルをサポートしない古いブラウザで使うことができるフォールバックがあります。
解決
SVGの最大のメリットは、解像度の独立性です。 SVGファイルはピクセルベースのラスターイメージではなくベクターグラフィックであるため、イメージの品質を損なうことなくサイズ変更することができます。 これは、 見た目がよく、幅広い画面サイズやデバイスでうまく動作するレスポンシブウェブサイトを作成する場合に特に役立ちます。
レスポンシブウェブサイトのサイズやレイアウトのニーズに合わせてSVGファイルを拡大/縮小することができ、品質の低下したグラフィックスを心配する必要はありません。
ファイルサイズ
レスポンシブウェブサイトでラスターイメージ（JPG、PNG、GIF）を使用する際の課題の1つは、それらのイメージのファイルサイズです。 ラスタ画像はベクトルのように拡大縮小しないため、ピクセルベースの画像を表示する最大のサイズで配信する必要があります。 これは、常にイメージを小さくして品質を維持できるためですが、イメージを大きくするには同じではありません。 最終的な結果として、人の画面に表示される画像よりもはるかに大きな画像が存在することが多く、非常に大きなファイルを無駄にダウンロードする必要があります。
SVGはこの課題に取り組んでいます。 ベクトルグラフィックはスケーラブルであるため、表示する必要のある画像の大きさにかかわらず、ファイルサイズは非常に小さくすることができます。 これは、最終的にサイトの全体的なパフォーマンスとダウンロード速度にプラスの影響を与えます。
CSSのスタイル設定
SVGコードは、ページのHTMLに直接追加することもできます。 これは「インラインSVG」と呼ばれます。インラインSVGを使用する利点の1つは、グラフィックスが実際にコードに基づいてブラウザによって描画されるため、イメージファイルを取得するためにHTTPリクエストを行う必要がないことです。 もう1つの利点は、インラインSVGをCSSでスタイル設定できることです。
SVGアイコンの色を変更する必要がありますか？ 何らかの編集ソフトウェアでそのイメージを開き、ファイルを再度エクスポートしてアップロードする必要はなく、数行のCSSでSVGファイルを変更するだけで済みます。
また、SVGグラフィックス上で他のCSSスタイルを使用して、ホバー状態や特定のデザインニーズに合わせて変更することもできます。 これらのグラフィックスをアニメートして、ページに動きやインタラクティビティを追加することもできます。
アニメーション
インラインSVGファイルはCSSでスタイル付けすることができるため、CSSアニメーションも使用できます。 CSS変換とトランジションは、SVGファイルに人生を追加する2つの簡単な方法です。 今日のWebサイトでFlashを使用することに伴う欠点に苦しむことなく、豊富なFlash風の体験をページ上で得ることができます。
SVGの使用
SVGほど強力なので、あなたのウェブサイトで使用している他のすべてのイメージフォーマットを置き換えることはできません。 深みのある色深度を必要とする写真は、依然としてJPGまたはPNGファイルである必要がありますが、アイコンのような単純な画像はSVGとして実行するのに完全に適しています。
SVGは、会社のロゴやグラフ、チャートなど、より複雑なイラストにも適しています。 グラフィックスはすべてスケーラビリティがあり、CSSでスタイリングすることができ、この記事で紹介したその他のメリットが得られます。
古いブラウザのサポート
SVGの現在のサポートは、最新のWebブラウザでは非常に優れています。 これらのグラフィックをサポートしていない唯一のブラウザは、古いバージョンのInternet Explorer（バージョン8以下）といくつかの旧バージョンのAndroidです。 まったく、閲覧人口のうちのごく一部の人がまだこれらのブラウザを使用しており、その数は引き続き縮小しています。 これは、SVGが今日のウェブサイトでかなり安全に使用できることを意味します。
SVGのフォールバックを提供したい場合は、Filament GroupのGrumpiconのようなツールを使用できます。 このリソースはSVGイメージファイルを受け取り、古いブラウザ用のPNGフォールバックを作成します。
ジェレミージラール編集：1/27/17