<svg> 「svgでグラフィックを描く」[読み方：エスブイジー]

<!-- 円 -->
<svg width="600" height="100" viewBox="0 0 600 100">
<circle cx="100" cy="50" r="50" fill="red"></circle>
<!-- cx=中心のx座標 cy=中心のy座標 r=半径 -->
</svg>
<!-- 楕円 -->
<svg width="600" height="100" viewBox="0 0 600 100">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="blue"></ellipse>
<!-- cx=中心のx座標 cy=中心のy座標 rx=半径x方向 ry=半径y方向 -->
</svg>
<!-- 長方形 -->
<svg width="600" height="100" viewBox="0 0 600 100">
<rect x="50" y="25" width="100" height="50" rx="10" ry="10" fill="green"></rect>
<!-- x=始点のx座標 y=始点のy座標 rx=角の丸みx方向 ry=角の丸みy方向 -->
</svg>
<!-- 直線 -->
<svg width="600" height="150" viewBox="0 0 600 150">
<line x1="50" y1="0" x2="200" y2="150" stroke="#000"></line>
<!-- x1=始点のx座標 y1=始点のy座標 x2=終点のx座標 y2=終点のy座表 -->
</svg>
<!-- 折れ線 -->
<svg width="600" height="150" viewBox="0 0 600 150">
<polyline points="50,25 50,75 100,75 100,125 150,125" stroke="#000" fill="none"></polyline>
<!-- points=始点のx座標 y座標 次点のx座標 y座標 ～ 終点のx座標 y座標 -->
</svg>
<!-- 多角形 -->
<svg width="600" height="180" viewBox="0 0 600 180">
<polygon points="0,50 75,0 150,50 150,150 0,150" fill="yellow"></polygon>
<!-- polylineと同様。但し、始点と終点がつながる -->
</svg>
<!-- 複雑な形状 -->
<svg width="600" height="200" viewBox="0 0 600 200">
<path d="M25,25 L150,150 C200,200 250,50 50,25 Z"></path>
<!-- M=始点のx座標 y座標 L=直線で次点のx座標 y座標 C=曲線で次点、中間2点のx座標 y座標 Z=閉じる -->
</svg>