SVG

SVG 是啥 意為可縮放矢量圖形（Scalable Vector Graphics）。

<?xml version="1.0" standalone="no"?> 
   standalone 屬性！該屬性規定此 SVG 文件是否是“獨立的”，或含有對外部文件的引用。

            standalone="no" 意味着 SVG 文檔會引用一個外部文件

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
引用了這個外部的 SVG DTD。該 DTD 位於 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。該 DTD 位於 W3C，含有所有允許的 SVG 元素。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
，包括開啟標簽 <svg> 和關閉標簽 </svg> 。
version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
。cx 和 cy 屬性定義圓中心的 x 和 y 坐標。如果忽略這兩個屬性，那么圓點會被設置為 (0, 0)。r 屬性定義圓的半徑。
</svg>

申明方式
<embed src="circle1.svg" type="image/svg+xml" />  
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe src="circle1.svg"></iframe>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

 

直線

<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>

多邊形   指定點   邊框

<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> </svg>

園 橢圓      指定中心點 ，半徑  ，邊框

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

<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>

線段      ，指定點  ，粗細

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg>

路徑 <path>

• 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

<path d="M150 0 L75 200 L225 200 Z" />

文本 <text>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>

矩形 <rect>

圓形 <circle>

橢圓 <ellipse>

線 <line>

折線 <polyline>

多邊形 <polygon>

路徑 <path>

 更炫酷的特效， 路徑 ，模糊，陰影 ，漸變，放射性（線性，非線性）  ， 看文檔  SVG 參考手冊 | 菜鳥教程 (runoob.com)  ，

在線編輯器，，畫圖后直接看源碼SVG 在線編輯器 | 菜鳥工具 (runoob.com)