もっと早く知りたかった！SVGを扱うなら知っておきたいタグ＆プロパティまとめ

更新日: 2018年05月25日

HTML

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

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

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

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

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

資料をダウンロード

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

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

SVGを扱うなら知っておきたいこと：CSSプロパティ編

SVGを扱うためのCSSプロパティも多数存在していますが、主に塗りを扱う「fill」と線を扱う「stroke」の2つのグループが存在しています。
また、それぞれのプロパティを「animation」で指定することでSVGをアニメーションとして動かすことができるようになります。

1. fill (塗り)

fillは、要素の中の塗りの色を指定することができるプロパティです。
もちろん、塗りは単色だけでなく、グラデーションを指定することもできます。

fill: #0060e6;

2. fill-opacity (塗りの透明度)

fill-opacityは、fillで塗られた箇所の透明度を変えることができるプロパティです。

fill-opacity: 0.6;

ちなみにopacityでも透明度を変えることができますが、opacityはSVG全体の透明度を調整するので、線も含めて透過してしまいます。

3. stroke (線)

strokeは、要素のアウトラインの色を指定できるプロパティです。

stroke: #0060e6;

borderなどの他のアウトライン関連のプロパティと違い、幅や大きさなどをショートハンドで記述することはできません。

4. stroke-opacity (線の透明度)

stroke-opacityは、要素のアウトラインの透明度を指定できるプロパティです。

stroke-opacity: 0.4;

5. stroke-width (線の太さ)

stroke-widthは、外形線の幅を指定できるプロパティです。
0かnoneを指定すると、アウトラインを消すことができます。

stroke-width: 3;

6. stroke-linecap (線の先端の形)

stroke-linecapは、パスの先端の形を指定するプロパティです。
「butt」で線に等しく平らかな形になり、「square」で線の端が四角くなり、「round」で線の端が丸くなります。

stroke-linecap: square;

7. stroke-linejoin (線のつなぎ目の形)

stroke-linejoinは、パスのつなぎ目の形を指定するプロパティです。
「miter」はそのままつなぎ合わせ、「bevel」はつなぎ目が平らになり、「round」はつなぎ目が丸くなります。

stroke-linejoin: bevel;

8. stroke-dasharray (破線の間隔)

stroke-dasharrayは、破線の間隔を指定するプロパティです。
指定した間隔に応じて、等間隔で破線を表示します。

stroke-dasharray: 3px;

9. stroke-dashoffset (破線の開始位置)

stroke-dashoffsetは、破線の開始位置を指定するプロパティです。

stroke-dashoffset: 10px;

SVGをアニメーションで動かすには

SVGを動かすにはCSSアニメーションやJavaScript、jQueryなどを使う方法がありますが、もっとも簡単な方法は「@keyframes」でアニメーションのセットを作成し、pathやcircleといったSVGの構成要素に「animation」プロパティを指定することです。

例えば、pathにアニメーションを指定するには、以下のように指定していきます。

path{
　　animation: pathAnimation ease-in-out 3s;
}

@keyframes pathAnimation{
　　from{
　　　　stroke-dashoffset: 100;
　　　　fill-opacity: 0;
　　}
　　to{
　　　　stroke-dashoffset: 0;
　　　　fill-opacity: 1;
　　}
}

stroke-dasharrayには線がすべてつながるまでの値を指定していくのがポイントです。
上記の例はあくまでもシンプルな形で表現したアニメーションですが、プロパティを加えていったり「@keyframes」のタイミングを動かすことで複雑なアニメーションを実装することもできるようになります。

まとめ

XMLタグやCSSプロパティは他にも山ほど存在していますが、基本として押さえておきたいのは以上の通りです。
これらを組み合わせていけば、思った通りの描画やアニメーションを作成することができるでしょう。

ご覧いただいておわかりの通り、実はSVG自体はHTMLのようなタグやCSSで制御できるので、Webデザイナーにとって非常に馴染みのあるものなのです。
Illustratorなどで作成したSVGには普段使わない属性などがくっついてくるので、初めてSVGの中身を見ると困惑してしまうかもしれませんが、実は簡単だと実感していただければうれしいです。

▼ディレクターとデザイナーで読みたい資料