Uses SVG to handle vector graphics in a web page. Demos below are SVG inline, included from separate file, created via JavaScript or as SVG & VML through the Raphaël JavaScript library.
Code used in this page
<!--
Inline SVG - only works sent as application/xhtml+xml or text/xml, or in later
web browsers (Firefox 4, Google Chrome 7, Internet Explorer 9 etc)
-->
<svg width="200" height="110" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="52" r="50" stroke="#0000ff" stroke-width="1" fill="#ff0000" />
</svg>
<!-- Included from separate file -->
<embed src="circle.svg" width="200" height="110" type="image/svg+xml"></embed>
<iframe src="circle.svg" width="200" height="110" type="image/svg+xml"></iframe>
<object data="circle.svg" width="200" height="110" type="image/svg+xml"></object>
<div id="svg-demo"></div>
<script>
// Via regular JavaScript
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
svg.setAttribute("width", "200");
svg.setAttribute("height", "110");
svg.setAttribute("version", "1.1");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "52");
circle.setAttribute("r", "50");
circle.setAttribute("fill", "#ff0000");
circle.setAttribute("stroke", "#00ffff");
svg.appendChild(circle);
document.getElementById("svg-demo").appendChild(svg);
</script>
<div id="raphael-demo"></div>
<script src="raphael.js"></script>
<script>
window.onload = function () {
// SVG & VML via Raphaël JavaScript library
var paper = Raphael(document.getElementById("raphael-demo"), 320, 200),
circle = paper.circle(150, 62, 60);
circle.attr("fill", "#ff0000");
circle.attr("stroke", "#00ffff");
};
</script>