svgコードの記述ルールを覚えよう

さっそく書き方を学んでいきましょう。htmlを知っている人なら簡単ですが、知らなくても記述ルールはそれほど難しくありません。
svgは要素と属性と値で記述されます。それらを「<」と「>」で囲って書きます。そして次に「</」と「>」で要素名を囲ったものを書きます。
次のような感じです。

<要素 属性1="値" 属性2="値">
</要素>

「<」と「>」まで一まとめにしてタグと呼びます。要素がタグに意味を与え、属性と値で肉付けをしていきます。属性は複数取ることができ、値とセットです。
また上の例では1行目を開始タグ、2行目を終了タグ(閉じタグ)といいます。開始タグと終了タグは基本的にセットですが例外もあります。特定の要素は終了タグが不要な代わりにタグを閉じる際に「/>」を使います。
次のようになります。

<要素 属性1="値" 属性2="値"/>

終了タグが必要な要素は開始タグと終了タグの間に別のタグを入れることができます。そうやって入れ子構造を正しく作っていくことでsvgコードが完成します。
ここで実際のsvgコードを見ていきましょう。以下です。

<svg xmlns="http://www.w3.org/2000/svg" width="100cm" height="100cm" viewBox="0 0 2 2">
<path fill="pink" d="m1 0a1 1 0 0 1 0 2 1 1 0 0 1 0-2"/>
</svg>

上のコードはsvg要素とpath要素を使っており、path要素をsvg要素で囲っています。 ここでは要素や属性の細かい意味は説明しませんが、上のコードはピンク色で直径1メートルの円です。
htmlと異なりアルファベットの大文字と小文字は正しく区別しなければいけません。例えばこの例でsvg要素にviewBox属性を記述していますがこれを「viewbox」と書いてはいけません。
最後にsvg要素について、svgは全体がsvg要素で囲われたものでなければなりません(ツールで出力されたコードだといっちゃん最初にxml宣言がされている場合など例外もありますが、xml宣言は非推奨なので書かない方がいいです)。

ということで簡単ですが以上svg記述ルールについての説明となります。svgというよりベースのxmlの記述方法の説明になっていますが、これをとっかかりに色々勉強を始める人が出てくれると嬉しいです。