svg - 最小化 SVG 文件大小

Question

我将在 Adob​​e Illustrator 中创建的地图图像保存为 .svg 文档。有哪些使文件尽可能小的提示和技巧？

Answer 1

1. 关闭“保留 Illustrator 编辑功能”，它在您的文件中包含一个巨大的专有伪二进制 blob。

2. 当您打算查看您的工作的用户代理支持此操作时，GZIP 您的内容（明确地，或通过您的 Web 服务器设置）。
   SVG 是 XML，因此是文本，因此是可压缩的。

3. 减少不必要的数值精度。（您可以在从 Illustrator 保存时使用“小数位数”设置来执行此操作，或者通过对文件进行后处理来降低精度。）
   例如，以下两个路径在视觉上无法区分：

   <path d="M102.6923828,391.6152344
    c56.8027344,115.9394531-3.8457031-246.1542969,105.3847656-217.6923828
    s218.4609375-53.0766602,243.8457031,40.7695313
    S541.9228516,411.6152344,435,527s-166.1538086,58.4609375-213.8461914-50
    C173.4614258,368.5385742,46.5385742,277,102.6923828,391.6152344z"
   
   <path d="M102.7,391.6c56.8,115.9-3.8-246.2,105.4-217.7s218.5-53.1,243.8,40.8
    s90,196.9-16.9,312.3s-166.2,58.5-213.8-50C173.5,368.5,46.5,277,102.7,391.6z"
   

4. 将重复的基于属性的样式分解为常见的基于 CSS 或实体的样式。
   例如，您可以替换

   <rect fill="red" stroke="black" stroke-width="10px"   ... />
   <circle fill="red" stroke="black" stroke-width="10px" ... />
   

   和

   .bold { fill:red; stroke:black; stroke-width:10px }
   <!-- ... -->
   <rect class="bold"   ... />
   <circle class="bold" ... />
   

5. 将重复的转换分解为分组项目。
   例如，替换

   <rect   transform="translate(102,-64) rotate(10.23)" ... />
   <circle transform="translate(102,-64) rotate(10.23)" ... />
   

   和

   <g transform="translate(102,-64) rotate(10.23)">
     <rect ... />
     <circle ... />
   </g>