Minimizing SVG file size [closed]

问题:

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 8 years ago.

I am saving map images created in Adobe Illustrator as .svg documents. What are some tips and tricks for making the file size as small as possible?

回答1:

1. Turn off "Preserve Illustrator Editing Capabilities", which includes an enormous proprietary pseudo-binary blob in your file.

2. GZIP your content (either explicitly, or via your web server settings) when the user agents you intend to view your work support this.
   SVG is XML, and hence text, and hence quite compressible.

3. Reduce unnecessary numeric precision. (You can do this either with the "Decimal Places" setting when saving from Illustrator, or by post-processing your file to reduce precision.)
   For example, the following two paths are visually indistinguishable:

   <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. Factor out repeated attribute-based styles into common CSS- or entity-based styles.
   For example, you might replace

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

   with

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

5. Factor out repeated transformations into grouped items.
   For example, replace

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

   with

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