svg学习系列01-svg简介

SVG的特点

　　1、SVG 是可伸缩的矢量图形，在浏览器中改变尺寸，其图形质量不会有所损失。

　　2、相比其它位图，SVG图像文件更小，可压缩性更强。

　　3、SVG 可以被记事本等阅读器、搜索引擎访问。

　　4、SVG 图像中的文本是可选的，同时也是可复制的。

　　5、SVG 图像可以与DOM，CSS和JavaScript交互。

　　6、SVG 可以制作成整体或局部动画。

独立SVG文件

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

注意：

　　1、来自 (X)HTML的doctype 声明应该被舍弃，因为基于SVG 的 DTD 验证比起它解决的会引发更多问题。

　　2、version 和 baseProfile 属性是必须的，供其它类型的验证方式确定 SVG 版本

　　3、作为 XML 的一种方言, SVG 必须正确的绑定命名空间 (在 xmlns 属性中).

SVG在HTML中使用

　　1、将SVG作为图像导入

<img src="test.svg" alt="svg">

2、CSS中background-image引入

background-image: url(test.svg);

3、使用Object 或 iframe导入SVG图像

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

4、将SVG作为Data URI导入

<img src="data:image/svg+xml;base64,[data]>
background: url(data:image/svg+xml;base64,[data]);
<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]></object>

5、使用内联SVG

<!-- 带版本、命名空间、baseProfile -->
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="green" />
</svg>
<!-- 简写 -->
<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

注意：

　　当把SVG作为一个图片放进HTML或者CSS时，你没有办法通过CSS对这个SVG进行更多的控制。