1 什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG 与 Canvas两者间的区别:
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG 与 Canvas两者间的区别:
2 SVG 文件的优势
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
3 SVG 文件的创建
SVG文件的结构
SVG 使用 XML 编写,SVG 文件必须使用 .svg 后缀来保存
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
规定本SVG文件是独立的还是包含一个对外部文件的引用。
第二和第三行引用了这个外部的SVG DTD
SVG文档以根元素 “<svg” , Version属性定义了SVG的版本
，xmlns属性定义了SVG的名称空间
3-1 SVG文件的创建[内嵌svg]
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg>
</body>
</html>
3-2 SVG文件的创建[外部svg]
SVG 文件可通过以下标签嵌入 HTML 文档：
、 或者 。
3-2-1 使用 标签
<embed> 标签被所有主流的浏览器支持，并允许使用脚本。
推荐使用html5文档结构标签
<embed src="images/01 svg_create.svg" width="300" height="300“type="image/svg+xml" />
3-2-1 使用 标签
标签可工作在大部分的浏览器中。<iframe src="rect.svg" width="300" height="100"> </iframe>
4-1 SVG创建矩形
<svg width="100%" height="100%" version="1.1" xmlns=http://www.w3.org/2000/svg>
<rect width=“300” height=“100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>
</svg>
代码解释：
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
4-2 SVG创建圆形
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
代码解释：
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。
4-3 SVG创建椭圆
椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
代码解释：
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
4-4 SVG创建直线
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
代码解释：
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
4-5 SVG创建多边形
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
</svg>
代码解释：
points 属性定义多边形每个角的 x 和 y 坐标
4-6 SVG创建折线
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
代码解释：
points 属性定义多边形每个角的 x 和 y 坐标
4-7 SVG创建路径
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
下面的命令可用于路径数据：
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
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
- M 起点X，起点Y
- L（直线）终点X，终点Y
- H（水平线）终点X
- V（垂直线）终点Y
- M 10,20 L 80,50
M 10,20 V 50
M 10,20 H 90
- A指令
- 允许不闭合。可以想像成是椭圆的某一段，共七个参数：
- A RX,RY,XROTATION,FLAG1,FLAG2,X,Y
- RX,RY指所在椭圆的半轴大小
- XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想
像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。 - FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。
- FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
- X,Y为终点坐标
如：m 200,250 a 150,30 0 1 0 0,70
5 SVG文本
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<text x="50" y="50" fill="green" style="font-size:60px;">
强大的svg
</text>
</svg>
SVG参考资料
SVG在线编程器
https://c.runoob.com/more/svgeditor/
20个强大的ＳＶＧ处理工具
https://www.sohu.com/a/127807686_424243
SVG格式在线转换
http://www.bejson.com/convert/image_to_svg/
4982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
