ベクター グラフィックは、一連の図形、座標、パスをレンダリング コンテキストに伝える手段です。画像の描画方法に関する一連の指示です。画像が拡大または縮小されると、画像が表す一連の点と線が拡大または縮小されて再描画されます。2 つのポイント間の滑らかな曲線は、任意のサイズで同じように滑らかに再描画されます。これは、HTML 要素に CSS 定義の境界線がビューポート内で拡大縮小されるのと同様です。
Scalable Vector Graphics（SVG）は、W3C で開発された XML ベースのマークアップ言語です。最新のウェブ用に設計された ベクター画像形式です
ベクター アートワークの編集専用のデザイン ソフトウェアを使用すると、画像を SVG としてエクスポートできます。しかし、SVG は標準化された人間が読める形式のマークアップ言語であるため、どのテキスト編集ソフトウェアでも、作成および編集はどのソフトウェアでも行えますが、実際に複雑な画像の場合、このような処理はすぐに非現実的なものになります。SVG は、CSS でスタイルを設定できます。または、動作とインタラクションを画像自体に組み込む JavaScript を使用することもできます。
SVG は、デザイナーやデベロッパーにとって明らかに魅力があるだけでなく、エンドユーザー エクスペリエンスの点で非常に強力なフォーマットでもあります。 SVG ソースに含まれる説明情報は、ラスター画像形式の規範的なピクセルグリッド ベースの情報に比べて多くの場合、非常にコンパクトです。単純な形状の場合、やや単純化するため、ブラウザに「1x1 から 1x5 の間に 1 ピクセルの赤い線を描画する」と「1x1 は赤のピクセルである」との違いを伝えます。1×2 は赤色のピクセルです。1×3 は赤色のピクセルです。1×4 は赤色のピクセルです。1×5 は赤色のピクセルです。" その反面、SVG の説明的な性質上、ブラウザでより「思考」する必要があります。そのため、複雑な SVG はレンダリングに負担がかかる可能性があります。同様に非常に複雑な画像では、手順が冗長になって転送サイズが大きくなります。
画像ソースの候補を、従来のラスター形式ではなく SVG で利用した方が適切な画像を即座に特定するには、多少の試行錯誤が必要になる場合があります。ただし、ガイドラインがいくつかあります。アイコンなどのインターフェース要素には、ほとんどの場合 SVG が適しています。シャープな線、無地、明確に定義された形状のアートワークは、SVG の使用に適した可能性が高いといえます。
SVG は大きな話題を呼びます。独自のスタイル設定オプションと機能を備えた、HTML と共存するように作成されたマークアップ言語全体です。SVG のさらに詳しい概要については、MDN SVG チュートリアルをご覧ください。