21

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?

Lauren
  • 219
  • 1
  • 2
  • 3
  • 4
    My favourite tool is Scour: http://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: https://github.com/johan/svg-cleanups/commits/ – ecmanaut Jul 07 '12 at 22:45
  • 1
    As SVG is a XML based file which can be manually edited by a web developer, how can this question be offtopic? – Erick Petrucelli Jun 03 '15 at 19:34
  • 1
    check out [Peter Collingridge's online tool](http://petercollingridge.appspot.com/svg-optimiser) for a quick solution. – artfulrobot Mar 24 '17 at 15:28

1 Answers1

31

  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>
Phrogz
  • 296,393
  • 112
  • 651
  • 745