ブロックチェーン・AI・システム開発の株式会社INDETAIL

SVGを使って図形を描画してみよう

2015.08.26
rockd

8月も後半に差し掛かり、北海道はもう既に涼しさを感じる気温となってきました。
皆さんいかがお過ごしでしょうか。
さて、今回はタイトルの通りSVGについての話をしたいと思います。

SVGとは

SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、XMLをベースにした2次元ベクターイメージ用の画像形式のことです。
JPEGやPNGのような画像と比べて、画像を拡大した場合に劣化せず綺麗な状態で表示されるので、Retinaなどの高解像度のディスプレイや、タブレットやスマートフォンなどと相性がとてもよく、最近ではSVGを使用したWebサイトもよく見られるようになりました。
今では主要なブラウザは大体SVGをサポートしていますが、IE8以下などはSVGに対応していないので注意が必要です。
SVG非対応のブラウザでも表示したい場合は、サポート用のライブラリや代替画像を用意するといった対応が必要になってきます。

SVGに対応しているブラウザ一覧

  • Internet Explorer 9以上
  • Firefox 3.0以上
  • Chrome 4.0以上
  • Mac OS X Safari 3.2以上
  • Opera 9.0以上
  • iOS Safari 3.2以上
  • Androidブラウザ 3.0以上

試しに作ってみよう

最初に述べた通り、SVGは実際にはXMLを記述したソースコードなので、テキストエディタを使えば簡単に作成することが出来ます。
では実際に簡単な図形を描画してみます。

svgタグの中にxmlns属性で名前空間を指定しています。こちらはルールみたいなものなので必ず指定してください。
widthとheight属性は図形を表示するキャンパスのサイズを指定しています。

rect要素のxとyはここでは画面左上からの座標になります。fillは図形の塗りの色を表します。SVGでは長さはすべて座標を示すのでpx(ピクセル)などの単位はつけられないので注意が必要です。

実際にブラウザで表示するとこのような感じになります。(下記は画像イメージです)

rect

とても簡単に図形の描画が出来ました。

今回はかなり触りの部分でしたが、SVGはインタラクティビティやアニメーションなどのサポートやオプションも充実しており、工夫次第で面白いアニメーションだったり色々な表現が出来るのでオススメです。
次回はCSSやJavascriptと組み合わせたSVGでのアニメーション表現を紹介したいと思います。

rockd

エンジニア。 最近はフロントエンドを担当することが多い。 たまにデザインをすることもある。 インドアな見た目とは裏腹に意外とアウトドア。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。