SVGによるベクターグラフィック(1) (2/6)
作成:2011-04-25 07:51
更新:2011-04-25 08:03
更新:2011-04-25 08:03
■SVGと<svg>タグ
では、実際にSVGを使ってみましょう。まずは、インラインSVGではなく、SVGファイルを用意してHTMLに埋め込むやり方からです。SVGファイルは、XMLベースで記述しますので、普通のテキストエディタなどを使って作成することができます。
下のリスト欄に、簡単なサンプルを用意しました。ここでは「mydata.svg」というファイル名で作成することにします。SVGファイルは、このように「svg」という拡張子をつけたテキストファイルとして作成されます。
SVGのソースコードは、XMLのフォーマットに従って記述されます。その基本的な骨格を整理すると以下のようになるでしょう。
こうして作成したSVGファイルをHTMLの中に埋め込むには、いくつかのやり方があります。以下にざっと整理しておきましょう。
1. <object>タグを使う
2. <embded>タグを使う
3. <iframe>タグを使う
これらのタグを使ってSVGファイルを埋めこむと、用意したグラフィックが表示されます。今回は、3つの円が表示されるはずです。
下のリスト欄に、簡単なサンプルを用意しました。ここでは「mydata.svg」というファイル名で作成することにします。SVGファイルは、このように「svg」という拡張子をつけたテキストファイルとして作成されます。
SVGのソースコードは、XMLのフォーマットに従って記述されます。その基本的な骨格を整理すると以下のようになるでしょう。
<?xml version="1.0" standalone="no"?>SVGは、ルートに<svg>というタグを用意し、このタグの中にグラフィック関連のタグを記述していきます。ここでは、円を描く<circle>というタグを3つ用意してあります。<svg>タグには、表示するエリアを示すwidthとheight属性を用意しておきます。この他、SVGのタグであることを示すxmlns="http://www.w3.org/2000/svg"という属性を指定しておきます。
<!DOCTYPE svg …略…>
<svg width="横幅" height="縦幅" …略…>
……ここにグラフィックのタグを書く……
</svg>
こうして作成したSVGファイルをHTMLの中に埋め込むには、いくつかのやり方があります。以下にざっと整理しておきましょう。
1. <object>タグを使う
<object type="image/svg+xml" data="ファイル名" width="横幅" height="高さ" />
2. <embded>タグを使う
<embded type="image/svg+xml" src="ファイル名" width="横幅" height="高さ" />
3. <iframe>タグを使う
<iframe src="ファイル名" width="横幅" height="高さ"></iframe>これらは、どういうときにどれを使うという決まりはありません。個人的には、一番使いやすいものを使えば良いと思います。
これらのタグを使ってSVGファイルを埋めこむと、用意したグラフィックが表示されます。今回は、3つの円が表示されるはずです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※mydata.svg <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="250px" height="250px" xmlns="http://www.w3.org/2000/svg"> <circle cx="50px" cy="50px" r="50px" fill="red" stroke="blue" stroke-width="2px" /> <circle cx="100px" cy="100px" r="50px" fill="green" stroke="black" stroke-width="5px" /> <circle cx="150px" cy="150px" r="50px" fill="blue" stroke="red" stroke-width="10px" /> </svg> ※HTMLへの埋め込み 1. <object>タグを使う <object type="image/svg+xml" data="mydata.svg" width="300" height="300" /> 2. <embded>タグを使う <embded type="image/svg+xml" src="mydata.svg" width="300" height="300" /> 3. <iframe>タグを使う <iframe src="mydata.svg" width="300" height="300"> </iframe>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る