Minimizing SVG file size [closed]

Question

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?

Motley

My favourite tool is Scour: codedread.com/scour If you feel like doing some more work by hand in a text editor, you can find lots of little tricks in the changesets and commit messages here too - but this requires learning some of the (fascinating!) SVG format details: github.com/johan/svg-cleanups/commits – Commencement

As SVG is a XML based file which can be manually edited by a web developer, how can this question be offtopic? – Shockheaded

check out Peter Collingridge's online tool for a quick solution. – Hessenassau

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

Saturn