SVG意为可缩放矢量图形，svg的图片与普通的jpg,png等图片相比，其优势在于不失真。一般普通的图片放大后，会呈现出锯齿的形状，但是svg图片则不会这样，它可以被高质量地打印。
现在就用dreamweaver制作一个简单的svg动画，用来表示太阳系。
分享代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>太阳系</title> 6 </head> 7 8 <body> 9 <svg width="100%" height="100%"> 10 <defs> 11 <g id="E" transform="translate(-340,-90)"> 12 <image xlink:href="image/earth.gif" x="330" y="75" height="30px" width="30px"></image> 13 <path id="path2" d="M390,80 h 0 a50,19 0 1,0 1,1 z" fill="none" stroke="white" stroke-width="1"/> 14 <circle cx="0" cy="0" r="5" fill="white" stroke="black" stroke-width="1" > 15 <animateMotion dur="30s" repeatCount="indefinite"> 16 <mpath xlink:href="#path2" /> 17 </animateMotion> 18 </circle> 19 </g> 20 <radialGradient id="sunfill" cx="50%" cy="50%" r="100%"> 21 <stop stop-color="#FF0000" offset="0%" stop-opacity="1"/> 22 <stop stop-color="#FBF900" offset="95%" stop-opacity="1"/> 23 <stop stop-color="#FFFFFF" offset="100%" stop-opacity="1"/> 24 </radialGradient> 25 </defs> 26 27 <rect x="0" y="0" width="100%" height="100%" fill="black" /> 28 29 <circle cx="660" cy="250" r="60" fill="url(#sunfill)" /> 30 <path id="path1" d="M1200,200 h 0 a600,200 0 1,0 1,1 z" fill="none" stroke="white" stroke-width="1"/> 31 32 <use x="0" y="0" xlink:href="#E"> 33 <animateMotion dur="365s" repeatCount="indefinite" > 34 <mpath xlink:href="#path1" /> 35 </animateMotion> 36 </use> 37 </svg> 38 </body> 39 </html>
在这段代码中，地球的自转图是在网上下载的，然后，月亮，太阳以及轨道线都是用代码画出来的。
<g>该标签将地球与月亮化为一体，当作一个整体，然后再与太阳合在一起。
transform 则是表示转动。
radialGradient 这个则表示渐变。赋予一个id，然后将其和太阳联系起来，这里用的是：fill=“url(#sunfill)”。
animateMotion 这个是让月亮绕着地球动的属性。
最后的效果图如下：
这里所显示的是截取的部分时间，然后出现的效果。