什么是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>
基本流程如下所述:
- 绘制一个svg根标签
- 绘制一个rect标签,它是一个绘制矩形的标签,宽高设置100%也就是把父级元素占满,fill属性为设置背景颜色
- 绘制一个circle标签,它是一个绘制圆形的标签,cx和cy是偏移的属性(默认是0,即圆心在坐标0,0中绘画),r是半径大小
渲染规则: svg里的元素渲染顺序、规则是后来居上,越后面渲染的元素越前。
嵌套到HTML文件中的几种方式:
- XHTML需要将类型声明为application/xhtml+xml,才能将SVG嵌入到XML中。
- HTML5可以直接嵌入SVG。但需要做一些语法调整。
HTML5引入的例子:
- 可以通过 object 元素引用SVG文件:
<object data="image.svg" type="image/svg+xml" />
- 类似的也可以使用 iframe 元素引用SVG文件:
<iframe src="image.svg"></iframe>
- 使用img标签引用SVG文件:
<img src="image.svg" style="display:block;width:200px;height:200px" />
- 使用embed标签:
<embed src="image.svg" style="display:block;width:200px;height:200px" />
- 使用div标签:
<div style="display:block;width:200px;height:200px;background: url(./image.svg) no-repeat;background-size: 100%;" ></div>
- 使用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)。