【SVG】SVGの基本と読み込み方法

SVG とは

SVG とは Scalable Vector Graphics の略で、画像形式の 1 つです。

画像形式として有名な PNG や JPEG は、ラスターグラフィックス（Raster Graphics）と呼ばれ、ピクセルによって画像を構成します。 ピクセルの大きさ（解像度）によって画像の精度が決まります。

一方 SVG は、ベクターグラフィックスと呼ばれ、円、矩形、線などあらかじめ決められた形のものを、伸縮したり曲げたりすることで形を変え、それらを組み合わせることで画像を構成します。

ベクターグラフィックスの最大の特徴は、拡大縮小しても画質が変わらないということです。 以下は同じ形状の画像ですが、ラスターグラフィックスとベクターグラフィックスで画質の差があることがわかると思います。

SVG（ベクターグラフィックス）

PNG（ラスターグラフィックス）

その他動的に色や形状を変えられるなど、ベクターグラフィックスでのみできることがいくつかあります。

基本構造

SVG は、以下のように<svg>をルート要素とした XML 形式で記述します。

<?xml version="1.0"?>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <title>Circle</title>
  <desc>円の形の画像です。</desc>
  <!-- ここから描画 -->
  <circle cx="50" cy="50" r="50" style="stroke: black; fill: #3498db" />
</svg>

<svg>には SVG の様々な定義をします。 ここでは画像の大きさを表すwidthとheight、SVG であることを示すxmlnsを設定しています。

xmlnsは名前空間と呼ばれ、XML 内のタグがどの規格で解釈されるかを指定します。 SVG の場合は必ず、xmlns="http://www.w3.org/2000/svg"と設定する必要があります。

<title>には画像名を設定し、<desc>は画像の詳細（説明）を設定します。

今回は円を描画したいため<circle>を使用します。 SVG ではこのように決められた形が定義されています。 描画に関する詳細は、この記事では割愛します。

Web で読み込む方法

以下に SVG ファイルの読み込みについて記述します。

img

通常の画像と同じく<img>を使用して読み込みます。 widthやheightで大きさを変更する点も同じです。

<img src="circle.svg" alt="circle" />

CSS

CSS のbackground-imageで読み込みます。 こちらも通常の画像を読み込む場合と同じです。

.svg {
  background-image: url('circle.svg');
}

object

<object>は、画像だけでなく動画や PDF など様々な形式のデータを埋め込むために使用します。 SVG を読み込む場合は、typeにimage/svg+xmlを指定します。

<object>内には、読み込めなかった場合に代わりに表示する要素を指定します。

<object data="circle.svg" type="image/svg+xml">
  <img src="circle.png" />
</object>

Web で描画する方法

HTML では、<svg>を使用することで直接 SVG を描画することができます。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" style="stroke: black; fill: #3498db" />
</svg>

こちらは画像ではないため、右クリックしても画像として保存することはできません。

CSS のアニメーションを使用することで描画を動的に変化させることができます。

また Vue.js などと組み合わせることでも、動的に色などの描画を変化させることが可能です。