β

【译】用css定义svg的样式和动画

携程UED 233 阅读

原文: http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
翻译: 叮当当咚当当小胖妞呀 杀手爱elva Ivan_z3 肖弦

CSS可以用来定义可缩放矢量图形的样式和动画,就像CSS定义HTML元素一样。在本文中,我会告诉大家一些用CSS定义SVG的前提条件和技术。(我最近在 CSSconf EU From the Front 办了一个 讲座 ,这篇文章是讲座的修正版)

同时我也会讲一下导出和优化SVG、嵌入SVG和每一个SVG如何影响它的样式和动画,然后我们再讨论用CSS定义SVG的样式和动画。

介绍

可缩放矢量图形(SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式,它们支持交互行为和动画。换句话说,SVG是可以生成形状和图形的XML标签,这些形状和图形可以像HTML元素一样实现交互和动画。

我们可以通过CSS或者Javascript给SVG定义动画和交互行为。在本文中,我们着重讨论CSS。

SVG为什么好?为什么你应该使用它?其实答案有很多:

从图形编辑器导出SVG并优化

以下是三个最流行的矢量图形编辑器:

  1. Adobe Illustrator ,
  2. Inkscape ,
  3. Sketch

Adobe Illustrator是Adobe公司收费的应用程序,它是最受欢迎的编辑器,漂亮的UI和大量的功能使得它成为大多数设计师最喜欢的编辑器。

Inkscape是另一个免费的编辑器,虽然它的UI没有Illustrator漂亮,但是它仍然具有你所需要的所有功能。

Sketch是只能在Mac OS X上使用的app,虽然它也要收费,但是它在设计师中 到处宣传 收到了欢迎 ,最近Sketch又推出了许多 资源和工具 来改善工作流程。

你可以选择任意编辑器来创建你的SVG。在选择编辑器、创建SVG之后,在把它嵌入网页之前,你需要把它从编辑器中导出并进行清理。

我会导出并优化在Illustrator中创建的SVG,除了Illustrator特定的一些选项,其余步骤跟任何编辑器都基本一致。

如果要从Illustrator中导出SVG,你需要选择“File” -> “Save as”,然后从文件扩展名下拉菜单中选择“.svg”。一旦你选择了.svg扩展名,会出现一系列导出SVG的选项面板,比如使用哪个版本的SVG、是否在图形中插入图片或者在外部保存并把它们链入SVG、如何为SVG添加样式(使用展示属性或者使用CSS的 style 标签)。

下图展示了导出SVG的最佳设置:

导出SVG的最佳设置

上图中选项是最佳设置的原因可以参考Michaël Chaize的文章: 使用Illustrator CC导出SVG

无论你使用哪种图形编辑器,输出的都不会是优化的代码。SVG文件,尤其是从编辑器导出的文件,通常包含了很多多余信息,比如编辑器的meta信息、注释、空白的组、默认值、非优值等,这些信息可以被安全的移除或者转换,而不会影响SVG的生成。如果你在使用不是你自己创建的SVG文件,那么代码基本上都是非优的,所以我们推荐使用独立的优化工具优化它。

这里有些优化SVG代码的工具。Peter Collingridge的 SVG编辑器 是一款在线的工具,你可以直接输入SVG代码,或者上传SVG文件,然后它会提供一些优化的选项,如移除多余代码、注释、空白组、空格等等。其中有一个选项可以让你指定点坐标小数的位数。

SVG编辑器

Peter的优化工具也可以自动把inline SVG属性移动到文档头部的 style 标签中去,这个工具最好的地方在于,当你点击某个选项之后,你能实时看到优化的结果,这样你就可以自主决定使用哪种方法优化。某些特定优化可能会 损坏 你的SVG。比如,通常一位小数 应该 </