【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という方は実用的な記事も書いていく予定ですので、いましばらくお待ちください。

注意書き

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

目次(SVGについて複数ページ書いてます)

「xmlns=」SVG名前空間宣言

htmlファイルの文頭に「<!DOCTYPE html> 」という記載があります。これはhtml5というルールの中で書きますよという宣言です。

SVG名前空間宣言「xmlns=”http://www.w3.org/2000/svg”」も同じような感じです。つまり、「svg(xml派生言語)のルールの中で書きますよ」という宣言で、
「<svg xmlns=”http://www.w3.org/2000/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」以外を試してみました。上記のとおり「xmlns=”svg”」でも正常に描画できたので、必ず「xmlns=”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」属性(幅と高さ)について見ていきます。