SVG加载太慢？试试这六招

摘要：SVG由于比以往的光栅图形更具优势而不断的被用于Web网站中，但是其加载缓慢成了主要的缺点，对此我们可以采取将样式移至CSS、使用groups、使用相对位置、不应用默认样式、缩小精度和删除重复的命令来加快加载速度。

近年来，SVG（可缩放矢量图形）随着出现于作为Web浏览器改进支持的HTML 5规格中后迅速增加。越来越多的网站采用SVG，因为其比光栅图形更具优势。但是用于Web的SVG有一个主要的缺点——比光栅图形明显要慢。

通过Web浏览器市场份额的竞争和在Web上的创新可以看出，诸如Google、Mozilla和微软将大量的资源注入到Web浏览器以使其更快的前进。这对于关注SVG性能的Web开发者来说是一个好消息，不过对于非常大的详细的SVG文件仍然还有一段路要走，如复杂的图标和地图，特别是如今在移动设备上浏览网页趋势的上升。

这里为大家介绍了6优化SVG文件的技巧:

1. 将样式移动到CSS

将样式移动到CSS是一种无损优化，既可以减少文件大小（以更快的加载文件），又可以提高渲染速度。

图1. 将样式移动到CSS使用前后对比示例

2. 使用组

使用组来适应样式而不是将样式适应每个路径，这也是一种无损优化，其作用与第一条一样既可以减少文件大小又可以提高渲染速度。

图2. 使用组前后对比示例

3. 使用相对位置

使用相对位置而不是绝对位置，虽然牺牲了可读性,但它可以显著减少文件大小,尤其对大的X或者Y位置进行小的调整。

图3. 使用相对位置前后对比示例

4. 不要应用默认样式

虽然这一方法的优化额度比较小，但还是很值得你去做的，同样它可以减小文件大小并使文件加载的更快。

图4. 不应用默认样式前后对比示例

5. 缩小精度（小数）

过度的准确性常见于自动生成的SVG文件中，缩放小数精度的优化效果是显而易见的，但是除去1位小数是对于文件而言是没有太大区别的。这是一个有损耗的方法来减少文件大小，加快加载速度。

图5. 缩小精度前后对比示例

6. 删除重复的命令

重复的命令是无意义的，删除它们可以减少文件大小，加快加载速度。

图6. 删除重复命令前后对比示例