SVG: スケーラブルベクターグラフィック

SVG を始めましょう

スケーラブルベクターグラフィック (SVG) は XML ベースのマークアップ言語で、二次元ベースのベクターグラフィックを記述します。

そのため、テキストベースで、どんなサイズでもきれいにレンダリングできる画像を記述するためのオープンなウェブ標準であり、特に CSS、DOM、JavaScript、SMIL を含む他のウェブ標準とうまく動作するように設計されています。 SVG は本質的に、テキストに対する HTML のような位置づけの、グラフィックに対するものです。

SVG 画像と関連する振る舞いは XML のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。

旧来の JPEG や PNG のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリーを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。

SVG は 1999 年からワールドワイドウェブコンソーシアム (W3C) によって開発されています。

SVG 教本も参照してください。

ドキュメント

SVG 要素リファレンス

各 SVG 要素についての詳細情報です。

SVG 属性リファレンス

各 SVG 属性の詳細情報です。

SVG DOM インターフェイスリファレンス

JavaScript と連携するための SVG DOM API の詳細情報です。

HTML コンテンツへ SVG 効果を適用する

SVG は HTML、CSS と JavaScript と連携して動作します。SVG を使用することで、通常の HTML ページやウェブアプリケーションを拡張することができます。

ツール

例