SVGが一般化してきたとはいえど、*「SVGは聞いたことあるけれど、使ったことはない」*というWebデザイナーの方も多いのではないでしょうか。
実際、長い間GIFやJPEG、PNGなどのビットマップ形式のデータが主流だったWeb業界ではあったので、SVGのようなベクター形式のデータが扱えるようになったとは言っても、「新しもの好き」の人が扱う目新しいフォーマットだと思っているひとが多いのも事実です。

しかし、SVGは画像劣化がなかったり、アニメーションを扱えたり、テキストエディターで直接カスタマイズができたり、CSSやJavaScriptで操作できたりと、扱うメリットが多いので、これから急速に普及していく可能性があります。

また、Can I use…でも確認できますが、今ではほとんどのモダンブラウザがSVGをサポートしているので、互換性も他の最新技術ほど気にする必要がないのです。

今回は、SVGを扱うなら知っておきたいタグやプロパティをまとめてご紹介します。
細かい属性まで含めると膨大な量になってしまうので、ここではよく使うであろう属性をピックアップしてご紹介していきます。

SVGを扱うなら知っておきたいこと：XMLタグ編

以前、「 今注目の画像フォーマット「SVG」を使いこなすために最低限知っておきたいこと 」という記事で、SVGをIllustratorで作成したり、オンラインエディターで作成するという方法をご紹介しました。
こうしたソフトを使えば、複雑な図形を作成することができますが、結局のところSVGとはXMLタグ(端的に言えばHTMLタグを広げたもの)なので、タグラインに直接打ち込んで図形を描画することもできます。

これらのタグについて知っておけば、Illustratorなどで作成したSVGファイルをテキストファイルで開いたときにも、大まかにどのような意味合いでタグが登場しているかが分かるので、下記の基本的な図形について学んでいきましょう。

SVGタグの基本

SVGタグはこれから描画する図形のキャンバスのようなもので、通常widthやheight属性を使ってサイズを指定します。

例えば、緑の線に黄色の塗りを加えた図形を100x100pxのキャンバスに描く場合は、このようなタグになります。

<svg width="100" height="100">
　　<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

circleについては後述しますが、簡単に言えば描画する命令をSVGタグで囲むという作業を行えば、SVG画像が作成できるというわけです。

では、次にSVGタグの中身で描画の役割を果たすタグについて、見ていくことにしましょう。

1. rectタグ

rectタグは、四角形を描画するための命令です。

例えば、上の図形を描画するのに以下のようなタグを利用します。

<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

x、y属性については、それぞれ左と上からの開始位置を指定し、rxとry属性は角をどれくらい丸くするかを指定しています。

2. circleタグ

circleタグは、円を描画するための命令です。

例えば、半径40、中心座標(x, y)＝(50, 50)の円を描画するには、以下のようなタグを利用します。

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

cxとcyタグが中心の円の座標となりますが、指定しない場合は(0, 0)が適用されます。
rタグは、半径を指定するタグで、円を描画する際には必要です。

3. ellipseタグ

ellipseタグは、楕円を描画するための命令です。
基本的には、circleタグと同じように描画することができますが、rx、ryタグで横半径・縦半径を指定することができます。

<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />

4. lineタグ

lineタグは、線を描画するための命令です。
x1・y1タグで開始座標を指定し、x2・y2タグで終了座標を指定します。

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />

5. polygonタグ

polygonタグは、多角形を描画するための命令です。
pointsでは、x座標とy座標をカンマで区切って指定し、そのセットを半角スペースで区切っていきます。
それらの点をつなぎ合わせて、多角形を作っていきます。

<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

6. polylineタグ

polylineタグはpolygonタグ同様に線を結びますが、始点と終点は結ばないので、線のようになります。

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />

7. pathタグ

pathタグは、SVGの中でも最も複雑な図形を描画できる図形で、d属性の中にパスデータを記述していきます。

<path d="M150 0 L75 200 L225 200 Z" />

pathタグは非常に複雑なので詳細は下記の参照記事に譲りますが、数値の前に指定されたアルファベットを置くことで、「コマンド」と言われる特殊な命令を指定することができます。
例えば「Z」を指定すると、「現在の点から現在の部分パスの始点まで直線を描き、部分パスを閉じる」という意味の命令を実行し、「S」を指定すると、「現在の点から点 (x, y) へ三次ベジェ曲線を描く」という命令になります。
大文字で絶対座標、小文字で相対座標が続きます。

参照：
パス – SVG 1.1 （第２版）｜W3C

8. textタグ

textタグは、テキストを挿入する命令です。
パスデータではなく、テキストをそのまま乗せている形であり、アウトライン化はされていません。

I love ferret!

<text x="0" y="15" fill="#0060e6" transform="rotate(30 20,40)">I love ferret!</text>