HTMLでSVGを描画する代表的な方法は大きく分けて２つあります。
自分用にざっくりとしたメモ。
- 拡張子が「.svg」のSVGファイルを作り、それを埋め込む方法（埋め込み）
・iframe要素、object要素、embed要素などを使用してSVGファイルを埋め込む。
(埋め込んでいるページからのスクリプト処理が可能 ※ただしページとSVGファイルが同じドメインに所属する場合に限る)
・img要素やinput要素[type=image]、CSSのbackground-imageなどを使用すると、JPGやPNGなどのラスタ画像と同じように扱える。 - HTML5に直接コードを記述する方法（インラインSVG）
HTML5で利用可能。
（スクリプト処理が容易に行える）
※ドキュメントタイプ宣言に「<!DOCTYPE html>」を指定すること！
※HTML5に対応していないブラウザでは表示できない。
他にもSVGファイル自体にアクセスするスタンドアロン方式や、XHTMLに埋め込む方法、data URI schemeで埋め込む方法などもあります。
コメント