SVGの基本構成とインラインSVG

動点Qちゃん

今回はSVGコードの基本構成を説明し、何を記述しなければいけないかを押さえます・・・。

動点P

絵を描かなくてもコードを記述することでSVG形式の画像ファイルを作成できる！

今回はSVGのコードの基本構造を解説したいと思います。

SVGコードの基本構造
インラインSVG

SVGコードの基本構造

SVGはXMLベースのテキストファイルなので、メモなどのテキストエディタにコードを書くだけでSVGデータが作成できます。

以下が青い円のSVG画像ファイルの基本コードになっています

SVG形式ファイルのコード

<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

</svg>

このコードの中身、一体何が書いてあるのかを解説します。

今回の参考図書は「Webで使える!SVGファーストガイド」です。

最初の赤太文字部分

<?xml version=”1.0″ encoding=”utf-8″?>

文書がXMLベースで書かれているという宣言文です。バージョンが1.0で文字コードにUTF-8が指定されています。

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

文書の型を示す宣言文です。こちらはバージョン1.1。

なかなか複雑ですが、こういう文書だよという宣言なので何も考えずコピペすればいいと思います。<svg>タグの前にペッと貼ってしまってください。

次に真ん中の<svg　から始まる青太文字部分

<svg

svg要素の記述が入っているタグです。

version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”

バージョン1.1、xmlns…は名前空間を指定しています。これから記述するコードはSVGであり、HTMLなどの他の言語と区別するために必要です。xlinkというのもSVGの記述におけるリンクだということを宣言しています。

width=”400px” height=”400px”

要素の領域のサイズです。画像を貼り付けたら、そのサイズが400×400ピクセルだということ。

viewBox=”0 0 400 400” >

上で用意した領域のうち、どこを切り取って表示するかを決めます。

”始まりのx座標　ｙ座標　幅　高さ”の順です。切り取ってからサイズを要素の領域に合わせます。相対的な大きさなので単位はないです。

緑太文字部分

</svg>

タグで囲んでSVGの記述を閉じます。

viewBoxの指定は少し複雑なのでまた別の記事で説明しようと思います。わからなかったら最初は黄色のマーカーの部分に同じサイズを入れておきます。その通りの大きさで表示されるので複雑にならずに済みます。IEはこれらの記述がないときちんと拡大縮小できないみたいなので、これらは必須としてきちんと記述しておきましょう。

最後に緑太字部分

円を描画している記述です。

実際画像を描画しているのはたった1行の部分です。もちろん複雑な絵になるともっとコードが複雑になってきます。circleやpathなどのタグがあるので、それを使って座標などを指定しながら画像を描画していきます。

ちなみにメモなどのテキストエディタにこれらのコードを書いて、保存するとき拡張子に.svgを指定（できなかったら.txtを後で名前変更します。）すればSVG形式の画像ファイルの完成です。