SVG ガイド

このページには、埋め込み、MIME （メディア） タイプ、スクリプトの処理、アニメーション、フィルターなど、SVG に関するガイドを掲載しています。

HTML 内の SVG 入門

この記事と関連する例は、インライン SVG を使用する方法を示しています。

SMIL による SVG アニメーション

SMIL (Synchronized Multimedia Integration Language) は、対話型マルチメディアプレゼンテーションを作成するための XML ベースの言語です。 制作者は、他の XML ベースの言語で SMIL 構文を使用して、アニメーションの要素のタイミングやレイアウトを定義することができます。

SVG フィルターのチュートリアル

SVG では、ビットマップ記述言語と同様のツールを使用することができます。例えば、シャドウや ぼかし効果 を使用したり、さまざまなフィルターの結果を合成したりすることができます。フィルター要素 <filter> を使えば、これらの効果を追加し、後でオブジェクトに付加することが可能です。

SVG 効果の HTML コンテンツへの適用

最近のブラウザーは、 SVG を CSS スタイルの中で使用して、 HTML コンテンツに対してグラフィカルな効果を適用することに対応しています。

スクリプト処理

JavaScript を使用して SVG を作成および操作するには、いくつかの方法があります。 この記事では、イベント処理、対話機能、および埋め込み SVG コンテンツの操作について記述しています。

データ型

SVG は多くのデータ型を使用しています。この記事では、これらのデータ型とその構文、使用目的の説明を掲載しています。

リンク

SVG の a 要素の target 属性は、 Mozilla Firefox 1.5 では動作しません。 SVG 文書はタグを使用して親の HTML 文書に埋め込まれます。

名前空間の速修講座

XML の派生言語として、 SVG は名前空間が付けられています。もし SVG コンテンツを作成する予定なら、名前空間の概念と使い方を理解することが重要です。名前空間は、複数の XML 派生言語に対応するユーザーエージェントにとって不可欠であり、ブラウザーはとても厳格でなければなりません。これで名前空間を理解することに時間をかければ、将来の頭痛の種から解放されるでしょう。

画像としての SVG

SVG は、HTML、CSS、特定の SVG 要素、およびキャンバス API を通じて、画像形式として使用することができます。 このページには、SVG を画像ソースとして指定できる機能の一覧が掲載されています。