大概一年之前，Google在Polymer上宣布了Material Design的存在，并且表示将使用polyfill作为即将到来的统一Web动画API标准。我没有听说过这个API，但是我非常好奇，特别是它提到的MotionPath（运动路径）效果。目前尚未实现（你可以在这系列教程的Part 5中找到相关内容），但是它的目标是提供一种统一CSS、JS和SVG的方法来实现动画，这让我非常感兴趣。一年之后Chrome和Firefox已经开始实现这块内容，polyfill的进展非常平稳，所以是时候来认真研究一下它了。

如果我告诉你存在一种图像格式和GIF一样，但它是矢量格式的？如果我告诉你这个动画的方向还可以反转？如果我告诉你可以直接拿一张普通的图像，然后让它里边的每一个不同的部分都单独地动起来，而且不同部分的速度也不一样？其实，这种图像格式就是SVG，而且已经存在，并不是我想象出来的，只是还需要一点点温柔的鼓励。

运气爆棚的我总是时不时地能创建出大家都喜欢的案例。SVG Lava Lamp就是其中之一——因为很多人问我关于这个灯的文字，所以我决定写这篇文章来给大家解释解释。一眼看去，这篇教程好像会有很多很多的代码——其实不是这样的。我只是在不停地粘贴相同的代码，所以代码量会慢慢增加，看起来也就好像代码量很大了。还有标题看起来也挺好笑的——虽然我喜欢开玩笑，但也不会影响到后边各小节的内容，它们其实还是挺简单的。如果觉得它们倒了你的胃口，或者你的母语不是英语的话（无法理解我），我还是赶紧先在这里道个歉吧哈哈。

SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG<use> 元素在文档中任意位置“实例化”图标。使用<use>元素实例化图标或任何其它的SVG元素或图像，给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决：使用<use>引入的内容添加样式受限的问题。但是在开始之前，我们先快速浏览一下SVG的主要结构和分组元素，然后慢慢进入use的世界中，以及shadow DOM，然后重回CSS的怀抱。我们会逐步讲解为什么给<use>内容添加样式会比较麻烦，以及有什么好的解决方案。

SVG有自己结构化文档的方式。通过某些SVG元素，我们可以在文档中定义、分组以及引用对象。这些元素使得元件重用变得简单，而且还保持了代码的简洁性和可读性。在这篇文章中我们将讲解这些元素，并指出它们之间的区别，以及每个元素各自的优势。

饼图，即使是最简单的只有两种颜色的形式，用Web技术创建也并不简单，尽管都是一些常见的信息内容，从简单的统计到进度条指标还有计时器。通常是使用外部图像编辑器来分别为多个值创建多个图像来实现，或是使用大型的JavaScript框架来设计更复杂的图表。尽管这个东西并不像它曾经看起来那么难以实现，但是也没有什么直接并且简单的方法。但是，现在已经有很多更好、更易于维护的方式来实现它。

本文是为帮助您入门和熟悉CSS动画而编写的，使用它们来为您带来基于Web的接口以及为艺术带来生命。虽然W3C的CSS动画规范仍在修订中，但是如今它已经有大量的内容可以供我们使用了。对我而言，CSS动画最令人激动的事情之一是，我们可以非常轻松地使用我们已经熟悉的工具来把它们添加进我们的项目中。如果您已经精通HTML和CSS，您就不需要学习新的语言或插件来为您的项目添加动态效果了。HTML和CSS已经足够，这是一个非常大的加分！无论你只是添加一点点引人注目的设计细节，还是添加非常多的动画，都没有问题。

经过近20年的发展，如今的网页排版，以其高密度的显示以及OpenType功能的支持，离现实世界的印刷排版仅是一步之遥。但是平面设计还是有一个领域，我们还在不断地fall back到使用位图，而不是使用单纯的文本：字体显示，如说明性的、绚丽的、戏剧性的、俏皮的、试验性的或料想不到的艺术字母。

SVG的viewBox属性是SVG最强大的特性之一。掌握好这个属性可以让你的SVG技能更上一层楼。特别是考虑到几个主要的SVG sprite技术也是依赖这个属性来工作的。因为viewBox属性可以用来裁剪和扩展SVG画布，它可以用于art-directing的SVG——使用它来裁剪SVG中你想要展示的区域。在这篇文章中，我想要就我们如何使用它来提一些建议，帮助你节省一些时间来做它，然后展示viewBox属性在CSS中的重要性，希望本文能够成为一个实际案例，能帮助推动这个旧的SVGWG提案的前进。

CSS的clip-path属性是你改变传统单调的盒子布局，走向响应式设计的通行证。你将开始摆脱条条框框，自由地在您的网页上使用六边形、星形和八边形等等进行设计。一旦你真正开始使用clip-path，你可以生成的形状是无限多的，只需要简单地调整几个值即可。虽然这篇文章的重点是使用CSSclip-path完成多边形裁剪，但是所有的demo都提供了内联SVG的参考，这是为了能额外获得Firefox的支持。只要你使用过CSSclip-path创建响应图形，生成响应式的SVG裁剪图形是很容易的。我们后面再详细说说。