SVG 动画

SVG 动画

主要内容

• SVG 是什么?
• SVG 的一些常用用途
• SVG 的基本结构

• CSS 结合 SVG 生成动画

  • 圆环动画
  • logo 描边动画
• SVG 的动画元素

SVG 是什么？

SVG ，可缩放矢量图形（Scalable Vector Graphics），是一种用来描述二维矢量图形的 XML 标记语言。 简单地说，SVG 面向图形，HTML 面向文本。

SVG 特点

1. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
2. SVG 是矢量的，可伸缩的，适用多种分辨率。
3. SVG 是开放的标准，本质是纯粹的 XML ，可以被非常多的工具读取和修改。
4. SVG 图像中的文本是可选的，同时也是可搜索的。

SVG 兼容性

IE9+，主流环境基本都能支持。具体参见

SVG 的一些常用用途

• 制作iconfont

• 作为图片文件
  img src属性引用，css background-image引用。

  SVG作为图像引用时，大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)，依据浏览器的安全策略，SVG中定义的脚本也可能不会执行。

• 作为应用程序
  SVG文件也可以作为