最小化SVG文件大小

最小化SVG文件大小,svg,filesize,adobe-illustrator,Svg,Filesize,Adobe Illustrator,我正在将Adobe Illustrator中创建的地图图像保存为.svg文档。使文件大小尽可能小的一些技巧和窍门是什么 关闭“保留Illustrator编辑功能”,该功能在文件中包含一个巨大的专有伪二进制blob GZIP您的内容(无论是明确的,还是通过您的web服务器设置),当您想要查看您的工作的用户代理支持此操作时。 SVG是XML,因此是文本,因此非常可压缩 减少不必要的数值精度。(从Illustrator保存时,您可以使用“小数位数”设置,也可以通过对文件进行后处理来降低精度。) 例如,

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

  • 关闭“保留Illustrator编辑功能”,该功能在文件中包含一个巨大的专有伪二进制blob

  • GZIP您的内容(无论是明确的,还是通过您的web服务器设置),当您想要查看您的工作的用户代理支持此操作时。
    SVG是XML,因此是文本,因此非常可压缩

  • 减少不必要的数值精度。(从Illustrator保存时,您可以使用“小数位数”设置,也可以通过对文件进行后处理来降低精度。)
    例如,以下两条路径在视觉上无法区分:


    我最喜欢的工具是screash:如果你想在文本编辑器中手工做更多的工作,你也可以在变更集中找到很多小技巧并在这里提交消息——但这需要学习一些(迷人的!)SVG格式的细节:因为SVG是一个基于XML的文件,可以由web开发人员手动编辑,这个问题怎么会偏离主题?请查看快速解决方案。
    
    <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"
    
    <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>