Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

HTMLファイルにインラインのSVGを入れる

HTMLファイルにインラインのSVGを入れる事ができます。
わざわざ別ファイルに分けるようなモノでも無いときはこの手もアリですね。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple SVG Test</title>
  </head>
  <body>
    <svg version="1.1"
	 baseProfile="full"
	 width="300" height="200"
	 xmlns="http://www.w3.org/2000/svg">

      <rect width="100%" height="100%" fill="blue" />
      <circle cx="150" cy="100" r="80" fill="green" />
      <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
    </svg>

  </body>
</html>

こんな画面が出ます。