SVGとは「Scalable Vector Graphics」の略で、svg要素を使うことでHTML内にベクター画像を描画し、表示させることができます。SVGで描画されたものは、ベクター画像なので拡大縮小しても画質が荒れることもないので、きれいに表示することができます。それでは、いくつか簡単な描画をしてみたいと思います。

SVGの基本形

SVGを描画するには、「<svg></svg>」内に描画したいものを記述していきます。その際、幅や高さを指定するとその範囲内で描画することができます。

<svg width="100" height="100"></svg>
四角形rect
正円circle
楕円ellipse
多角形polygon
直線line
連続直線polyline

矩形を描画する

矩形を描画するには、rect要素を使って描画します。
このような指定にすると、以下のような矩形が描画されます。

<svg width="100" height="100">
<rect width="50" height="50" fill="#600"></rect>
<rect width="50" height="50" fill="#600" rx="5"></rect>
</svg>

1つ目は幅、高さ、色を設定して描画、2つ目は角丸で描画しています。座標を設定する場合は「x=”数値” y=”数値”」を使い、角丸にする場合は「rx=”数値”もしくはry=”数値”」を使います。また、色指定のfillの値には16進数の他に、RGBやRGBa表記が使えます。

円を描画する

円を描画するには、circle要素を使って描画します。

<svg width="100" height="100">
<circle r="20" cx="30" cy="20" fill="#600"></circle>
</svg>

rは半径、cxとcyは中心点を意味します。また、ellipse要素を使って楕円を描画することもできます。

<svg width="100" height="100">
<ellipse rx="25" ry="15" cx="30" cy="20" fill="#600"></ellipse>
</svg>

アニメーションをつける

SVGを利用した画像は、アニメーションをつけることができます。先程の円の図形を使って簡単なアニメーションをつけてみます。

<svg width="100" height="100">
<circle r="20" cx="30" cy="20" fill="#600">
<animate attributeName="r" from="10" to="20" dur="3s" repeatCount="1" />
</circle>
</svg>

この場合、半径10pxの円を3秒かけて半径20pxの円になるというアニメーションが起こります。repeatCountはアニメーションを繰り返す回数で1と設定しているので1回のみアニメーションします。リロードして確認してみてください。無限に繰り返しアニメーションをしたい場合は「indefinite」を設定すると無限ループをします。

今度は、アニメーションに色の変化をつけてみます。

<svg width="100" height="100">
<circle r="20" cx="30" cy="20" fill="#600">
<animate attributeName="r" from="10" to="20" dur="3s" repeatCount="1" />
<animate attributeName="fill" from="#600" to="#000" dur="3s" repeatCount="1" />
</circle>
</svg>

先程のアニメーションにattributeName「fill」を追加して色の変化をつけています。「#600」から「#000」の色へ3秒かけて1回変化します。

おすすめの記事