从网页上减少一些额外字节的一种方法是优化SVG文件。我将向你展示一个快速的方法。一般来说，你会通过你喜欢的矢量图形编辑器创建一个SVG文件。
我的选择是Adobe Illustrator，但这将在其他程序中工作。在这里你可以看到我用Illustrator创建的矢量图形，一个放大镜图标:
矢量图形完成后，通常将其导出为SVG文件以供web使用。我只是按照官方指南为网页导出SVG用Adobe Illustrator创建放大镜图标的SVG文件:
SVG文件简单地由XML标记组成，它告诉web浏览器如何渲染图像。
对于我们来说，这仅仅意味着我们可以在文本编辑器中打开并查看SVG文件的源代码。下面是Adobe Illustrator自动为我生成的标记:
<？XML版本="1.0"编码="utf-8"?> < !——生成器:Adobe Illustrator 15.1.0, SVG导出插件——> ) > < version = " 1.1 " xmlns_xlink = " http://www.w3.org/1999/xlink " xmlns_a = " http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/ " x = 0 px y = 0 px”宽度= " 200 px高度=“200 px”viewBox =“-15.146 - -15.389 200 200”使背景= xml_space“新-15.146 - -15.389 200 200”= >“保存”< def > < / def > <路径id = d =“path_1_ M96.024, 16.475 c - 21.967 - 21.966 - 57.582 - 21.967 - 79.549, 0 c - 21.967, 21.966 - -21.967, 57.583, 0, 79.549c18.83, 18.829, 47.677, 21.503, 69.371, 8.055 l64.864 c5.077 64.863, 5.077, 13.308, 5.077, 18.385, 0 c5.077 - 5.076, 5.077 - -13.308, 0 - 18.385升- 64.899 - 64.899 c117.514,114.8 63.987, 35.25, 96.024, 16.475 z M80.01, 80.01 c - 13.122, 13.122 - -34.397, 13.122 - -47.52, 0 c - 13.123 - 13.123 - 13.122 - 34.398, 0 - 47.52 - c13.123 - 13.123, 34.397 - -13.123, 47.52, 0 c93.132, 45.611, 93.133, 66.887, 80.01, 80.01 z " / > < / svg >如上所述，我的放大镜图标的代码有一些不必要的额外内容。的强硬的方式优化SVG文件的方法是手动清理代码。
如果你需要帮助，请查看SVG优化指南他向你展示了需要注意的事情。手动清理方法是一件值得做几次的好事，这样您就可以了解它是如何工作的，并了解工具为您优化SVG文件时会发生什么。但是代码清理几乎总是可以自动完成的。
想象一下，如果您有大量SVG文件，手动清理它们的源代码既不高效也不实用。这就是Kraken.io进入画面。Kraken.iooptimizes web images such as JPG, PNG and SVG files.
只需将SVG文件拖放到工具中，它就会为我们完成所有工作。
下面是经过Kraken.io运行后优化的SVG代码:
<！DOCTYPE svg PUBLIC "-//W3C//DTD svg 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [) > < svg宽度= " 200 "高度= " 200 " viewBox =“-15.146 - -15.389 200 200”使背景=“新-15.146 - -15.389 200 200”> <路径d = " M96.02 c74.06 16.48 - 5.5 38.44 - -5.5 16.47 - 16.48 c - 0 21.96 21.96 -21.96 57.58 79.54 18.83 18.83 47.68 21.5 69.38 8.06 64.86 l64.86 c5.1 0 0 5.08 13.32 5.08 18.4 5.07 -5.07 5.07 -13.3 64.9 - 18.38 - 64.9 l - - - c13.3 zm80.02 80 c 21.67 10.6 -50.4 -8.18 -69.19 - 13.13 13.13 - -34.4 13.13 - -47.53 34.4 - 13.13 - 13.1 - 13.13 - 0 - 47.5 13.1 -13.13 34.4 -13.13 47.5 0 c93.1445.6 93.14 66.9 80 80z"/>您将注意到它从SVG文件中删除了不需要的代码，如注释、代码格式和空格。使用这个技巧，SVG文件大小减小了约37%而不牺牲任何图像质量(即
这是一个无损压缩)。
您可以下载本教程中使用的图标的源文件，以便动手探索。
读下
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
