SVG入門（１）SVGとは

この記事は「SVG入門」という連載記事の1つ目の記事です。

その他の記事に関しては下を参照してください。

はじめに

今日からSVGについて少しずつ書いていきたいと思います。

SVGの全機能の細かい点まで網羅する記事というよりは入門的な分かりやすい記事を目指したいと思います。全機能を取り上げるかは分かりませんが、重要な点は書き漏らさないようにしようと思っています。

今回はSVGの概要についてです。

SVGとは

SVGとはScalable Vector Graphicsの頭字語であり、ベクタ画像の形式の1つです。

ベクタ画像では画像を四角形やテキストなどの図形の集まりとして表現します。そのため、ベクタ形式の画像は画質を保ったまま幾らでも拡大することができます。

SVGは1998年にW3Cにより仕様の策定が開始され、2001年に最初のバージョンが完成しました。

SVG画像は拡張子が.svgのファイルとして保存します（ただし、gzip圧縮したものの拡張子は.svgzとします）。

SVGの特徴

• XMLで記述します。汎用的な言語で記述し、しかも、テキストデータであるため、様々なシステムで取り扱いやすいです。殆どの最近のブラウザがSVG画像の表示をサポートしていますし、多くのベクタ画像ソフトがSVG形式をサポートしています。テキストエディタで画像を編集することもできます。また、様々なプログラミング言語でSVG画像を作成するためのライブラリが提供されています。
• 画像内のテキストを検索することができます。
• 多言語化が容易です。
• 図形の構造と外観を分離します。図形の構造は図形毎に予め定まっている属性の値を指定することにより定義し、図形の外観は全ての図形で共通のstyle属性に外観の種類に応じたプロパティを指定することにより定義します。また、図形の外観の指定のためにはスタイルシートを使用することもできます。
• ビットマップ画像を挿入することができます。
• 図形をグループ化して1つの図形とすることができます。
• 図形を変形することができます。
• 図形を再利用することができます。1つの画像ファイル内で再利用することも、複数の画像ファイル間で再利用することもできます。
• 図形のアニメーションを行うことができます。
• ユーザからの入力を処理することができます。そのため、ユーザからの入力に応じて図形を変形させることができます。
• スクリプトを記述することができます。
• 画像内にハイパーリンクを挿入することができます。
• HTMLドキュメント中に埋め込むことができます。

-svg