可缩放矢量图形（SVG）是早在1998年就已经有的一种矢量图像格式。它总是和Web一起发展，但是直到现在才开始赶上Web发展的步伐。如今我们已经不能否认SVG和Web的相关性，所以让我们来学习一下从Illustrator导出SVG文件到Web浏览器的基础知识。

你也许能够熟练的使用PS对文本进行图像掩埋；一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像，你就可以在你的网站上使用；但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗？好消息是，确实可以！CSS介绍了background-clip 和 mask-image的属性，或许你可以使用他们来创造相似的效果，就像你用PS创造出来的那样。最重要的是，你也可以使用SVG来进行文本图像剪辑。

species-in-pieces网站的效果让前端人员眼前一亮，我在微博上发了这样的效果，聚集了不少同学的讨论。在大知乎上也有很多同学关注这个话题。@拴萝卜的棍子在前端乱炖上发表了一篇文章，剖析了相关的技术。值得大家一读，特将此文转载到小站。

每次我讲到图像的时候，我都会提到，在可能的情况下，对于位图来说，可缩放矢量图形（SVG）都是最好的选择。上次我给别人提建议的时候，我意识到我没有自己想象中的那么了解SVG。我之前写过一两篇关于SVG的文章，但也仅是我自己实践经验的一点延伸。我打算今天开始写SVG系列的文章，接下来的几个星期我会介绍一些SVG的基础知识，还会在年尾的时候增加额外的主题来重温这一年讲解的SVG。

有时候，你最意想不到的东西，却能获得最多的关注，正如我发表在CodePen上的多边形狮子的样例。我没有做任何超级棒的代码效果，因为我认为简单的动画效果是很容易理解的，但是最后的结果却是很棒的。在这里，我想要和你们所有人分享这个动画如何以及为什么做出来的。

上周，我开始了关于路径的探讨,主要集中在使用不同的直线指令绘制各种直线和形状。今天我想要继续进行路径的探讨，谈谈可使用的不同的曲线指令。曲线指令比直线指令需要解释的东西更多，所以我们马上开始吧。我会假设你已经阅读了上一篇关于直线指令的文章，如果你还没阅读，最好先去看那篇。

几个星期前在谈到基本的SVG图形时，我提到路径可以作为一个更常用的方法来创建任何形状。路径比基本图形更强大和灵活，可以用来创建任何一个基本图形。使用路径你可以创建直线和曲线，也可以把它们连接起来，组成其它的形状。你可以结合两者来创建复杂的路径和子路径。路径可以被填充、描边或者用于剪裁其他元素。它们可以同时做这三种效果甚至更多。

在SVG绘制的任何一个时刻，你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系。在这篇文章中，我们将看一下我们如何这样做，以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活（或流动）。这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中，包括了任何要理解SVG坐标系统基础的需要知道的内容；更具体的是， SVG viewport, viewBox和 preserveAspectRatio属性。在第二篇文章里，你可以了解到任何你需要了解的关于SVG系统变换的内容。

SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。这是我写的SVG坐标系统和变换部分的第二篇。在第一篇中，包括了任何要理解SVG坐标系统基础的需要知道的内容；更具体的是， SVG viewport, viewBox 和 preserveAspectRatio 属性。

SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而，一旦你理解了SVG坐标系和变换，操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性：viewport， viewBox， 和 preserveAspectRatio。接下来通过三篇文章分别向大家阐述这方面相关的知识。