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

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

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

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

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

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

チュートリアル

ゼロから始める SVG 入門

このチュートリアルは SVG の内部を説明することを目的としており、技術的な詳細が詰まっています。単に美しい画像を描きたいだけなら、 Inkscape のドキュメントページにもっと有用なリソースがあるかもしれません。 W3C の SVG Primer も SVG の良い入門書です。また、アドベントカレンダーをテーマにした 25 種類の SVG をコーディングする SVG Tutorial もチェックしてみてください。

ガイド

リファレンス

SVG 要素リファレンス

それぞれの SVG 要素についての詳細情報です。

SVG 属性リファレンス

それぞれの SVG 属性の詳細情報です。

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

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

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

SVG は HTMLCSSJavaScript と連携して動作します。

リソース