SVGによるベクターグラフィック(1) (2/6)

■SVGと<svg>タグ

では、実際にSVGを使ってみましょう。まずは、インラインSVGではなく、SVGファイルを用意してHTMLに埋め込むやり方からです。SVGファイルは、XMLベースで記述しますので、普通のテキストエディタなどを使って作成することができます。

下のリスト欄に、簡単なサンプルを用意しました。ここでは「mydata.svg」というファイル名で作成することにします。SVGファイルは、このように「svg」という拡張子をつけたテキストファイルとして作成されます。

SVGのソースコードは、XMLのフォーマットに従って記述されます。その基本的な骨格を整理すると以下のようになるでしょう。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg …略…>
<svg width="横幅" height="縦幅" …略…>
    ……ここにグラフィックのタグを書く……
</svg>

SVGは、ルートに<svg>というタグを用意し、このタグの中にグラフィック関連のタグを記述していきます。ここでは、円を描く<circle>というタグを３つ用意してあります。<svg>タグには、表示するエリアを示すwidthとheight属性を用意しておきます。この他、SVGのタグであることを示すxmlns="http://www.w3.org/2000/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ファイルを埋めこむと、用意したグラフィックが表示されます。今回は、３つの円が表示されるはずです。

(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>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail