SVG入門

SVGとは
仕様書
SVGの書き方
- 画像ファイルとして
- HTML要素として
描画
アニメーション
- <animate ...>
その他
- <a xlink:href="...">

Web でよく使用される SVG 画像フォーマットについて説明します。

Scalable Vector Graphics の略。
HTML を標準化している W3C が策定している。
中身は XML ベースのテキストファイル。
GIF, PNG, JPEG がビットマップ形式なのに対し、座標情報によるベクター形式のデータ。
極度に拡大したり、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 に定着。
Chrome 1.0, Firefox 1.5, IE9, Edge 12, Opera 8, Safari 3 以降で使用可能。
SVG と Canvas との比較論があるがメリデリは曖昧。利用は Canvas の方が多いみたい。

本ページでは、SVG のごく一部の機能のみを説明しますので、詳細は下記の仕様書や他のリファレンスを参照してください。

SVG 1.0 (2001/09/04)
https://www.w3.org/TR/SVG10/
SVG 1.1 (2003/01/14)
https://www.w3.org/TR/2003/REC-SVG11-20030114/
SVG 1.1 2nd Edition (2011/08/16)
https://www.w3.org/TR/SVG11/

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>

HTML

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

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

HTML

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

表示

下記の様に HTML 中に直接記述することもできます。

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>

直線を描画します。x1(開始点のX座標)、y1(開始点のY座標)、x2(終了点のX座標)、y2(終了点のY座標) などを指定します。

SVG

<line x1="10" y1="30" x2="190" y2="30" stroke="black" stroke-width="2" />

表示

矩形を描画します。x(左上のX)、y(左上のY)、width(横幅)、height(高さ) などを指定します。

SVG

<rect x="5" y="5" width="30" height="30" stroke="black" fill="#fff" stroke-width="2" />

表示

多角形を描画します。posts には、x1 y1, x2 y2, x3 y3, ... のように軌跡点を指定します。軌跡の最後は開始点に向けて閉じます。

SVG

<polygon points="5 20, 20 5, 35 20, 20 35" stroke="black" fill="#fff" stroke-width="2" />

表示

円を描画します。cx(中心点のX)、cy(中心点のY)、r(半径) などを指定します。

SVG

<circle cx="20" cy="20" r="15" stroke="black" fill="#fff" stroke-width="2" />

表示

楕円を描画します。cx(中心点のX)、cy(中心点のY)、rx(X軸方向の半径)、ry(Y軸方向の半径) などを指定します。

SVG

<ellipse cx="20" cy="20" rx="15" ry="8" stroke="black" fill="#fff" stroke-width="2" />

表示

パスを描画します。d には、パス描画の命令を記述します。M 5 20 は、x=5, y=20 に移動せよ(Move to)、L 20 5 は x=20 y=5 に線を引け(Line to) を意味します。

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

SVG

<path d="M 5 20 L 20 5 L 35 20 L 20 20" stroke="black" fill="transparent" stroke-width="2" />

表示

二次ベジェ曲線

三次ベジェ曲線

アニメーションを行います。attributeName で指定した属性を、from から to の値まで、dur で指定した時間で変動させます。repeatCount には回数を指定します。

SVG

<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>

表示

リンクを張ります。HTML の <a> と同様、クリックするとその URL にジャンプします。

SVG

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

表示

目次

SVGとは

仕様書

SVGの書き方

画像ファイルとして

HTML要素として

描画

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

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

<polygon points= ...>

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

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

<path d= ...>

アニメーション

<animate ...>

その他

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