SVG使用XML格式定义图像

SVG基础知识–使用XML格式定义图像

1. 什么是SVG？

可伸缩矢量图形（Scalable Vector Graphics）
用来定义用于网络的基于矢量的图形
使用XML格式定义图形
图像在放大或者改变尺寸不会损失图形质量
万维网标准

2. SVG的优势？

很多工具都可以读取修改（例如记事本）
尺寸更小，压缩性更强（相比JP?EG，GIF）
任何分辨率下都能高质量打印
图像放大图像质量也不会下降
适合制作地图–SVG中的文本是可选的、可搜索的

SVG的只要竞争者是Flash。

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

代码解释

第一行包含了XML声明SVG。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或又对外部文件的引用，standalone="no"表示引用了外部文件，在这里的是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
代码以 <svg 元素开始，包括开启标签<svg和关闭标签。这是根元素。width和height属性可设置此SVG文档的宽度和高度version属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG的用来创建一个圆，cx 和 cy 定义圆心坐标，不写默认是(0,0)。r是半径。
stroke和stroke-width属性控制如何显示形状的轮廓。我们把圆的轮廓设置为2px，黑边框。fill是填充颜色。

4. HTML中的SVG – 三种将SVG嵌入HTML的方法

使用标签 — 支持所有主流浏览器，并允许使用脚本
- 注释：当在HTML页面中嵌入SVG时使用标签是Adobe（著名的图形图像和排版软件的生产商） SVG Viewer推荐的方法，如果创建合法的XHTML就不能使用。任何HTML规范中都没有。
- 语法：
  <embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install" /> // pluginspage属性指向下载插件的URL。
使用标签 — 支持较新的浏览器，但不支持脚本
- 注释：如果你安装了最新的Adobe SVG Viewer，那么标签无法工作
- 语法：
  <object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" /> // codebase属性指向下载插件的URL。
使用标签 — 支持大部分浏览器
- 语法：
  <iframe src="rect.svg" width="300" height="100"></iframe>

5. SVG 形状

```
矩形 <rect>
```
```
圆形 <circle>
```
```
椭圆 <ellipse>
```
```
线 <line>
```
```
折线 <polyline>
```
```
多边形 <polygon>
```
```
路径 <path>
```

<?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"><rect width="200" height="100" x="20" y="20" rx="30" ry="30" feFlood style="fill:pink;stroke-width:10;
stroke:rgb(73, 168, 64);margin-top:20px; fill-opacity:0.5;stroke-opacity:0.9;" />
</svg>

1. style 属性用来定义 CSS 属性
2. CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
3. CSS 的 stroke-width 属性定义矩形边框的宽度
4. CSS 的 stroke 属性定义矩形边框的颜色
5. x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
6. CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
7. CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
8. CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
9. rx 和 ry 属性可使矩形产生圆角。

椭圆
1. cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
2. rx,ry 属性定义椭圆水平/垂直半径
线
1. x1,y1 属性在 x/y 轴定义线条的开始
2. x2,y2 属性在 x/y 轴定义线条的结束
多边形
points 属性定义多边形每个角的 x 和 y 坐标

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

折现

<svg width="100%" height="100%" version="1.1"><polyline points="10,10 20,20 20,30 30,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
</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 --闭路

<svg width="100%" height="100%" version="1.1"><path d="M250 150 L150 350 L350 350 Z" />
</svg>

上面的例子，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

<svg width="100%" height="100%" version="1.1"><path d="M153 334C153 334 151 334 151 334C151 339 153 344 156 344C164 344 171 339 171 334C171 322 164 314 156 314C142 314 131 322 131 334C131 350 142 364 156 364C175 364 191 350 191 334C191 311 175 294 156 294C131 294 111 311 111 334C111 361 131 384 156 384C186 384 211 361 211 334C211 300 186 274 156 274"style="fill:white;stroke:red;stroke-width:2"/>
</svg>

例子如图所示⬇️。由于绘制路径的复杂性，因此强烈建议您使用 SVG 编辑器来创建复杂的图形。

SVG渐变

可用来定义 SVG 的线性渐变。
标签必须嵌套在的内部。标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：
当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<svg width="100%" height="100%" version="1.1"><defs><linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/></linearGradient></defs><ellipse cx="200" cy="190" rx="85" ry="55"  style="fill:url(#orange_red)"/>
</svg>

代码解释
标签的 id 属性可为渐变定义一个唯一的名称
fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset 属性用来定义渐变的开始和结束位置。

— 垂直渐变 —

<svg width="100%" height="100%" version="1.1"><defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
</linearGradient></defs><ellipse cx="200" cy="190" rx="85" ry="55"  style="fill:url(#orange_red)"/>
</svg>

放射性渐变 – 用来定义放射性渐变。

**<radialGradient>标签必须嵌套在<defs>中。<defs>标签是definitions的缩写，它允许对诸如渐变等特殊元素进行定义。**

<svg width="100%" height="100%" version="1.1"><defs><radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/><stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/></radialGradient></defs><ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>

代码解释
标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset 属性用来定义渐变的开始和结束位置。

SVG元素

https://www.w3school.com.cn/svg/svg_reference.asp