ＳＶＧ（Scalable Vector Graphics）とは、Web上でベクターグラフィックス（線や円），画像，テキストオブジェクトを定義してブラウザに表示するための言語です。 オブジェクトはグループにまとめたり、合成させたり、フィルタ効果を適用したりして複合グラフィックスを表示させることができます。

ＤＯＭ(Document Object Model)によりスクリプト言語を使用して各要素やプロパティにアクセスすることも可能です。 当ホームページで紹介しているＶＭＬはMicrosoft社独自の仕様であり、ＳＶＧはW3Cで勧告されたオープンなフォーマットで、XMLをベースとしてAdobe,Sun Microsystems社など約20団体以上にサポートされています。2001年9月に1.0が勧告され、2003年1月に1.1が勧告されていました。

テキストのみでグラフィックスを表現できるので、ファイルサイズが少ない、ベクター画像であるため拡大・縮小が精細、画像の変更をテキストの変更で行えるなど利点もありますがやはり、直感的にイメージしにくいため、複雑な画像を作ることは困難であるかもしれません。

HTML5が注目されSVGもHTML5の一部と思われがちですが、勧告されてから早10年近く経っていますが
IEが独自のVMLを実装していたためSVGに対応しなかったのでSVGもそれほど普及しませんでした。

しかし、IE9以降HTML5準拠に従いようやくSVGがサポートされるようになりました。

数年前にはまだブラウザの標準機能として搭載されているものが少なく、プラグイン等により表示させることしかできませんでした。
当時、Adobe社から「Adobe SVG Viewer」が無償で提供されており、表示させるにはプラグインのインストールが必要でした。

Microsoft社独自のベクター用言語VMLはHTMLの中に埋め込んで利用していましたが、SVGもSVG用のタグを利用したＸＭＬテキストファイルを拡張子「svg」で作成して、ブラウザでそのまま読み込むか、またはページの一部で表示させる場合には<object>タグや<iframe>タグ、<frame>タグ等で読み込むことで表示できます。

また、HTMLに直接記述する場合は<svg>タグで囲むことでインラインで利用することができます。

上のsample.svgソースにおいてＳＶＧはＸＭＬ文書であるため必ず１行目は
<?xml version="1.0"?>
で始まらなければなりません。

次の<!DOCTYPE>要素は必須ではありませんがドキュメントタイプを宣言しているのでおまじない程度に記述しておいても構いません。

<svg>要素はSVG文書であることを表すため必ず存在しなければなりません。
そしてこの<svg></svg>の間に描画オブジェクトを記述していくことになります。

ＳＶＧタグには要素内容がない場合があります。
ＨＴＭＬでは、<a>リンク先</a> などというように要素内容が必ず要素の開始タグと終了タグに囲まれていました。

しかし、ＳＶＧは要素によっては要素内容が存在しないため、<circle>～</circle>と記述しても良いのですが<circle />と省略して記述することができます。
（※ＸＭＬドキュメントであるため必ず閉じタグが存在しなければなりません。）

これはＸＭＬ形式に沿った記述方法をとっているからです。

↓

SVGでは、グラフィックサイズや位置の定義などに、CSSまたはXSLTによるスタイル付けをします。

例えば、絶対位置指定で、左から50px、上から50pxの位置に縦200px，横100pxの四角形コンテナ領域を定義するには


をSVGタグ内に記述します。

従って、ある程度のCSSあるいはXSLTの知識が必要とされます。
スクリプトを使用してダイナミックに属性アクセス等をするにはJavaScriptの知識が必要とされます。