SVG

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

SVG 使用 XML 格式定义图像。

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>

<embed>:

• 优势：所有主要浏览器都支持，并允许使用脚本
• 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
• <embed src="circle1.svg" type="image/svg+xml" />
  

<object>:

• 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
• 缺点：不允许使用脚本。
• <object data="circle1.svg" type="image/svg+xml"></object>
  
• 
  

• <iframe>:

  • 优势：所有主要浏览器都支持，并允许使用脚本
  • 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
  • <iframe src="circle1.svg"></iframe>
    

  SVG有一些预定义的形状元素，可被开发者使用和操作：

  • 矩形 <rect>:       <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
      style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
      stroke-opacity:0.9"/>
         </svg>
  • //CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）  
  • //CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
  • //rx 和 ry 属性可使矩形产生圆角。
  • 圆形 <circle>:    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg> 
  • //cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
  • //r属性定义圆的半径

• • 椭圆 <ellipse> :
  • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>
    
  • • //cx属性定义的椭圆中心的x坐标
    • //cy属性定义的椭圆中心的y坐标
    • //rx属性定义的水平半径
    • //ry属性定义的垂直半径
    
    
  • 线 <line> :
  • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <line x1="0" y1="0" x2="200" y2="200"
      style="stroke:rgb(255,0,0);stroke-width:2"/>
    </svg>
    
  • • //x1 属性在 x 轴定义线条的开始
    • //y1 属性在 y 轴定义线条的开始
    • //x2 属性在 x 轴定义线条的结束
    • //y2 属性在 y 轴定义线条的结束
    
    
  • 折线 <polyline> :
  • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
    </svg>
    
  • //<polyline> 元素是用于创建任何只有直线的形状
  • 多边形 :<polygon>
  • <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  • <polygon points="100,10 40,180 190,60 10,60 160,180"
  • style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
  • </svg>
  • //points 属性定义多边形每个角的 x 和 y 坐标
  • 
    
  • 路径 <path> :
  • <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
    <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
      <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
      <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
      <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
      <!-- Mark relevant points -->
      <g stroke="black" stroke-width="3" fill="black">
        <circle id="pointA" cx="100" cy="350" r="3" />
        <circle id="pointB" cx="250" cy="50" r="3" />
        <circle id="pointC" cx="400" cy="350" r="3" />
      </g>
      <!-- Label the points -->
      <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
        <text x="100" y="350" dx="-30">A</text>
        <text x="250" y="50" dy="-10">B</text>
        <text x="400" y="350" dx="30">C</text>
      </g>
    </svg>
    
  • [插入]

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath
  • //以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
    

  
  

  
  

  
  
  
  

• SVG 文本 - <text>

• <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="http://www.w3schools.com/svg/" target="_blank">//链接文本
      <text x="0" y="15" fill="red">I love SVG</text>
    </a>
  </svg>