编写 SVG 的指南

简介

Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径，图片和（或）文本组成，并能够在不失真的情况下任意变换尺寸。

本书主要介绍了内联SVG，它是指在HTML中编写的嵌入式代码，以便在浏览器中生成这些图形。

以这种方式使用SVG有许多优点，包括为了交互目的访问所有图形的各个部分，支持访问 SVG 文档构成的 DOM 节点树，查询、修改 DOM 节点的属性，提升用户可访问性。

先介绍基本组织和简单形状，再继续描述SVG坐标系或画布，然后用它绘制图形的内部和/或边框，变换，以及使用和操作图形文本。通过渐变和模式等更高级的功能来总结。

这个指南快速且详细的介绍内联式SVG以及所有涵盖的可使用的功能，有助于你学习SVG。 它面向设计师和开发人员，希望以最可行的方式将SVG添加到他们的工作流程中。

从小笔画细节到开始使用手工制作的模式，本指南旨在成为一个围绕“go-to”编写SVG的参考。

前言

本“口袋指南”只针对已经有一些HTML和CSS基础的人，在你喜爱的浏览器中绘制SVG之前最好知道一些额外的知识, 例如：在SVG中正确渲染的信息，如何让你的图形更容易访问，以及何时何处使用矢量图形软件。

使用SVG

有许多方法可以把SVG插入到你的项目：内联、img、background-image、<object>或者Data URI。我们主要介绍内联SVG的使用方法，包括如何在结构清晰的HTML文档中编写SVG代码。

尽管我们只是介绍了内联SVG的使用方法，但在某些特定情况下，其他方法也许会更好。例如，如果你不需要图形本身的编辑功能或访问其各个部分，则用<img>标签可能更适合。

矢量图形软件

当你想要创建几乎不可能手写的更复杂的图形时，矢量图形软件更实用。你可以将Adobe Illustrator, Inkscape, Sketch, iDraw和 WebCode这些工具放到你的SVG技能包中。

可以用这些工具直接导出SVG代码并嵌入你的HTML。我们过一会再讨论这个。

Web中的内联SVG

为了简洁起见，SVG DOCTYPE，版本号，xmlns和xml：space在这本书中不会被提到。

这些属性专注于SVG的版本和文档的命名空间。只要记住这一点，你不需要这些属性就能成功地在浏览器中呈现图形。

如下面这个例子，在Illustrator生成的SVG代码时不要吃惊：

在大多数情况下，<svg>元素中的DOCTYPE和属性不是必需的，可以删除，以缩减你的代码。

SVG用户可访问性

使用SVG可访问性是一个好习惯，但是为了简洁，描述和标题不会包含在整本书的代码中。

一旦你更熟练的写SVG，这些元素将使你的图形更能被用户接受。例如，<desc>元素中的内容允许你向屏幕阅读器的用户提供图形的详细描述。

由于SVG文本可以被检测和读取，并且可以容易地调整大小以适应特定的阅读偏好，提供了在可访问性方面优于传统的基于光栅的图像的巨大优势。

注意事项

使用之前一些更通用的注释：整本书的演示字体都可通过Google Fonts获得。虽然你可以通过font-family看到这些字体显示出来，但你不会看到获取谷歌字体时使用的相关link或@import。

示例始终使用像素和百分比作为单位标识符。 SVG支持的长度单位为：em，ex，px，pt，pc，cm，mm，in和百分比。

本书中的SVG代码可以添加到任何文本编辑器，并且在任何支持内联SVG的浏览器中查看。通常情况下浏览器支持对于SVG非常强大，但是有更多高级的特性（例如渐变）时这种支持会变得弱一些。Can I Use是一个检查功能支持的实用网站，但实践才是检验真理的唯一方法。

你也可以复制代码，通过CodePen把它放在一个HTML部分，就能立即在屏幕上看到你的图形。我说的可能不够好，但它是我对SVG感兴趣的第一因素。练习，修改甚至失败是我最喜欢的学习方式。

最终，由于篇幅限制，一部分例子会有图形代码注释，其他不想关的将被省略。

第1节： 文档组织

SVG详细信息位于<svg>元素中。此元素中有几个属性，可以自定义你的图形画布。虽然这些属性对于呈现图像不是完全必要的，但是在跨浏览器执行时忽略它们可能使更复杂的图形易受攻击，并且使得它们容易不按预期进行呈现。

如上所述，内联图形可以“手动”编写，或者通过矢量图形软件生成的XML代码来嵌入。因为这些图形元素的顺序决定了它们的堆叠顺序，所以无论哪种方式，正确的组织和结构对于编写高效的SVG代码至关重要的。

组织和语义

SVG文档片段由<svg>元素中包含的任意数量的SVG元素组成。本文档中的组织是至关重要的。文档中的内容可以快速扩展，正确的组织提高了可访问性和效率，使作者和用户都受益。

本节将介绍编写SVG的关键 —— <svg>元素 —— 并查看帮助初始文档设置的一些常见属性。

svg元素

<svg>元素归属于容器和结构元素，在文档内允许嵌套使用独立的SVG片段。每个独立的片段都有自己的坐标系。

此元素中使用的属性（如width，height，preserveAspectRatio和viewBox）定义正在写入图形的画布。

当从某些矢量软件获得SVG代码时，在<svg>元素中有很多附加信息，例如SVG版本号（指示正在使用的SVG语言版本）和DOCTYPE。正如我已经提到的，这些信息不会包括在本指南的示例中，缺少它们不会阻止你的图形在屏幕上呈现。

g元素

g元素是组合相关图形的容器元素。将此元素与描述和标题元素结合使用提供图形的相关信息，并将相关图形组件分在同一组在一起提高访问性。

此外，通过相关元素分在同一组，可以将它们看作一个整体与各个独立的部分。移动这些元素尤其方便，例如，可以移动整个组。

不包含在g中的任何元素则认为有它们自己的组。

use元素

<use>元素允许您在整个文档中重复使用元素。此元素中可以包含其他属性，例如x，y，width和height，这些属性定义图形在坐标系中的详细映射位置。

在这里使用xlink:href属性可以调用要重用的元素。例如，如果存在需要重新使用的苹果的图像的apple的id的<g>，则该图像可以由<use>：<use x =“50”y =“50” xlink:href =“＃apple”/>。

这个元素作为一个重要的时间保护程序帮助压缩代码。

defs元素

虽然<use>允许重用已经渲染的图形，但<defs>元素中的图形不会渲染到画布上，而是能够被引用，然后通过使用xlink:href来渲染。

图形在<defs>中定义，然后可以通过引用该图形的id在整个文档中使用。

例如，下面的代码绘制一个非常简单的矩形渐变：

<defs>除非引用其唯一的id来调用，不然内容没有直观的输出，在这个实例中通过矩形的fill属性完成内容渲染。

symbol元素

<symbol>元素类似于<g>，因为它提供了一种组元素的方法，但是，如果没有使用<use>元素，<symbol>中的元素没有可视化输出（如<defs>）。

它也不同于<g>元素，<symbol>建立自己的坐标系，与渲染的视口分开

SVG的viewport和viewBox共同建立被映射的图形的坐标系统，将进一步介绍不同的部分。

堆叠顺序

HTML中的其他元素的堆叠顺序可以CSS中的z-index操纵，但SVG不能。 SVG元素的堆叠顺序完全取决于它们在文档片段中的位置。

下面的葡萄和西瓜在同一个<svg>元素中。西瓜出现在葡萄前面，因为文档中包含组成西瓜的路径的组被列在葡萄之后。

如果包含葡萄的组被移动到文档的末尾，它将出现在西瓜的前面。

这种定型的堆叠顺序的方法也适用于组内的每一个元素。例如，将葡萄的茎的路径移动到组的末尾将导致茎在顶部。

第2节：基本图形和路径

当你需要在HTML中使用更复杂的内联SVG图形时就没有办法再手工编写了。那些更复杂的图形可以使用矢量软件创建，但现在我们来学习下手动编码的基础。

基本图形

SVG包含以下基本形状元素集：矩形，圆形，椭圆形，直线，折线和多边形。每个元素在渲染之前需要一些属性，如坐标和大小等详细信息。

矩形

<rect>元素定义一个矩形。

width和height属性确定矩形的大小，而fill则设置形状的内部颜色。数值默认为px，当未指定时，fill将默认为black。

其他属性还有x和y坐标。这些值将图形沿<svg>元素对应的轴移动相应的距离。

也可以通过指定rx和ry属性中的值来创建圆角。例如，rx =“5” ry =“10”将产生具有5px半径的角的水平边，以及具有10px半径的角的垂直边。

圆形

基于中心点和外半径设置<circle>元素。

cx和cy坐标建立圆的中心相对于由<svg>设置的工作空间尺寸的位置。

r属性设置外半径的大小。

椭圆

<ellipse>元素基于中心点和两个半径定义椭圆。

当cx和cy值基于到SVG坐标空间中的像素距离建立中心点时，rx和ry值定义形状的边的半径。

直线

line元素定义具有开始点和结束点的直线。

x1和y1值确定线的开始坐标，而x2和y2值确定线的结束坐标。

折线

<polyline>元素定义了一组相连的直线段，通常构成开放形状（不连接的开始点和结束点）。

在整个形状中points的值在x和y轴上建立形状的位置，并且在整个值列表中被分组为x，y。

不能使用奇数点。

多边形

<polygon>元素定义由连接的线组成的闭合形状。

多边形形状的点通过八组的x，y值来定义。

该元素还可以根据点的数量产生其他闭合形状。

path元素

SVG路径表示形状的轮廓。此形状可以填充，描边，并用于导航文本和/或用作剪切路径。

当涉及许多曲线时，这个路径会变得非常复杂。然而，理解工作原理和涉及的语法将有助于管理这些特定路径。

path数据

路径数据包含在<path>元素内的d属性中，定义了形状的轮廓：<path d =“<path data specifics>”/>。

d属性中的这些数据说明了路径的moveto，line，curve，arc和closepath指令。

下面的<path>详细信息定义了青柠图形的路径细节：

moveto

moveto命令（M或m）建立一个新的点，就像提起一支钢笔，并在纸上一个新位置绘制。包括路径数据的代码行必须以moveto命令开始，如上面的例子所示。

moveto命令跟在初始化路径之后，代表新子路径的开始和复合路径的创建。这里的大写字母M表示绝对坐标，小写字母m表示相对坐标。

closepath

closepath（Z或z）表示当前子路径的结束，并从该点到路径的初始点绘制直线。

如果closepath之后紧跟着一个moveto，这些moveto坐标表示下一个子路径的开始。如果这个相同的closepath之后是moveto之外的任何东西，则下一个子路径从当前子路径的点开始。

这里大写或小写z没有区别。

lineto

lineto命令从当前点到新点绘制直线。

L, l

L和l命令从当前点绘制一条线到下一个提供的点坐标。这个新点然后变成当前点，以此类推。

大写L表示绝对定位，而小写l是相对定位。

H, h

H和h命令从当前点绘制水平线。

大写H表示绝对定位，而小写h是相对定位。

V, v

V和v命令从当前点绘制垂直线。

大写V表示绝对定位，而小写v是相对定位。

曲线命令

有三组命令绘制曲线路径：CubicBézier（C，c，S，s），二次贝塞尔（Q，q，T，t）和椭圆弧（A，a）。

以下曲线部分将介绍每条曲线命令的基本概念，和映射的详细信息，然后提供一个图表供进一步了解。

Cubic Bézier

C和