1. SVG

    类似flash，具有可伸缩性。图形本身为xml格式的文件。

2. 圆：<circle> 

                                        //no标识不是独立的引入了一个外部文件，DTD
    
                                         //xmlns 属性可定义 SVG 命名空间
                                                             //stroke 和 stroke-width 属性控制如何显示形状的轮廓
    

3. 嵌入html方式：<embed>，<object>，<iframe>

    
     。任何                                                                                                               //HTML 规范中都没有 
      标签，adobe自己的type="image/svg+xml"pluginspage="http://www.adobe.com/svg/viewer/install/" />        //pluginspage 属性指向下载插件的 URL
    

                //codebase 属性指向下载插件的 URL

    
                             //可工作在大部分的浏览器中
    

4. 矩形：<rect> 

    1）

    2）透明度

    
    
                            //CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）                                                                                    // opacity可以为整个元素定义透明度
    

    3）圆角矩形

5. 椭圆：<ellipse>

    1）定义一个椭圆

    2）椭圆叠加

    3）椭圆组合

6. 线条：<line>

7. 多边形（不少于3个边）：<polygon>

    1）三角形

    2）四边形

8. 折现：<polyline> 

9. 定义路径：<path>   

    下面的命令可用于路径数据：

• M = moveto

• L = lineto

• H = horizontal lineto

• V = vertical lineto

• C = curveto

• S = smooth curveto

• Q = quadratic Belzier curve

• T = smooth quadratic Belzier curveto

• A = elliptical Arc

• Z = closepath

    注：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

    1）定义一条路径

    
    
               //路径：（250,150）->（150,350）->（350，350）
    

    2）定义一个螺旋路径

10. 滤镜：<defs><filter>

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

• feFlood

• feGaussianBlur

• feImage

• feMerge

• feMorphology

• feOffset

• feSpecularLighting

• feTile

• feTurbulence

• feDistantLight

• fePointLight

• feSpotLight

    
    
     //
     
       标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）//filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符//滤镜效果是通过 
      
        标签进行定义的。fe 后缀可用于所有的滤镜//
       
         标签的 stdDeviation 属性可定义模糊的程度//in="SourceGraphic" 这个部分定义了由整个图像创建效果
        
                                                                                                
         
          
         
        
       
      
     
                     //注意url定义
    

11. 渐变：<defs>

    1）线性渐变：<linearGradient>

    线性渐变可被定义为水平、垂直或角形的渐变：

• 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变

• 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变

• 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

    
    
     //id为渐变定义一个唯一的名称，(x1,y1),(x2,y2)定义开始和结束位置//渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 
     
       标签来规定。offset 属性用来定义渐变的开始和结束位///置。
      
       
                
        
        
       
      
                      //fill:url(#orange_red) 属性链接到此渐变
     
    

12. 放射性渐变：<radialGradient> 

    
    
     
      
                                                                                   //fx 和 fy 定义内圈