SVGとは？

かつあい！！

SVGファイルの中の探索

rect

rect 要素はSVGの基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。 また、角の丸まった四角形を作ります。

なぜこれが必要なの？？

長方形・正方形などを表現したいときに使う

path

path要素は SVG の基本的な図形の中でもっとも強力な要素です。 これは、(少なくともよく似ている) 他のすべての図形などを作成するために用いることができます。 pathタグのd= 属性の中に実際のpathが書いてあります。

gタグ

グループ化するためのものです。

<svg width="100%" height="100%" viewBox="0 0 95 50"
     xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>

参考

https://github.com/maxwellito/vivus/blob/master/src/vivus.js