SVG を XHTML に埋め込む メモ

svg

Firefox2 にて確認。

<?xml version='1.0'?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:svg="http://www.w3.org/2000/svg">

<head><title>SVG埋め込みテスト</title></head>

<body>
  <h1>SVG埋め込みテスト</h1>

  <!-- デフォルト名前空間使用 -->
  <p>赤い四角→
    <svg:svg width="10" height="10">
      <svg:rect x="0" y="0" width="10" height="10" fill="red"/>
    </svg:svg>
  </p>

  <!-- 名前空間を個別に宣言 -->
  <p>青い丸→
    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
      <circle cx="5" cy="5" r="5" fill="blue"/>
    </svg>
  </p>

</body>
</html>

MIMEタイプが application/xhtml+xml でないと XML として処理されないので注意。

参考：http://developer.mozilla.org/ja/docs/SVG:Namespaces_Crash_Course