SVGの基本図形要素を知ろう
ここまではツールで作成したSVGファイルをコピー＆ペーストして埋め込む方法を解説しました。一方、SVGはマークアップ言語ですので、もちろん手でコードを書くこともできます。基本的な図形の書き方を見てみましょう。
もっとも単純な図形は円です。円はcircle要素で描きます。円は、
- 中心点のx,y座標
- 半径の長さ
があれば、どこにどんな大きさの円を配置するかを決められます。例えば、以下のコードで円を配置できます。
<html>
...
<body>
<svg width="600" height="400" viewBox="0 0 600 400">
<circle cx="100" cy="100" r="50"></circle>
</svg>
</body>
</html>
各属性は以下を意味します。
| 属性 | 意味 |
|---|---|
cx属性 |
CenterXを意味し、中心点のx座標 |
cy属性 |
CenterYを意味し、中心点のy座標 |
r属性 |
Radiusを意味し、半径の長さ |
すべての属性値にpxなどの単位がつかないことに注意してください。SVGはすべて座標の世界で処理されます。座標1が実際に何ピクセルで表示されるかは、前に説明したビューポートとビューボックスの関係によって自動的に決定されます。
SVGには円以外にもさまざまな基本図形が存在します。要素によって指定できる属性が異なります。
長方形を描く「rect要素」
rect要素は長方形を描きます。角の丸みも指定できます。
| 属性 | 意味 |
|---|---|
x属性 |
配置x位置 |
y属性 |
配置y位置 |
width属性 |
横幅 |
height属性 |
高さ |
rx属性 |
RoundXを意味し、角の丸みx方向 |
ry属性 |
RoundYを意味し、角の丸みy方向 |
<html>
...
<body>
<svg width="600" height="400" viewBox="0 0 600 400">
<rect x="50" y="50" width="100" height="50" rx="10" ty="10"></rect>
</svg>
</body>
</html>
楕円を描く「ellipse要素」
ellipse要素は楕円を描きます。正円は楕円の特殊な形なので、ellipse要素でも正円を描けます。指定できる属性はcircle要素によく似ています。
| 属性 | 意味 |
|---|---|
cx属性 |
CenterXを意味し、中心点のx座標 |
cy属性 |
CenterYを意味し、中心点のy座標 |
rx属性 |
RadiusXを意味し、x方向の半径の長さ |
ry属性 |
RadiusYを意味し、y方向の半径の長さ |
<html>
...
<body>
<svg width="600" height="400" viewBox="0 0 600 400">
<ellipse cx="100" cy="100" rx="100" ry="50"></ellipse>
</svg>
</body>
</html>
直線を描く「line要素」
line要素は一本の直線を描きます。
| 属性 | 意味 |
|---|---|
x1属性 |
始点のx座標 |
y1属性 |
始点のy座標 |
x2属性 |
終点のx座標 |
y2属性 |
終点のy座標 |
<html>
...
<body>
<svg width="600" height="400" viewBox="0 0 600 400">
<line x1="50" y1="50" x2="200" y2="150" stroke="#000"></line>
</svg>
</body>
</html>
折れ線を描く「polyline要素」
polyline要素は折れ線を描きます。line要素の上位互換といえます。指定できる属性はpointsのみで、xとyの座標の組をx1,y1 x2,y2…のように列挙して形状を決定します。
| 属性 | 意味 |
|---|---|
points属性 |
座標の組を列挙する |
<html>
...
<body>
<svg width="600" height="400" viewBox="0 0 600 400">
<polyline points="50,50 50,100 100,100 100,200" stroke="#000" fill="none"></polyline>
</svg>
</body>
</html>
多角形を描く「polygon要素」
polygon要素は多角形を描きます。polyline要素と似ていますが、polygon要素は自動で始点と終点がつながり、線が閉じて形になります。
| 属性 | 意味 |
|---|---|
points属性 |
座標の組を列挙する |
<html>
...
<body>
<svg width="600" height="400" viewBox="0 0 600 400">
<polygon points="0,50 86,0 172,50 172,150 86,200 0,150"></polygon>
</svg>
</body>
</html>
複雑な形状を描く「path要素」
path要素は複雑な線、形状を描くための要素です。ここまでいくつかの基本的な図形要素を紹介してきましたが、path要素はそれらの特性をすべて兼ねる万能な図形要素です。path要素を使えば、正円、直線、多角形はもちろん、さらに複雑な図形も描画できます。ただし、パスを表現するためのコードは非常に複雑なため、詳細を覚える必要はありません。path要素はIllustratorなどのドローツールで作るもの、との前提でよいでしょう。ドローツールを操作できる知識があれば、SVGを扱う上でのアドバンテージとなります。
path要素はd属性によって形が決定されます。dはpathDataの意味で、内容はとても複雑です。
<html>
...
<body>
<svg width="600" height="400" viewBox="0 0 600 400">
<path d="M100,100 L200,200 C300,300 300,100 100,100 Z"/>
</svg>
</body>
</html>
d属性には、座標データとなる数字の他に、コマンドとなる文字が含まれています。d属性は必ずMから始まり、それに続けてさまざまなコマンドで作り出す線をつなげ、図形を作り出します。コマンドは大文字と小文字で挙動が変わり、大文字の場合は絶対座標、小文字の場合は1つ前のコマンドを基準とする相対座標となります。
| コマンド | 意味 | パラメーターの数 | パラメーターの役割 |
|---|---|---|---|
m M |
MoveTo。パスの開始位置 | 2 | 開始位置のx座標とy座標 |
z Z |
ClosePath。パスの終わり | 0 | |
l L |
LineTo。任意の位置に直線を引く | 2 | 直線の終点のx座標とy座標 |
h H |
Horizontal LineTo。横方向に直線を引く | 1 | 直線の終点のx座標 |
v V |
Vertical LineTo。縦方向に直線を引く | 1 | 直線の終点のy座標 |
c C |
CurveTo。3次ベジェ曲線を引く | 6 | 終点と2つのハンドルのx,y座標 |
s S |
Shorthand CurveTo。Cの省略形 | 4 | 終点と1つのハンドルのx,y座標。もう一方のハンドルは、明示したハンドル座標の鏡面対称の座標が使われる。 |
q Q |
Quadratic Bézier CurveTo。2次ベジェ曲線を引く | 4 | 終点と1つのハンドルのx,y座標 |
t T |
Shorthand Quadratic Bézier CurveTo。Qの省略形 | 2 | 終点x,y座標。ハンドルは、直前に登場したハンドルの鏡面対称の座標が使われる。 |
a A |
Elliptical Arc。円弧を引く | 7 | 半径の長さ、回転量、時計回りに膨らむかその逆かなど(詳細省略) |
繰り返しになりますが、path要素は無理に手で書こうとせず、ドローツールから出力する前提で利用するといいでしょう。
任意の形にリンクが設定できる「a要素」
SVGには独自にリンクを指定するためのa要素があります。HTMLのa要素と同じ名前ですが、別の要素です。
SVGのa要素は、任意の形状を括って利用します。リンク先は、SVGとは別のXML仕様である「XLink」で指定するため、href属性の頭にxlink:を付けます。ただし、HTML5内に記述する場合、XLink用のxmlns宣言は省略できます。
<html>
...
<body>
<svg width="600" height="400" viewBox="0 0 600 400">
<a xlink:href="http://example.com">
<circle cx="100" y="100" r="50"></circle>
</a>
</svg>
</body>
</html>
HTMLのa要素では、リンクの有効範囲は四角形になります。一方、SVGでは、リンクの有効範囲が形状と同じになります。上記の場合は円の内側だけがリンクの有効範囲です。日本地図の都道府県ごとにリンクするようなUIも簡単に作れるわけですね。
◆
ここまでで、SVGのかなり基本的な書き方、読み方について紹介しました。次回は、SVGとCSSやJavaScriptと組み合わせる方法を解説します。
