svg の手習い from dotinstall

from dotinstall

https://end0tknr.github.io/sandbox/svg/svg_1.html

手習い - line

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="16">
  <line x1="2" y1="12" x2="126" y2="12"
    stroke="#20285A" stroke-width="4" stroke-linecap="round"/>
  <line x1="116" y1="2" x2="126" y2="12"
    stroke="#20285A" stroke-width="4" stroke-linecap="round"/>
</svg>

手習い - circle & line

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <circle cx="14" cy="14" r="10" fill="none"
      stroke="#070707" stroke-width="5"/>
  <line x1="21" y1="21" x2="29" y2="29"
    stroke="#070707" stroke-width="5" stroke-linecap="round"/>
</svg>

手習い - polyline

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16">
  <polyline points="2,12 62,12 52,2"
        stroke="#20285A" stroke-width="4"
        fill="none" stroke-linecap="round"/>
</svg>