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名前空間宣言
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」属性（幅と高さ）について見ていきます。
スポンサーリンク