SVGをかきたい

SVGはなんとなく使ってはいるけど、イラレとかで作ったやつべたーっと張るだけで、

コードも雰囲気でしか見れないです。

ので、簡単な図形なら書ける（描ける）ようになりたいなあという記事。

SVGとは

XMLベースの、2次元ベクターイメージ用の画像形式の1つで、W3Cが策定しているそうです。

ベクター形式なので拡大縮小しても画像が劣化することがないですね。

そしてSVGはXMLベースなので、テキストエディタで編集可能です。

CSS・JSでアニメーションとかできたりします。

SVGの書き方

1.直線<line>

code:line.html

<svg width="200" height="200">

<line x1="10" x2="150" y1="10" y2="10" stroke="#40e0d0" stroke-width="2"/>

</svg>

2.矩形<rect>

code:rect.html

<svg width="200" height="200">

<rect x="10" y="10" width="30" height="30" stroke="#40e0d0" fill="#fff" stroke-width="2"/>

</svg>

3.円<circle>

code:circle.html

<svg width="200" height="200">

<circle cx="100" cy="100" r="50" stroke="#40e0d0" fill="#fff" stroke-width="2"/>

</svg>

4.楕円<ellipse>

code:ellipse.html

<svg width="200" height="200">

<ellipse cx="100" cy="100" rx="50" ry="30" stroke="#40e0d0" fill="#fff" stroke-width="2" />

</svg>

5.多角形<polygon>

code:polygon.html

<svg width="200" height="200">

<polygon points="20 10, 100 10, 120 70,90 120,40 70" stroke="#40e0d0" fill="#fff" stroke-width="2"/>

</svg>

謎形

最後に書いた座標から、最初の座標へ自動で閉じる。