どうも！LSSです！！
昨日の記事中で、
SVGはベクター形式の画像ですが、例えていえば「絵描き歌」みたいなもので、 「まーるかいてちょん、まーるかいてちょん」みたいな「描き方の指示」が書かれているというのが基本である以上、写真画像などを表示するのは不向きである、というのは常に ついて回ります。
インラインSVGについて、ぼーっと考えてみた - Little Strange Software
てな事を書きました。
「絵描き歌」みないなもの、というのは我ながら大胆な比喩だったな、と思いつつ、要は「描き方の手順を順に文（テキスト）で表記したもの」という事が言いたかったんですね。
というわけで、今回は
「絵描き歌をSVGに落とし込んでみて、『SVGは絵描き歌のようなもの』なのか、そうでないのか、見ていただこう」
という回になります^^
（ついでに、コード手打ちでSVGを描いていく様子も見られますｗ）
まず、SVGタグを書きます
コード
<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;">
</svg>
まず、SVGがどうこう以前に、HTMLのオプションとしての
width="70%"（画面の表示領域の70%幅のサイズで表示）
と、CSS指定としての
style="border: 1px solid black;"（この範囲が画像である事が分かるように枠線を表示）
しておきます。
のように前後に [] をつけて置かないと勝手にコード削除されます^^;
さて、他に指定している項目について。
xmlns="http://www.w3.org/2000/svg"
これは、まぁ、お約束的なものですね。
viewbox="0 0 20 20"
SVGの、これから絵を描画するキャンバス、バーチャルに無限大のサイズのキャンバスがある、とまず思ってください。
そしてそのうちの、「座標0,0 と 座標20,20 の部分だけを切り出して、画像として使用する」というイメージです。
縦横20づつ、のサイズですね。
なお、ここのサイズには単位がありません。
あくまで「便宜上 決めた仮想的なサイズ」で、実際に表示するサイズは前述の
width="70%"
で指定したサイズに拡大または縮小して表示される事になります。
stroke="black"
「既定の線の色」を黒に指定します。
こうしておくと、後から描く円や線の色の指定を省略した場合、黒で描画される事になります。
座標の話
座標を指定する際には、x座標（横の位置・サイズ） y座標（縦の位置・サイズ） の順に書きます。
x座標（横）については、中学の数学で使用したグラフと同様、「右に行くほど大きい数値」の座標になります。
y座標（縦）については、数学グラフでは「上に行くほど大きい数値」でしたが、SVGの場合は上下が逆転していて、「下に行くほど大きい数値」になります。
今回は「座標0,0から座標20,20」を使用しますので、
「画像の左上の隅が x=0 y=0、右上の隅が x=20 y=0、左下の隅が x=0 y=20、右下の隅が x=20 y=20」
という事になります。
絵描き歌
まーるかいて ちょん
コード
<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;">
<circle cx="7" cy="10" r="1" fill="none" stroke-width="0.1"></circle><!--まーるかいて-->
<circle cx="7" cy="10" r="0.2" stroke-width="0.1"></circle><!--ちょん-->
</svg>
<!-- と --> で挟んだ部分はコメント（コード上 無視される部分）です。
まず「まーるかいて」のところで、「x=7 y=10 を中心とし、半径1の円」を塗りつぶしナシで描きました。
続けて「x=7 y=10 を中心とし、半径0.2の円」を描きました（fillを省略すると塗りつぶしアリになります）。
まーるかいて ちょん
コード
<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;">
<circle cx="7" cy="10" r="1" fill="none" stroke-width="0.1"></circle><!--まーるかいて-->
<circle cx="7" cy="10" r="0.2" stroke-width="0.1"></circle><!--ちょん-->
<circle cx="13" cy="10" r="1" fill="none" stroke-width="0.1"></circle><!--まーるかいて-->
<circle cx="13" cy="10" r="0.2" stroke-width="0.1"></circle><!--ちょん-->
</svg>
次の「まーるかいて」のところでは、xだけを13に変更しました。
同じ高さで右の方に表示されていますね。
続けて「ちょん」の部分も同様に、xだけ13にしています。
…すでに絵としては怪しくなってきましたｗｗｗ
おまめに根が出て
コード
<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;">
<circle cx="7" cy="10" r="1" fill="none" stroke-width="0.1"></circle><!--まーるかいて-->
<circle cx="7" cy="10" r="0.2" stroke-width="0.1"></circle><!--ちょん-->
<circle cx="13" cy="10" r="1" fill="none" stroke-width="0.1"></circle><!--まーるかいて-->
<circle cx="13" cy="10" r="0.2" stroke-width="0.1"></circle><!--ちょん-->
<circle cx="10" cy="13" r="1" fill="none" stroke-width="0.1"></circle><!--おまめに-->
<path d="M 10,14 l 0,1" fill="none" stroke-width="0.1"></path><!--根がでて-->
</svg>
「おまめ」となる円、さらにその下に伸びる「根」を直線で描きました。
うえきばち～うえきばち
コード
<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 20 20" stroke="black" style="border: 1px solid black;">
<circle cx="7" cy="10" r="1" fill="none" stroke-width="0.1"></circle><!--まーるかいて-->
<circle cx="7" cy="10" r="0.2" stroke-width="0.1"></circle><!--ちょん-->
<circle cx="13" cy="10" r="1" fill="none" stroke-width="0.1"></circle><!--まーるかいて-->
<circle cx="13" cy="10" r="0.2" stroke-width="0.1"></circle><!--ちょん-->
<circle cx="10" cy="13" r="1" fill="none" stroke-width="0.1"></circle><!--おまめに-->
<path d="M 10,14 l 0,1" fill="none" stroke-width="0.1"></path><!--根がでて--><circle cx="10" cy="12" r="6" fill="none" stroke-width="0.1"></circle><!--うえきばち～-->
<circle cx="10" cy="10" r="8" fill="none" stroke-width="0.1"></circle><!--うえきばち-->
</svg>
「うえきばち」では大きめの円（半径6と半径8）を描きます。
先に描く半径6の円は中心（10,10)より少し下の（10,12)を円の中心として、次に描く半径8の円は中心（10,10)を円の中心としました。
y座標を計算すると、円の下限は 12+6=10+8 で、ぴったりくっつく事になります^^
以下省略
６月６日にUFOがあっちいってこっちいって落っこちてお空に三日月浮かんでいたりしますが、もういいやｗ
こんな感じで、順番に
「描画する円や線を文（テキストコード）で指示し、それに従って描き加えていくのがSVG」
であって、それはさながら「絵描き歌」のようですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
