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

/* 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() を使用することに注意。