- 用来定义用于网络的基于矢量的图形，使用 XML 格式定义图形
- 2003 年一月，SVG 1.1 被确立为 W3C 标准
- SVG 文件必须使用 .svg 后缀来保存
参考：
https://www.jianshu.com/p/2ea0ec6800d7
http://www.ruanyifeng.com/blog/2018/08/svg.html
1. 特点：
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失;
SVG 可被非常多的工具读取和修改（比如记事本）
尺寸更小，可伸缩，且可压缩性更强
可在图像质量不下降的情况下被放大
SVG 图像可在任何的分辨率下被高质量地打印
图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
2. 实例
- html 中使用：
-
<html> <body> <h1>My first SVG</h1> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> </body> </html>
<svg> 标签代表画布
的 width 和 height 属性
- 指定了 SVG 图像在 HTML 元素中所占据的宽度和高度
- 如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）
的 viewBox 属性
如果只想展示 SVG 图像的一部分，就要指定 viewBox 属性
举个例子：
-
<svg width="100" height="100" viewBox="50 50 50 50"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg>
- SVG 图像是 100px宽 100px高，
viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆- 注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，
- 由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍
如果不指定 width 属性和 height 属性，只指定 viewBox 属性，
则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小
<circle> 标签代表圆形
-
<svg width="300" height="180"> <circle cx="30" cy="50" r="25" /> <circle cx="90" cy="50" r="25" class="red" /> <circle cx="150" cy="50" r="25" class="fancy" /> </svg>
的 cx、cy、r 属性分别为横坐标、纵坐标和半径，单位为像素。
坐标都是相对于 <svg> 画布的左上角原点
class 属性用来指定对应的 CSS 类
-
.red { fill: red; } .fancy { fill: none; stroke: black; stroke-width: 3pt; }
a
-
<?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="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/> </svg>
第一行：
XML 声明
- standalone 属性：规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件
第二行：第二引用了这个外部的 SVG DTD
该 DTD 于 http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd 该 DTD 位于 W3C，含有所有允许的 SVG 元素
第三行：SVG 代码以 < svg > 元素开始，包括开启标签 < svg > 和关闭标签 < /svg >
- width 和 height 属性可设置此 SVG 文档的宽度和高度
- version 属性可定义所使用的 SVG 版本
- xmlns 属性可定义 SVG 命名空间
- < circle > 用来创建一个圆
- cx 和 cy 属性定义圆中心的 x 和 y 坐标。
- 如果忽略这两个属性，那么圆点会被设置为 (0, 0)
- r 属性定义圆的半径
- stroke 显示形状的线条颜色
- stroke-width 显示形状的线条宽度
- fill 属性设置形状内的颜色
3. 把 SVG 文件嵌入 HTML 页面
-
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>
1
1