HTML5グラフィック SVG(Scalable Vector Graphics)

Webでよく使われるSVG画像形式について説明する。
Tags:

SVG要素

svg要素はScalable Vector Graphicsを意味し、XMLベースのW3Cグラフィック標準勧告である。従来使用されてきたcanvas要素では、ベクター(vector)画像を表現できなかった。

しかしsvg要素は、ピクセルベースのWebページ上で、ピクセルの影響を受けないベクター画像を表現できるようにする。したがって、この要素は図表やグラフなど、ベクターベースのダイアグラム(diagram)を表現するのに非常に効果的である。

  • 内容はXMLベースのテキストファイルである。
  • GIF、PNG、JPEGがビットマップ形式であるのに対し、SVGは座標情報によるベクター形式のデータである。
  • 極端に拡大したり、Retinaなどの高解像度ディスプレイで表示したりしても、ビットマップデータで見えるようなピクセルが目立たない。
  • <img>タグで表示するほか、HTMLファイル内に直接記述することもできる。
  • 解像度に合わせて、スマートフォン用、高解像度用の画像ファイルをそれぞれ用意する必要がない。
  • 直線や曲線を組み合わせて描画する画像に向いている。写真データには適していない。
  • 透過やアニメーションにも使用できる。
  • 基本的にはテキストデータだが、gzipで圧縮したものも利用できる。
  • 拡張子は*.svgで、gzip圧縮したものは*.svgzである。
  • MIMEタイプはimage/svg+xmlである。
  • JavaScriptと組み合わせることもできる。
  • XMLを手入力するのは簡単ではないため、Illustratorなどのドローソフトで描いてSVGファイルとして出力する場合が多い。
  • 2001年にW3CがSVG 1.0を勧告し、2003年にSVG 1.1、2011年にSVG 1.1 2nd Editionを勧告した。
  • 当初はMicrosoftがVML、AdobeがPGMLを推奨していたが、業界標準としてSVGに定着した。

仕様書

対応している主要Webブラウザー

svg要素に対応している主要Webブラウザーのバージョンは次のとおりである。

要素 ie Edge chrome firefox safari opera
svg 9.0 12 4.0 3.0 3.2 10.1

SVGの書き方

画像ファイルとして使う方法

SVGは通常の画像ファイルとして、<img>やbackground-imageなどで読み込むことができる。

svg-sample.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="60" fill="#ddd" />
  <polygon points="50 10, 70 30, 50 50, 30 30" fill="#99f" />
</svg>

SVG

HTMLでは次のようにすると表示できる。

<img src="/images/svg/svg-sample.svg" width="100" height="60">    // 圧縮されていない場合

SVGZ または、上記の*.svgファイルをgzip圧縮し、拡張子を*.svgzに変更したものを読み込むこともできる。

<img src="/images/svg/svg-sample.svgz" width="100" height="60">   // gzip圧縮の場合

表示

タグとして書く方法

次のようにHTML内に直接記述することもできる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Test</title>
</head>
<body>
<svg x="0" y="0" width="100" height="60" style="background-color: #ddd">
  <polygon points="50 10, 70 30, 50 50, 30 30" fill="#99f" />
</svg>
</body>
</html>

Drawing

直線、四角形、多角形、円、楕円、経路、アニメーション、リンクを描く方法について見ていこう。

直線 - line

直線は次の形式で描く。

<line x1=値 y1=値 x2=値 y2=値...>

線を描くために使用するline要素の属性は次のとおりである。

属性 説明
x1 線が始まる位置のx座標を設定する。
y1 線が始まる位置のy座標を設定する。
x2 線が終わる位置のx座標を設定する。
y2 線が終わる位置のy座標を設定する。

次の例は、line要素を使用して線を描く例である。 SVG

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
  <line x1="5" y1="20" x2="100" y2="20" stroke="orange" stroke-width="2"></line>
</svg>

表示

四角形 - Rect

四角形は次の形式で描く。

<rect x= y= width= height=...>

x(左上のX)、y(左上のY)、width(横幅)、height(高さ)などを指定する。

四角形を描くために使用するrect要素の属性は次のとおりである。

属性 説明
width 図形の幅を設定する。
height 図形の高さを設定する。
stroke 図形の枠線の色を設定する。
stroke-width 図形の枠線の太さを設定する。
fill 図形を塗りつぶす色を設定する。
opacity 図形の透明度を設定する。

次の例は、rect要素を使用して四角形を描く例である。

例 1.

<svg width="200" height="150">
    <rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
    この文は、ユーザーのWebブラウザーがsvg要素に対応していないときに表示されます。
</svg>

例 2.

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
  <rect x="5" y="5" width="30" height="30" stroke="black" fill="#fff" stroke-width="2" />
</svg>

例 3. 上のようにそれぞれの属性を使って設定することもでき、次の例のようにstyle属性を使ってまとめて設定することもできる。

<svg width="200" height="150">
    <rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
</svg>

角丸四角形 - rect

rect要素にx、y、rx、ry属性を追加すると、角が丸い四角形を描くことができる。

角丸四角形を描くために使用するrect要素の属性は次のとおりである。

属性 説明
x 四角形の左上頂点のx座標を設定する。
y 四角形の左上頂点のy座標を設定する。
rx 四角形の角の曲がりのx軸半径を設定する。
ry 四角形の角の曲がりのy軸半径を設定する。

例

<svg width="250" height="200">
    <rect width="200" height="150" x="20" y="20" rx="20" ry="20"
        stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

円 - circle

円を描くために使用するcircle要素の属性は次のとおりである。

属性 説明
cx 円の中心x座標を設定する。
cy 円の中心y座標を設定する。
r 円の半径を設定する。

次の例は、circle要素を使用して円を描く例である。

例

<svg width="300" height="300">
    <circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

楕円 - ellipse

楕円を描くために使用するellipse要素の属性は次のとおりである。

属性 説明
cx 楕円の中心のx座標を設定する。
cy 楕円の中心のy座標を設定する。
rx 楕円のx軸半径を設定する。
ry 楕円のy軸半径を設定する。

次の例は、ellipse要素を使用して楕円を描く例である。

例

<svg width="300" height="200">
    <ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

多角形 - polygon

多角形は次の形式で描く。

<polygon points=...>

多角形を描くために使用するpolygon要素の属性は次のとおりである。

属性 説明
points 多角形の各頂点が表示される位置の座標を設定する。

points属性は、多角形を構成する各頂点のx座標とy座標を指定する。つまり、x1 y1、x2 y2、x3 y3,…のように頂点を指定する。このとき、最初の頂点から始まり、最後の頂点まで順番に線で結ばれて多角形を表現する。頂点の終わりは開始点に向かって閉じられる。

次の例は、polygon要素を使用して星形の多角形を描く例である。

例 1.

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <polygon points="5 20, 20 5, 35 20, 20 35" stroke="black" fill="#fff" stroke-width="2" />
</svg>

 

例 2.

<svg width="200" height="180" style="background: #ddd">
    <polygon points="10,70 190,70 30,170 100,10 170,170"
       stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

円 - Circle

円は次の形式で描く。

<circle cx=値 cy=値 r=値 ...>

cx(中心点のX)、cy(中心点のY)、r(半径)などを指定する。

例

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <circle cx="20" cy="20" r="15" stroke="black" fill="#fff" stroke-width="2" />
</svg>

楕円 - Ellipse

楕円は次の形式で描く。

<ellipse cx=値 cy=値 rx=値 ry=値 ...>

cx(中心点のX)、cy(中心点のY)、rx(X軸方向の半径)、ry(Y軸方向の半径)などを指定する。

例

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <ellipse cx="20" cy="20" rx="15" ry="8" stroke="black" fill="#fff" stroke-width="2" />
</svg>

経路 - Path

経路は次の形式で描く。

<path d=値 ...>

dには、パス描画の命令を記述する。M 5 20はx=5、y=20へ移動せよ(Move to)、L 20 5はx=20 y=5へ線を描け(Line to)という意味である。

  • Move to
    • M ( x y )+ : x, yへ移動
  • Lineto
    • L ( x y )+ : x, yへ線を描く
  • Horizontal lineto
    • H ( x )+ : 水平方向に線を描く
  • Vertical lineto
    • V ( y )+ : 垂直方向に線を描く
  • Shorhand/smooth curveto
    • S ( x1 y1 x y )+ : 制御点(x1, y1)、終点(x, y)とする2次ベジェ曲線
  • Curveto
    • C ( x1 y1 x2 y2 x y )+ : 制御点1(x1, y1)、制御点2(x2, y2)、終点(x, y)とする3次ベジェ曲線
  • Closepath
    • Z : 経路を閉じる

例

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <path d="M 5 20 L 20 5 L 35 20 L 20 20" stroke="black" fill="transparent" stroke-width="2" />
</svg>

2次ベジェ曲線 (Start) (x, y) (x1, y1)

3次ベジェ曲線 (Start) (x, y) (x1, y1) (x2, y2)

アニメーション - animate

アニメーションは次のように実行する。

<animate...>

attributeNameで指定された属性を、fromからtoの値まで、durで指定された時間で変更する。repeatCountは回数を指定する。

例

<svg x="0px" y="0px" width="400px" height="40px" style="background-color:#ddd">
  <rect x="5" y="5" width="30" height="30" stroke="black" fill="#fff" stroke-width="2">
    <animate attributeName="x" from="-30" to="400" dur="4s" repeatCount="indefinite" />
  </rect>
</svg>

リンク - link

リンクは次のように設定する。

<a xlink:href="...">

HTMLの<a>と同様に、クリックするとURLへ移動する。

例

<svg x="0px" y="0px" width="400px" height="60px" style="background-color:#ddd">
  <a xlink:href="https://www.devkuma.com">
    <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd"
      fill="#99f" points="200 10, 220 30, 200 50, 180 30"/>
  </a>
</svg>