可缩放矢量图形是一种基于XML的标记，可以包含二维矢量。矢量可以是简单的形状，路径，也可以是Illustrator中可以执行的任何操作。它是一种图像格式，与使用JPEG的网页有更多共同之处。SVG比我们可以在网络上使用的其他图像格式更强大，因为我们可以使用代码操作它们（在我们的文本编辑器中或使用CSS / JS）。
准备和优化
准备SVG以在Web上使用是一个简单的过程，并不会导致导出JPEG或PNG。按照您喜欢的矢量图形编辑器（Illustrator，Sketch，Inkscape [免费]等[或者如果您使用形状图层时使用Photoshop]）通常的工作方式，使用您希望使用它的图形。我会解释我使用Illustrator做的一些事情，因为这是我通常使用的，但同样的原则适用于任何软件。您可能希望将任何文本转换为轮廓，因为它很可能不会以正确的字体显示，除非您打算使用您在页面上使用的Web字体设置样式（您可以这样做！）。不要担心将所有对象扩展为实体形状，特别是如果您有笔画，因为您可能希望在页面上操作它们，并且扩展它们通常不会使文件大小变小。您在图层/组上放置的任何名称都将添加到SVG中作为该元素的ID。这对于样式来说非常方便，但会在整个文件大小上添加一些内容。
要导出，请检查设计是否位于整个像素区域（即不是23.3像素×86.8像素），否则可能实际上不是很清晰，然后围绕它裁剪画板。您可以在Illustrator中执行此操作Object > Artboards > Fit to Artwork Bounds。接下来点击save as并选择SVG并使用默认设置。你可以在这里进行一些优化，但它并不值得，因为我们将对它们进行后处理以进行优化，并且浪费时间花在这些设置上。
较小文件大小的提示
网上有很多关于SVG优化的好文章，提供了关于这个主题的丰富知识，但我想分享一些我发现对我最有效和最有用的技巧和窍门。它们不需要额外的工作，可以轻松添加到您的工作流程中。
相关阅读;
为了使您的SVG尽可能小，您实际上想要删除任何不必要的东西。SVGO是发布过程SVG的最着名和最好的（至少我认为如此）工具。这删除了所有不需要的代码 - 注意：如果您计划使用CSS / JS进行操作，请记住使用它时要小心，因为它有时会过度优化您的文件，这使得他们更难以按照您的计划进行操作稍后的。SVGO的一个非常方便的事情是它可以添加到您的构建过程中，因此它是自动的（或者如果您愿意，您可以使用GUI自己完成）。
在“删除任何不必要的东西”中更进一步，我们可以在图形编辑器中做更多的事情。首先，您要确保使用尽可能少的路径/形状来实现您想要的效果，并且尽可能减少这些路径上的点数。您想要结合并简化任何可能的事情。然后，您希望从路径中删除尽可能多的点。VectorScribe是一个Illustrator插件，它包含了一个Smart Remove Brush Tool- 它允许你删除点，同时仍然保持整体形状相同。
