html　svg

html

w3schools.com

<style>svg{width:300px;height:300px;border:1px solid #ccc;}</style>

円

<h2>円</h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 300 300">
<circle cx="55" cy="55" r="50" stroke="red" stroke-width="5" fill="blue" />
</svg>

楕円

<h2>楕円</h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 300 300">
<ellipse cx="100" cy="30" rx="100" ry="30" fill="red" />
</svg>

線

<h2>線</h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 300 300">
<line x1="0" y1="0" x2="200" y2="300" stroke="rgb(255, 0, 0)" stroke-width="5" />
</svg>

パス

<h2>パス</h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 300 300">
<!--
M = moveTo
L = lineTo
Z = closePath
-->
<path d="M0 150 L150 150 L0 300 Z" />
</svg>

ポリゴン：多角形

<h2>ポリゴン：多角形</h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 300 300">
<polygon points="0,0 100,200 0,300" style="fill:rgb(255, 0, 0);stroke:rgb(0, 255, 0);stroke-width:5" />
</svg>

ポリライン：折れ線


<h2>ポリライン：折れ線</h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 300 300">
<polyline points="0,0 100,200 0,300" style="fill:none;stroke:rgb(0, 255, 0);stroke-width:5" />
</svg>

矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 300 300">
<rect x="100" y="100" width="100" height="100" style="fill:blue;stroke:red;stroke-width:5" />
</svg>

テキスト

This is SVG Text. 
<h2>テキスト</h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 300 300">
<text x="10" y="20" fill="red">This is SVG Text.</text>
</svg>