Snap.svg を使ってみる 2013/10/26

HTMLに以下のように書くと、グレーの円と赤い四角が描かれる。

<svg id="illustration1" height="100"></svg>
<script src="https://rawgithub.com/adobe-webplatform/Snap.svg/master/dist/snap.svg-min.js"></script>
<script>
var snap = Snap("#illustration1");
var circle = snap.circle(200, 50, 50); // x, y, r
circle.attr({fill: "#777"});
var rect = snap.rect(200, 50, 150, 30); // x, y, width, height
rect.attr({fill: "#F77"});
</script>

結果(IE8以前など未対応のブラウザだと表示されないと思う)