写 SVG 动画必看！SVG系列文章1-简介

1、SVG是什么

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

SVG 诞生于 1999 年，之前有几个相互竞争的格式规范被提交到W3C，但是都没有获得批准。主流浏览器均支持 SVG。加载慢是 SVG 的一个缺点。但是 SVG 也有自身的优点，比如它实现了 DOM 接口（比 Canvas 方便），不需要安装第三方扩展 (extensions，原文有误，应该是插件 plugins，类似 flash)。当然，是否使用 SVG 还要取决于你要实现什么

2、SVG 的历史和优势

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 JavaScript 技术一起运行
• SVG 是开放的标准
• SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

3、基础使用

<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. 创建 svg 标签：SVG 2 之前 version 属性和 baseProfile 属性用来供其他类型的验证识别 SVG 的版本。SVG 2 已弃用 version 和 baseProfile 这两个属性。

   xmlns 是一个命名空间，定义该 svg 标签是属于哪个版本语言规定的标签，详情查看 Namespaces Crash Course

2. 绘制一个完全覆盖图像区域的矩形 rect，把背景颜色设为红色。

3. 一个半径 80px 的绿色圆圈 circle 绘制在红色矩形的正中央（向右偏移 150px，向下偏移 100px）。

4. 绘制文字“SVG”。文字被填充为白色，通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。

viewBox属性：viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素，会保持特定的宽高比，设置后会自动继承父元素宽高。包含 4 个参数的列表 min-x、min-y、 width 、 height。不允许宽度和高度为负值，0 则禁用元素的呈现。

有 <marker>, <pattern>, <svg>, <symbol>, 和 <view> 等五个 svg 元素可以有这个属性

当设置了特定的 width 和 height 时，就不会自动继承父元素宽高，而是按设置的来，但是宽高比仍然存在

viewBox 的 width、height 并不是SVG的实际宽高，而是SVG内的“分辨率”。width、height越大，SVG内的元素越小，反之，元素则越大（不影响SVG的背景图）。

<svg viewBox="0 0 300 533" xmlns="http://www.w3.org/2000/svg" style="margin: 0 auto;">
</svg>

4、渲染展示

1. 元素的渲染顺序：SVG 文件全局有效的规则是“后来居上”，越后面的元素越可见。

2. 展示方法：

   1. 直接嵌入到 HTML 文件中

   2. 如果 HTML 是 XHTML 并且声明类型为 application/xhtml+xml，可以直接把 SVG 嵌入到 XML 源码中。

   3. 可以使用 img 元素

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

   <object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
   object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。

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

共四章，有需要可催更，网上制作 svg 动画的资源比较少，本章参考：官方文档入门