このページの本文へ

サンプルコードで学ぶ SVGの読み方、書き方 (2/2)

2015年06月12日 12時00分更新

文●小山田 晃浩/ピクセルグリッド

  • この記事をはてなブックマークに追加
本文印刷

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と組み合わせる方法を解説します。

前へ 1 2 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く