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)