svg学习记录(一)

什么是SVG

SVG诞生于1999年，是一种XML语言，类似XHTML，即SVG，可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变、合成、或者通过滤镜完全改变外观。

为什么学SVG？它有什么优势？

比起其他的图像格式（例如jpg，gif），SVG的优点是:

1.可以使用任何文本编辑器来创建绘画SVG。
2.可以搜索、索引、脚本化、压缩SVG图像。
3.SVG图像可以扩展，可以在任何分辨率上高质量显示。
4.SVG图像支持缩放，且不会失去任何质量。
5.SVG是开放标准，是纯XML文件。

绘画一个简单的SVG

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="blue" />
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

基本流程如下所述：

1. 绘制一个svg根标签
2. 绘制一个rect标签，它是一个绘制矩形的标签，宽高设置100%也就是把父级元素占满，fill属性为设置背景颜色
3. 绘制一个circle标签，它是一个绘制圆形的标签，cx和cy是偏移的属性（默认是0，即圆心在坐标0，0中绘画），r是半径大小

渲染规则: svg里的元素渲染顺序、规则是后来居上，越后面渲染的元素越前。

嵌套到HTML文件中的几种方式:

1. XHTML需要将类型声明为application/xhtml+xml，才能将SVG嵌入到XML中。
2. HTML5可以直接嵌入SVG。但需要做一些语法调整。

HTML5引入的例子：

1. 可以通过 object 元素引用SVG文件：

<object data="image.svg" type="image/svg+xml" />

2. 类似的也可以使用 iframe 元素引用SVG文件：

<iframe src="image.svg"></iframe>

3. 使用img标签引用SVG文件：

<img src="image.svg" style="display:block;width:200px;height:200px" />

4. 使用embed标签：

<embed src="image.svg" style="display:block;width:200px;height:200px" />

5. 使用div标签：

<div style="display:block;width:200px;height:200px;background: url(./image.svg) no-repeat;background-size: 100%;" ></div>

6. 使用picture标签：

<picture>
    <source srcset="image.svg"  type="image/svg+xml">
    <img src="image.svg" style="display:block;width:200px;height:200px">
</picture>

svg文件类型

svg文件分为两种形式:

• 普通SVG文件：包含SVG标准的文本文件，后缀名通常为.svg。
• 压缩版SVG文件：某种场景下的SVG文件可能很大，SVG标准是允许gzip压缩的，后缀名通常为.svgz（注意的是在FireFox不能再本地上加载svgz文件，除非知道处理发布内容的web服务器可以正确的处理gzip，否则要避免使用gzip压缩的SVG）。