Page Source
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline SVG in HTML5</title>
<meta name="content-language" content="de,ch,at" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/* <![CDATA[ */
function debug() { try { window.console.log ( '[XHTMLDBG]: '+Array.prototype.join.call(arguments,' ') ); } catch (e) {}; }
function createCanvas()
{
try {
var canvas = document.getElementById('canv');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "rgb(102,0,255)";
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
ctx.fill();
} catch (err) { debug("canvas",err); };
}
/* ]]> */
</script>
</head>
<body onload="createCanvas()">
<div style="margin:1em;">
<h2>Inline SVG in HTML5</h2>
<div>
<div style="float:left;width:50%;text-align:center;">
<div>svg/circle element.</div>
<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200">
<circle id="circ" cx="100" cy="100" r="50" fill="red"></circle>
</svg>
</div>
<div style="float:right;width:50%;text-align:center;">
<div>canvas element</div>
<canvas id="canv" width="200" height="200"></canvas>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div style="margin:2em auto;">
<a href="http://dev.w3.org/html5/">W3C HTML5</a>
<tt>-</tt>
<a href="http://dev.w3.org/html5/spec/the-canvas-element.html#the-canvas-element">W3C The canvas element</a>
<tt>-</tt>
<a href="../testpage.html">Back to Testpage</a>
</div>
<div>
Page Source
<pre>
...
</pre>
</div>
</body>
</html>