设计师应该如何看待SVG

你将用SVG创建出令人惊叹的东西，它与其他图形有什么不同之处，以及它的导出为什么需要新的考虑。

为了准备即将到来的关于在Sketch中制作SVG工作流的课程，我通过和一群初高级的设计师交流，了解到他们对这种格式的使用情况。我注意到一个对SVG图形的常见误解：

“我们通常认为SVG图形类似于具有无限分辨率的PNG

位图图形一样，但它确并不是。”

首先，对于SVG来说，某些事情可能更加困难。更具体地说，从Sketch导出成品图形的生成时间从几秒钟到10分钟不等，这取决于你的设计以及你打算如何使用图形。要想创建一个完全满足于你需求的SVG图形，你可能需要以特定的方式调整Sketch的制作图层或者调整导出的标记。这可能看起来很复杂，也很乏味，但并不难，并且它将带你探索如何使用SVG的世界。

即使存在差异化，SVG还是有很多令人惊叹的特性。我们先来看看这些，因为它们是有趣的，我们将讨论如何开始思考SVG。

*注意：虽然Sketch是我的设计工具，但本文中的概念同样适用于Adobe Illustrator和更多其他的工具。

简短的技术定义：

SVG是可缩放矢量图形的缩写。它是一种图形格式，像JPEG或PDF，其背后的原理是它们并不局限于某个特定的分辨率；因为它不是由像素构成的，而是由矢量图形构成的。虽然它们可以在不同的地方使用，但在网络上，SVG图形是最常用的。下面的例子展示了它的潜力。

为什么SVG图形如此令人惊叹？

在我之前的许多人都对SVG的优点进行了详细的介绍。（如果你是一个Web开发人员，看看Chris Coyier关于“SVG Is for Everybody”的主题演讲，会获得更多技术的概述。）在本文中，我将重点介绍大多数设计师所关心的五个主要优势。

任意大小，没有像素化。

SVG图形就像你Sketch上的画板——虽然它们有特定的维度，但它们也包含无限的细节，因为里面的层/元素是矢量形状。因此，你可以在任意大小的屏幕上显示SVG图形，而且它永远不会出现像素化。

文件体积小

只要你不使用SVG格式的照片（当然这是JPEG的用途），大多数时候，SVG图形的占用空间要比PNG或JPEG图形少得多。

这是因为，对于位图图像（如PNG或JPEG），决定文件大小的主要因素是分辨率。一般来说，相同图像的3000X3000像素的文件总是大于300X300像素的。

但对于SVG图形，最主要的因素是细节：图像中有多少层，需要描绘多少定制的渐变、掩码或效果，图形的尺寸对文件大小几乎没有影响。对于大多数图标和其他设计元素，SVG图形在源文件大小（以及加载时间）方面显然是赢家。

作为GIF动画，这个文件超过400KB；但作为SVG图形，它仅仅3KB！

动画和动态图形

这是我最喜欢SVG的一点：如果你了解一点Web开发，就可以将SVG图形动画化，就像它们是网站的其他部分一样。所有这些神奇的代码都可以包含在SVG文件中，这样你就可以有一个仅6kb大小却像视频一样生动的动态图标。

你甚至可以让你的图形动起来，就像一个时钟可以告诉你时间，或者一个能够与旁边的文字颜色相匹配的图标。SVG图形还可以实现响应，根据屏幕的大小或像素密度，或很多其他的因素，以不同的方式进行更改。拥有无限的可能性，它们真的重新定义了我们对一个单一图形的看法。

精灵系列图&图标集

我喜欢图标，在过去的一两年中，已经出现了一些将多个图标组合到同一个SVG图形中的技术，这意味着你可以在一个图形中放置一套完整的图标集。一个小文件！这类图形被称为“精灵系列图”，它们在网络上是非常有用的。

其他更多的用途

SVG图形可用于各种其他情况。也许你想要为你的网站创建一个固定的标签图标，或者加快你的Android应用生成图标资产的进程。这两种情况都支持并且需要SVG，但是它们的严格规范要求设计师需要按照特定的工作流来创建它们（以下是更多的工作流内容）。

等等，这一切都有可能吗？

SVG，究竟是什么？

为了了解SVG是如何强大的，我们需要分析它与位图图像本质上的不同之处。

SVG图形和位图图形不一样吗？

位图，也称为光栅图，是基于像素的。这包括JPEG、PNG和GIF等格式。在外壳之下，它们本质上就是一组彩色的盒子。

例如，这个3X3像素的位图图像有9个像素：9个彩色方块。这些方块不能以任何方式改变，它们不能展示更多的细节，不能四处移动，也不能变成其他颜色——它们是永久的，并且总是占据一定数量的信息。当把图片放大超过100%时，你就会看到像素点。

像SVG这样的矢量图形不是由彩色像素构成的，它们是关于你对图形的描述。它们看起来像下边这样的：

因为SVG只是图形的描述，它可以以任意大小显示，无论是3px还是3000px，圆形始终显示的是一个“圆形”。而且它的描述还可以改变，任何花15分钟学习过web开发的人都可以编辑SVG的描述，比如调整一个形状的颜色或者线条的粗细以及其他更多的方面。

SVG图形是有生命力的，位图就是事物的照片。

你可能还会发现，当你从Sketch中导出时，会有什么帮助。位图图像将你的设计压平成一层，生成的PNG或JPEG看不出你图层的名称，也不知道它们所描述的内容。

然而，SVG并不是扁平的；它仍然包含你所有的图层以及关于它们大量的信息。当你导出时，Sketch尝试将自己的图层描述转化为SVG语言。这就是为什么有时候导出的SVG版本看起来不一样，那是因为你在Sketch中所做的某些部分并不能用SVG语言轻松地描述出。

由于SVG包含了关于你的图层的所有信息，所以你可以操作或者调整这些图层的所有功能：动画、交互/动态对象、图标集等等。

但是我们如何通过Sketch开始设计呢？

如何从Sketch中导出SVG?

SVG是导出时可以选择的一种格式，但是我们中的大多数人，包括我自己在内——都犯了一个错误，认为导出SVG将像其他类型的图形一样毫不费力。我们只输出1x PNG，2x PNG，嘿，为什么不导出SVG矢量图呢？瞧！我们完成了！对吧?

不幸的是，生成的SVG并不总是按照我们想要的方式进行，或者文件大小是不可预测的，或者这个文件与我们的开发人员或应用程序需要的某些规范不兼容。

这不是Sketch的错。Sketch一直在不断改进他们的SVG导出，现在已经相当不错了。

真正的问题是：SVG的使用方法各式各样，

Sketch如何知道要导出什么?

它不是，它不能。任何图形软件所能做的就是尝试将你的图层尽可能地转换为SVG层。你是如何在Sketch中做出这些东西的，并且Sketch是如何将它导出的。

SVG有一些可以被编码的方法（换句话说，可以描述的层），使其对开发人员来说特别易读，或者对小文件进行优化，或者简单的动画，或者适应一个图标集。这些差异超出了它的导出方式，它们常常取决于你的图层在Sketch中的基本构造。

同样的感叹号图标可以由2个不同的形状（左），一个单一的路径（中），或与一个圆角矩形接壤的垂直线（右）组成。还有其他的可能性！

我所说的“构建”是指如何创建、组合设计层以达到一定的结果。上面的感叹号例子可以用几种方式来做。并不总是有一个正确的方法，这一切都取决于你打算如何使用图形。它有时取决于SVG支持什么特性。这是我课程的另一个例子：

在本例中，用3个填充来创建大头针可能会更容易一些。虽然在SVG中，完全支持径向渐变，但是混合模式和多个填充模式需要解决方案，并且可能产生不一致的结果。

通常，以最有效或最方便的方法来模拟Sketch中的想法，而并不是为SVG构建层的最有效或最稳定的方法。

所以，当我想要把一些东西从Sketch中导出SVG时，首先要做的就是复制画板。复制画板是我对业余成员进行修改的地方，包括移除蒙版、消除变形、轮廓文本、调整边框、重命名等等一切，这些都可以确保得到的SVG看起来是正确的，并且满足了我的项目需求。

这就是为什么在文章开始的时候，我说这个“导出”过程可以从几秒钟到10分钟不等。这取决于你的具体的设计层，以及你打算如何使用生成的SVG。

你可能会想：

我需要对我的Sketch层做些什么修改才能生成最终的SVG呢？

如果有一个简单的答案，我会告诉你的。事实上，在适应SVG的Sketch设计时，我有十几种最佳实践。（我在上面提到过一些）但它们在所有情况下并不都有用。我已经发布了这些最佳实践的免费Web应用程序清单，为了解释它们背后的原因，我不得不做一个完整的课程！这比我在几篇文章中所能找到的简单得多。

这门课程历经8个月的开发之后已经可以使用，目的是让你更轻松的接受SVG，以及你将成为使用所有Sketch工作流很厉害的用户。

你能做些什么呢？

我将给你留下一些实用的建议摘要。

●记住，SVG图形就像生活事物，注定要在不同的地方使用。因此，它们通常可以以多种方式构造。

●如果你没有得到你想要的结果，试着用不同的方式去做。例如，如果边界看起来不正确，那么在导出之前尝试列出它们。

●不要在SVG中包含位图图像，它们打败了所有的优点。

●与开发人员一起从设计和工程的角度来理解格式，这样你就知道如何为你的需求工作。

● 开始改进你的SVG文件，请安装Sketch的SVGO插件（O代表优化）。在导出任何SVG之后，插件在后台运行，试图以各种不同的方式压缩文件。你可以做更多的事情来减少SVG的大小，但是如果你不想花任何时间，这个插件总比没有好。

无论该课程是否适合你，我希望本文已经阐明了SVG是什么，它有什么功能，它是如何工作的，以及如何考虑它与其他图形格式。