SVG：可缩放矢量图形。全称是：Scalable Vector Graphics
SVG使用 XML 格式定义图像。
SVG是使用 XML 来描述（二维图形和绘图）程序的语言。
SVG是W3C的推荐标准
SVG于2003年1月14日成为W3C推荐标准。
这是SVG单独文件：
<!--
standalone:该属性规定此 SVG 文件是否是 “独立”, 或含有对外部文件的引用。
standalone="no"意味着 SVG 文档会引用一个外部文件,就是 DTD 文件。
-->
<?xml version="1.0" standalone="no" ?>
<!--
引用外部的 SVG DTD 。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” 。
该 DTD 位于 W3C, 含有所有允许的 SVG 元素。
-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--
SVG代码以 <svg> 元素开始。width 和 height 属性可设置此 SVG 文档的宽度和高度。
version属性可定义所使用的SVG版本, xmlns属性可定义 SVG命名空间。
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--
circle用来创建一个圆圈, cx 和 cy 属性定义圆中心坐标 (x, y)。如果忽略这两个属性,那么圆点会被设置为 (0,0)。
r属性定义圆的半径。stroke和strike-width属性控制如何显示形状轮廓的颜色和宽度。
fill属性设置形状内的颜色。
-->
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
这是SVG在HTML中：
SVG文件可以通过以下标签嵌入 HTML 文档：<embed>、<object> 和 <iframe>。
SVG的代码可以直接嵌入到HTML页面中，或你可以直接链接到SVG文件中。
使用<embed>标签：
优势：所有主流浏览器都支持，并允许使用脚本。
缺点：不推荐在HTML4和 XHTML中使用。
SVG有一些预定义的形状元素，可被开发者使用操作。
矩形<rect>
圆形<circle>
椭圆<ellipse>
线<line>
折线<polyline>
多边形<polygon>
路径<path>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/main.css"> 7 </head> 8 <body> 9 10 <svg xmlns="http://www.w3.org/2000/svg" version="1.0"> 11 <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-1;stroke:rgb(255,0,0);"></rect> 12 </svg> 13 <p>代码解析</p> 14 <ul> 15 <li>rect元素的width和height属性可定义矩形的高度和宽度</li> 16 <li>style属性用来定义css属性</li> 17 <li>css的fill属性定义矩形的填充颜色</li> 18 <li>css的stroke-width属性定义矩形边框的宽度</li> 19 <li>css的stroke属性定义矩形边框的颜色</li> 20 </ul> 21 22 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 23 <rect x="50" y="20" width="100" height="100" style="fill:blue;stroke:pink;stroke-5;fill-opacity:0.1;stroke-opacity:0.9"></rect> 24 </svg> 25 <p>代码解析</p> 26 <ul> 27 <li>x属性定义矩形的左侧位置</li> 28 <li>y属性定义矩形的顶端位置</li> 29 <li>CSS的fill-opacity属性定义填充颜色的透明度</li> 30 <li>CSS的stroke-opacity属性定义笔触颜色的透明度</li> 31 </ul> 32 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 33 <rect x="50" y="20" width="100" height="100" style="fill:blue;stroke:pink;stroke-5;fill-opacity:0.5;opacity:0.5"></rect> 34 </svg> 35 <p>代码解析</p> 36 <ul> 37 <li>CSS的opacity属性用于定义了元素的透明值</li> 38 </ul> 39 40 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 41 <rect x="50" y="20" rx="20" ry="20" width="100" height="100" style="fill:red;stroke:black;stroke-5;opacity:0.5"></rect> 42 </svg> 43 <p>代码解析</p> 44 <ul> 45 <li>rx 和 ry 属性可使矩形产生圆角</li> 46 </ul> 47 </body> 48 </html>
这个是画个圆，感觉挺简单的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 9 <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle> 10 </svg> 11 <p>cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0,0).r属性定义圆的半径。</p> 12 13 </body> 14 </html>