Question

我将在Adobe Illustrator中创建的地图图像保存为.svg文档。使文件大小尽可能小的一些提示和技巧是什么？

Answer 1

关闭“保留Illustrator编辑功能”，其中包含文件中巨大的专有伪二进制blob。
当用户代理您打算查看您的工作支持时，GZIP您的内容（明确地或通过您的网络服务器设置）。
SVG是XML，因此是文本，因此非常可压缩。

减少不必要的数字精度。（从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"

将基于属性的重复样式分解为常见的基于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" ... />

将重复转换分解为分组项目 例如，替换

<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>

最小化SVG文件大小

1 个答案: