自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因，并没有对SVG进行系统化的学习，在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识，并尝试在项目中使用SVG，有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识，希望在几个月后，这方面的技术有所突破。

不管是在制图软件中还是Web页面的DOM元素，都有层的概念。在制图软件中，大家比较熟悉，能非常的清晰的看出图层的概念。而在Web页面中，特别是我们熟悉的HTML的DOM中，其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次，而DOM中需要依赖于CSS的z-index属性来控制他的层次关系。其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。

SVG 渲染使用 painter 的模型来描述图像如何渲染到屏幕。像墙上的油漆层，上层的内容遮盖下层的内容。SVG 规范定义了哪些内容会绘制在其他内容之上。每个形状的不同部分 —— stoke，fill，marker —— 每个都创建绘制层。这些形状绘制在其他层之上，层的顺序就是他们在文档中被定义的顺序。两个新的属性被引入 SVG2 规范，他们是 z-index 和 paint-order，允许你改变渲染规则。

在未学习SVG之前，在Web页面或Web应用中使用一些基本形状一般都是通过CSS的border来模拟或者clip-path来绘制图形形状，也有使用Canvas来绘制。当然也有很多时候直接使用img或者background-image直接来引用图形。而在SVG中，提供了更为强大的图形形状的能力，可以直接通过SVG来绘制矩形、圆角矩形、圆形、多边形和曲线等。如果对Illustrator或者Sketch可以很轻松的绘制出基本形状，然后导出SVG文件。今天我们主要来了解在SVG中怎么通过代码来绘制基本形状。

通过上一节的学习，我们知道了怎么在SVG中绘制一些基本的图形。在SVG中除了可以通过<rect>、<circle>、<ellipse>、<polygon>、<line>、<polygon>来绘制矩形、圆形、椭圆、多边形、直线和折线等形状。除此之外，在SVG中还有一个<path>元素，可以帮助我们在SVG中绘制任何你想要的形状。也有人说，掌握了SVG中的<path>是学习SVG的重中之重。今天我们来了解SVG中有关于<path>的相关知识。

又又一次说起贝塞尔曲线（英语：Bézier curve，维基百科详尽中文释义戳这里），我最近在尝试实现复杂的矢量图形动画，发现对贝塞尔曲线的理解馒头那么厚，是完全不能承受富有创意的创作的，至少得有我当年追我老婆的脸皮厚才行。

前段时间研究 SVG 压缩优化，发现SVG预定义的 rect、circle、ellipse、line、polyline、polygon 六种基本形状可通过path路径转换实现，这样可以在一定程度上减少代码量。不仅如此，我们常用的 SVG Path 动画(路径动画)，是以操作path中两个属性值stroke-dasharray和stroke-dashoffset来实现，基本形状转换为path路径，有利于实现路径动画。

Metaballs是有机的黏糊糊的黏糊糊的东西。从数学的角度来看，它们是一个等值面。可以用一个数学公式来表示：f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2)。@Jamie Wong写了一篇非常优秀的教程，介绍了怎么使用Canvas来渲染Metaballs。

SVG 全称是 Scalable Vector Graphics，即，矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先，不要把 SVG 和 CSS，Canvas，HTML 搞混。他们之间并没有你中有我，我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。

通过前面的学习，你可以用你掌握的知识来绘制任何图形，接下来的目标是给绘制的图形着色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的Web网站的SVG使用的是内联样式CSS。但这些方法都有各自的优缺点。在SVG中要给已绘制好的图形着色，我们主要通过SVG的填充和描边特性来完成。比如在前面的示例中，我们常能看到的fill属性，就是用来给图形设置填充颜色；stroke属性设置绘制对象的线条的颜色。但SVG的填充和描边特性不仅仅就这两个属性，那么今天的目标就是来学习这方面的特性。