This image illustrates the difference between bitmap and vector images. The bitmap image is composed of a fixed set of pixels, while the vector image is composed of a fixed set of shapes. In the picture, scaling the bitmap reveals the pixels while scaling the vector image preserves the shapes.
← ホームへ戻る
SVGベクターグラフィックスW3CXML解像度独立

SVG（Scalable Vector Graphics）の基礎知識と特徴

🗓 2026年8月7日

ウェブサイトやアプリケーションでロゴやアイコンを美しく表示させるために欠かせないのがSVGです。SVGは、点と線を数学的な計算で結んで描画する「ベクター形式」の画像フォーマットであり、拡大しても画質が劣化しないという画期的な特性を持っています。

本記事では、W3Cによって標準化されたSVGの仕組みから、その機能、実装方法までを詳しく解説します。

Key Facts

  • 解像度に依存しない： 数式で描画されるため、どれだけ拡大・縮小してもエッジが滑らかなまま維持されます。
  • XMLベースの構造： テキスト形式のXMLで記述されており、コードとして編集や検索が可能です。
  • 高い汎用性： 現代の主要なウェブブラウザで標準的にサポートされています。
  • 動的な制御： スクリプトやアニメーションを組み込むことができ、インタラクティブな表現が可能です。

SVGの基本概念と仕組み

SVG（Scalable Vector Graphics）は、ピクセルの集合体であるビットマップ画像（ラスタ形式）とは根本的に異なります。ビットマップが「どの位置に何色の点があるか」を記録するのに対し、SVGは「どこからどこまで、どのような曲線で線を引くか」という命令セットで構成されています。

This image illustrates the difference between bitmap and vector images. The bitmap image is composed of a fixed set of pixels, while the vector image is composed of a fixed set of shapes. In the picture, scaling the bitmap reveals the pixels while scaling the vector image preserves the shapes.

このため、SVGは解像度独立であり、スマートフォンの小さな画面から巨大な屋外ディスプレイまで、単一のファイルで最適な画質を提供できます。また、圧縮形式である.svgzファイルを用いることで、データ容量をさらに削減することも可能です。

SVGの主な機能と構成要素

SVG 1.1仕様では、表現力を高めるために多くの機能セットが定義されています。単なる図形描画にとどまらず、以下のような高度な表現が可能です。

描画とスタイリング

  • 基本図形とパス： 直線、円、矩形などの基本形状に加え、複雑な自由曲線（パス）を描画できます。
  • 色彩と塗りつぶし： 単色だけでなく、グラデーションやパターンを用いた塗りつぶしが可能です。
  • 高度なエフェクト： クリッピング（切り抜き）、マスキング、およびフィルター効果による視覚演出が行えます。

インタラクティブ機能と動的表現

  • アニメーションとスクリプト： 形状の変化や移動を時間軸に沿って制御でき、JavaScriptなどのスクリプトによる動的な操作も可能です。
  • テキストとメタデータ： 画像内にテキスト情報を保持でき、フォントの指定やメタデータの埋め込みが可能です。
  • ハイパーリンク： 図形の一部にリンクを設定し、他のページへ遷移させることができます。

実装と作成方法

SVGはXMLベースであるため、テキストエディタで直接コードを記述して作成できます。また、専用のベクターグラフィックスエディタを使用するのが一般的です。

さらに、数値データから大量のSVGを生成する場合、表計算ソフトの結合関数（CONCATENATEなど）を利用して、数値とテキスト文字列を組み合わせ、SVG宣言を自動生成するという効率的な手法も存在します。

In addition to manually entering code and using vector graphics editors, users can use spreadsheet programs' concatenate function to join numeric cell values and text strings in series, to generate full SVG declarations.

SVGの仕様まとめ

SVGの基本情報を以下の表にまとめます。

SVGフォーマットの基本仕様
項目 内容
開発組織 W3C (World Wide Web Consortium)
ファイル拡張子 .svg / .svgz (圧縮形式)
メディアタイプ image/svg+xml
ベース技術 XML (Extensible Markup Language)
主な特性 ベクター形式、解像度独立、スクリプト対応

Frequently Asked Questions

SVGとPNGやJPEGなどの違いは何ですか？

PNGやJPEGはピクセルの集まり（ラスタ形式）であるため、拡大すると境界がぼやけたり、階段状のギザギザ（ジャギー）が発生します。一方、SVGは数式で描画されるベクター形式であるため、どのような倍率に拡大しても画質が劣化しません。

SVGファイルはどのようにして作成しますか？

主に2つの方法があります。1つはAdobe Illustratorなどのベクターグラフィックスエディタを使用して視覚的に作成し、書き出す方法です。もう1つは、XML形式のコードをテキストエディタで直接記述する方法です。

SVGZとは何ですか？

SVGZは、SVGファイルを圧縮した形式のファイルです。XMLベースのSVGはテキストデータであるため圧縮効率が高く、ファイルサイズを軽量化してウェブページの読み込み速度を向上させるために利用されます。

どのようなブラウザで利用できますか？

現代の主要なウェブブラウザ（Chrome, Firefox, Safari, Edgeなど）はすべてSVGをサポートしています。また、モバイルデバイス向けのプロファイル（SVG Tinyなど）も定義されており、幅広い環境で動作します。

References

  1. "Media Type Registration for image/svg+xml". . Archived from the original on 19 February 2014. Retrieved 5 February 2014.
  2. St. Laurent, Simon; Makoto, Murata; Kohn, Dan (January 2001). XML Media Types. Network Working Group. :10.17487/RFC3023. 3023. Proposed Standard. sec. 8.19. Obsoleted by  7303. Updated by  6839. Obsoletes  2376. Updates  2048.
  3. "Secret Origin of SVG". . 21 December 2007. Archived from the original on 24 December 2020. Retrieved 1 January 2011.
  4. "Schematic Graphics". W3C. Archived from the original on 31 January 2022. Retrieved 19 July 2019.
  5. Al-Shamma, Nabeel; Robert Ayers; Richard Cohn; Jon Ferraiolo; Martin Newell; Roger K. de Bry; Kevin McCluskey; Jerry Evans (10 April 1998). "Precision Graphics Markup Language (PGML)". . Archived from the original on 16 December 2021. Retrieved 8 May 2009.
  6. Mathews, Brian; Brian Dister; John Bowler; Howard Cooper stein; Ajay Jindal; Tuan Nguyen; Peter Wu; Troy Sandal (13 May 1998). "Vector Markup Language (VML)". . Archived from the original on 6 November 2021. Retrieved 8 May 2009.
  7. "Hyper Graphics Markup Language (HGML)". W3C. Archived from the original on 7 April 2022. Retrieved 19 July 2019.
  8. "WebCGM Profile". xml.coverpages.org. Archived from the original on 14 August 2022. Retrieved 4 March 2019.
  9. "Scalable Vector Graphics (SVG) 2". W3C. Archived from the original on 27 January 2017. Retrieved 28 January 2017.
  10. Ferraiolo, Jon (4 September 2001). "Scalable Vector Graphics (SVG) 1.0 Specification". World Wide Web Consortium. Archived from the original on 11 May 2008. Retrieved 24 February 2010.

📸 フォトギャラリー

This image illustrates the difference between bitmap and vector images. The bitmap image is composed of a fixed set of pixels, while the vector image is composed of a fixed set of shapes. In the picture, scaling the bitmap reveals the pixels while scaling the vector image preserves the shapes.
In addition to manually entering code and using vector graphics editors, users can use spreadsheet programs' concatenate function to join numeric cell values and text strings in series, to generate full SVG declarations.