【SVG】SVGについての基本

svgをhtml内に記述するには下のように書きます。
すると、ウェブページ上にsvg画像を描画できます。

<svg class="square" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" stroke-width="1" />
</svg>

実際に描いてみたものが下図になります。幅200px、高さ200pxの正方形を描画できました。

それでは、svgに関する理解を深めるため詳しく見ていきます。使えればOKという方は実用的な記事も書いていく予定ですので、いましばらくお待ちください。

注意書き

正しい内容・検証結果に基づいて記事を書きます。ただし、一部イメージの方が掴みやすいなどイメージを優先する箇所があるかもしれません。また単純な理解不足等あるかもしれません。おかしいところはご指摘いただけますと幸いです。

「xmlns=」SVG名前空間宣言

SVG名前空間宣言「xmlns=”http://www.w3.org/2000/svg”」という部分について見ていきます。

まずは、htmlについて見ておきます。htmlを書くとき、最初に「<!DOCTYPE html> 」という記載があります。これはhtml5というルールの中で書きますよという意味です。

次にsvgタグです。svgタグの中ではsvg(xml派生言語)のルールの中で書きます。そのために「<svg xmlns=”http://www.w3.org/2000/svg”>~</svg>」を記述します。こう書くことで、svgタグで囲まれた中ではsvgのルールを適応させますよーと宣言できます(http://www.w3.org/2000/svgがsvgルールと思っておけばOK)。

実際に「xmlns=”http://www.w3.org/2000/svg”」で正方形を書いてみました。

ソース(svg)を見るにはこちらをクリック▶

<svg class="square" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" stroke-width="1" />
</svg>

次に名前空間を試しに「xmlns=”svg”」と変更してみます。

ソース(svg)を見るにはこちらをクリック▶

<svg class="square" width="100" height="100" viewBox="0 0 100 100" xmlns="svg" version="1.1">
 <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" stroke-width="1" />
</svg>

どちらも正常に描画できました。「xmlns=”svg”」を試したのは、名前空間名はただの文字列であり重要なのは一意であることという内容を目にしたので実際に「http://www.w3.org/2000/svg」以外に変更してみました。ですが、あえて「http://www.w3.org/2000/svg」以外に変更する理由はありませんので「http://www.w3.org/2000/svg」を使いましょう。

version=」バージョン

version=”1.1″」こちらは見てのとおりsvgのバージョンです。

正直なところ、どのバージョンが最新か認識できていません。w3cのページを見ると1.1とありますので、こちらを最新という認識でバージョン1.1を指定しています。

「width=、height=」幅と高さ

次は「width=、height=」幅と高さについて見ていきます。