JavaScript/HTML５おぼえがき

<!-- rect -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
  <rect x="10" y="10" width="80" height="60" stroke="black" fill="#fff" stroke-width="2" />
</svg>
<!-- circle -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
  <circle cx="50" cy="40" r="30" stroke="black" fill="#fff" stroke-width="2" />
</svg>
<!-- line -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
  <line x1="10" y1="40" x2="90" y2="40" stroke="black" stroke-width="5" />
</svg>
<!-- polygon -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
  <polygon points="10 40, 50 10, 90 40, 50 70" stroke="black" fill="#fff" stroke-width="2" />
</svg>
<!-- path -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
  <path d="M 10 10 L 90 10 L 50 70 L 10 70" stroke="black" fill="#fff" stroke-width="2" />
</svg>

<!-- text -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
  <text x="5" y="40" font-size="15px">あいうえお</text>
</svg>
<!-- text + css -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
  <text x="5" y="60" font-size="40px" stroke="#0000ff" fill="#00ff00" stroke-width="2">あい</text>
</svg>

<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
<g transform="translate(10,40)">
  <text x="0" y="0" font-size="40">あい</text>
<g>
</svg>
<!-- rotate -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
<g transform="rotate(30)">
  <line x1="30" y1="20" x2="90" y2="20" stroke="black" stroke-width="2" />
  <text x="30" y="20" font-size="40">あい</text>
<g>
</svg>
<!-- scale -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
<g transform="scale(0.5,1.5)">
  <text x="10" y="40" font-size="40">あいう</text>
<g>
</svg>
<!-- scale2 -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
<g transform="scale(-1,1)">
  <text x="-90" y="40" font-size="40">あい</text>
<g>
</svg>
<!-- skewX -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
<g transform="skewX(-30)">
  <text x="40" y="50" font-size="40">あい</text>
<g>
</svg>
<!-- skewY -->
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
<g transform="skewY(-30)">
  <text x="5" y="70" font-size="40">あい</text>
<g>
</svg>

svg_img.svg

<!-- svg_img.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" style="background-color:#000">
  <circle cx="40" cy="40" r="30" stroke="#fff" fill="#000" stroke-width="5" />
</svg>

HTML

<img src="svg_img.svg">
<img src="svg_img.svg" width="40">

<style>
a:hover circle { fill: pink; }
.csst{ font-size: 40px; font-weight: bold; font-family: sans-serif;
      stroke: #0000ff; fill: #00ff00;  stroke-width:2; }
</style>
<svg x=0 y=0 width=100 height=80 style="background-color: #ddd">
  <text class="csst" x="5" y="60">あい</text>
</svg>
<svg x="0px" y="0px" width="100px" height="80px" style="background-color:#ddd;">
  <a xlink:href="https://www.google.co.jp/">
  <circle cx="50" cy="40" r="30" stroke="black" fill="#ccf" stroke-width="0" />
  </a>
</svg>