2007-12-06

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

2007-12-06

JavaScript で SVG を XHTML に動的に埋め込む方法メモ

svg javascript

/* svg要素を作成 */
var canvas = document.createElementNS("http://www.w3.org/2000/svg", "svg:svg");
canvas.setAttribute("id", "canvas");
canvas.setAttribute("width", "100");
canvas.setAttribute("height", "100");
canvas.setAttribute("viewBox", "0 0 100 100");

/* rect(四角形)要素を作成 */
var rect = document.createElementNS("http://www.w3.org/2000/svg", "svg:rect");
rect.setAttribute("x", "0");
rect.setAttribute("y", "0");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "url(#fade)");
canvas.appendChild(rect); // canvas に　rect を append

/* svg要素をドキュメントに追加 */
document.body.appendChild(canvas);

createElement() ではなく createElementNS() を使用することに注意。