神通广大的 SVG 是什么
可以无限放大依旧丝滑的图片！
能动起来，还能交互的图片！
用记事本写出来的图片！
程序能直接读懂的图片！
体积小，加载快！
这就是神通广大的 SVG（Scalable Vector Graphics），它是基于 XML 格式的一种标记语言，这种标记语言是用来描述二维空间的矢量图形。
下面几个简单的例子。
这是一个边长为 100 的正方形图片（width="100" height="100"），中间一个圆，圆心坐标是 (50, 50)（cx="50" cy="50"），半径 40（r="40"）,圆内填充天蓝色（fill="skyblue"），边框颜色为黑色，宽度为 2（stroke="black" stroke-width="2"）。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="skyblue" stroke="black" stroke-width="2"/>
</svg>
当鼠标移到圆形上方时，圆的半径会在 0.5 秒内从 40 缩小到 10，并且在动画结束后圆形会保持缩小后的状态，不会恢复原状。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="skyblue" stroke="black" stroke-width="2">
<animate attributeName="r" from="40" to="10" dur="0.5s" begin="mouseover" fill="freeze"/>
</circle>
</svg>
点击圆形会弹窗显示“你点到了我！”
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle onclick="alert('你点到了我！')" cx="50" cy="50" r="40" fill="skyblue" stroke="black" stroke-width="2" />
</svg>
点击圆形后变成了橙色的圆。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<script type="text/javascript">
<![CDATA[
function changeColor(evt) {
evt.target.setAttribute("fill", "orange");
}
]]>
</script>
<circle cx="50" cy="50" r="40" fill="skyblue" stroke="black" stroke-width="2" onclick="changeColor(evt)" />
</svg>
用 animate 来实现点击圆形后变成了橙色的圆。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="skyblue" stroke="black" stroke-width="2">
<animate attributeName="fill" to="orange" dur="0.2s" begin="click" fill="freeze"/>
</circle>
</svg>