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>