SVGの基礎

SVG(Scalable Vector Graphics)とは

古くからSVGファイルは存在していたので、SVGそのものはあまり目新しいものではない。 しかし、Canvasにお絵描きする以外で、Web上に絵を書く方法を提供できるようになった。これをインラインSVGと言う。 以下のコードを直接HTML上に記述すると、

<svg width="300" height="60">
    <title>Attribute Animation with SMIL</title>
    <rect x="0" y="0" width="300" height="60" stroke="black"
        fill="white" stroke-width="1" />
    <circle cx="0" cy="30" r="20" fill="green" stroke="black" stroke-width="1">
        <animate attributeName="cx" from="0" to="300"
             dur="3s" repeatCount="indefinite" />
    </circle>
</svg>

下図のように表示される。

Attribute Animation with SMIL

SVGを使ったアニメーションの例だが、このようにブラウザ上で動く絵を簡単に表示できる。

それでは、ゆっくりと基礎から勉強していくことにしよう。 なお、SVGはほぼすべての主要ブラウザで対応しており、問題なく動作する。

SVGの基礎 1

キャンパスとグリッド

SVG grid image

上図のように、キャンパス内にグリッド方式で座標指定する。 始点はキャンパスの左上であり、右方向にx、下方向にyの値で指定する。 グリッド単位はピクセルである。 通常のグラフとは異なることに注意。

キャンパスは、以下のSVGタグで指定し、明確に他のキャンパスと区別する場合、SVGキャンパスと呼ぶことにする。

<svg width="200" height="100" style="background-color:white;">...</svg>

これを実行すると、以下のように表示される。

スタイルシートでキャンパスに色を付けているのでキャンパスの位置とサイズがわかる。

<svg width="200" height="100" style="background-color:white;>
    <rect x="20" y="20" width="100" height="60" fill="green" />
</svg>

とキャンパス内に矩形を書くと、

divタグ（<div>)で囲むと、以下のように中央寄せもできる。

SVGキャンパスの色を消すと、

のようになる。

SVGタグ

<svg width="200" height="100" viewBox="0 0 100 100" >
    .........
</svg>

viewBox は元画像の表示領域を示し、拡大縮小表示できる。
viewBox は "始点x　始点y　幅　高さ" で指定する。 上記の場合、横サイズを２倍に拡大表示する。

「SVGのバージョンについて」
現在のブラウザでサポートされるHTML5組み込みのSVGのバージョンは2.0であるが、SVGファイルは1.1のままである。 SVG2.0はHTML5で導入され、HTMLと統合された。SVG1.1との互換性はほぼないようである。 SVG2.0とSVG1.1はほぼ別物と考えたほうがいいらしい。 SVGファイルは1.1となっているようで、2.0はまだのようである。InkScapeなどのソフトとの互換性があるのだろう。

<svg width=...... xmlns="http://www.w3.org/2000/svg" >
<svg width=...... xmlns="http://www.w3.org/2000/svg" version="1.1" >

上記のように記述する方式もあり、どの形式が良いのか現在検討中である。 ちなみに、version属性は現在非推奨となっている。 SVGファイルを作成する場合は、2025年現在、version="1.1"を入れる必要がある。 2.0と共通する部分も多いと思われるが、CSSとの連携はできない。 古いモバイル端末ではサポートされていない場合がある。

参考：[1] SVG 1.1仕様（第２版）日本語訳
[2] [MDN Web Docs] SVG: Scalable Vector Graphics 日本語版

矩形

<rect x="10" y="10" width="60" height="30" fill="green" />
<rect x="80" y="10" width="60" height="30" rx="10" ry="10" />

上記を適切なsvgタグの中に記述すると、

のように表示される。 fill属性については後述するが、指定色で塗りつぶす。省略した場合は黒になる。 この属性値はスタイルシート形式で記述することもできる。このことについても後述する。

x,yは矩形の左上の座標、width,heightは幅と高さ、rx,ryは丸みを帯びた角のx軸上の半径,y軸上の半径を表す。 rx,ryは楕円のx半径、y半径を表し、4分の1領域のそれぞれの領域に対応する。 rx,ryの値が大きく異なると歪に見えることがあるので、同じ値にしておくのが無難だろう。

円と楕円

<circle cx="20" cy="30" r="20" fill="green" />
<ellipse cx="80" cy="30" rx="30" ry="20" fill="green" />

cx,cyは円および楕円の中心の座標、rは円の半径、rx,ryは楕円のx方向半径、y方向半径を表す。

直線

<line x1="0" y1="0" x2="60" y2="50" stroke="black" stroke-width="3" />
<line x1="65" y1="55" x2="180" y2="10" stroke="blue" stroke-width="10" />

x1,y1は始点、x2,y2は終点の座標、strokeは線の色、stroke-widthは線幅を表す。 詳しい解説は後述。

連続線

<polyline points="10,10 65,120 90,40 ....." stroke="black" stroke-width="3" fill="none" />

複数の座標を順番に結んで線を引いていく。"x1,y1 x2,y2 x3,y3 x4,y4 ..."のように記述する。 空白、カンマ、EOL、改行文字はほぼ同じ意味で使われ、"x1 y1 x2 y2 x3 y3 x4 y4 ..."と書いても同じ解釈になる。 自分で見やすいように適度にカンマや空白を入れるとよいだろう。 なお、日本語の全角空白は使えないので注意。
また、fillを省略するとfill="black"が選択され、閉じた図形の内部を塗りつぶされるので要注意。 fill="none"を入れると線のみの表示となる。 なお、fill="transparent"としても同じ表示になるが、透明色で塗りつぶしになるので意味が違う。

多角形

<polygon points="10,10 65,120 90,40 ....." stroke="black" stroke-width="3" fill="none" />

連続線と同じように座標を記述する。最後の点は自動的に最初の点まで線が引かれ、閉じた図形になる。 つまり、最後の点を最初の点に一致させる必要はなく、多角形の各頂点の座標を記述すればよいだけとなっている。

作成日: 更新日:

back    next