SVG ガイド

このページでは SVG のガイド記事を紹介しています。

HTML 内の SVG 入門

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

SVG animation with SMIL

Firefox 4 より、Synchronized Multimedia Integration Language (SMIL) を用いた SVG のアニメーションをサポートしています。SMIL では以下のようなことができます:

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

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

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

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

スクリプティング

ブラウザーの既定の動作を evt.preventDefault( ) メソッドで上書きしたり、イベントリスナーを element.addEventListener(event, function, useCapture) という構文でオブジェクトに追加したり、要素のプロパティを svgElement.style.setProperty("fill-opacity", "0.0", "") などで設定することが可能です。 3 つの引数がすべてプロパティを設定していることに注意してください。

データ型

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

リンク

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

名前空間の速修講座

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

画像としての SVG

SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。