Optimizing .svg Imagery

To optimize .svg imagery on your web site, you should be aware of a number of techniques that you can use in effort to reduce the size of those files:

  1. Use gzip compression to save your files into .svgz format.
    gzip compression of .svg graphics can often reduce the overall file size of an image by more than 50 percent, with a majority of industry-standard technology displaying the imagery without any noticeable difference in quality.
     
  2. Attempt to keep your coordinates no larger than "999" (three digits).
    Making sure that your .svg files are scaled in such a manner as to ensure that all coordinates are "999" or smaller will typically result in a smaller overall file size and faster download/display times for your web-based presentation.

  3.  
  4. Consider the use of relative coordinates instead of absolute coordinates.
    Absolute coordinates can be very useful when a person is reading the text of an SVG file. However, relative coordinates will typically result in smaller file sizes.

  5.  
  6. Replace six-digit color references with three-digit references, when possible.
    Several six-digit colors within .svg files, such as white (#FFFFFF) can be reduced to as few as three digits (#FFF) without any noticeable change to the graphic. Reducing color references to three digits will ultimately result in smaller file sizes and faster download/display times.

  7.  
  8. Evaluate your use of ellipses in your files.
    Several vector design programs, such as Corel Draw, will convert ellipses to polygons when creating their output. If you can make sure that ellipses are actually exported into .svg format preserved as ellipses, you will typically achieve a smaller file size.

  9.  
  10. Optimize your metafile data.
    Lossless optimization of meta file data will result in a reduction in overall file size without affecting image quality. Too much optimization could cause a mild to moderate degrading in image quality, but lossless optimization should result in only positive effects for your imagery.

Tools that will allow you to complete these techniques:
ImageMagick (Mac/Windows/Unix): Cost: Free | Quality: A- | Ease of Use: B | Use With: 1
SVG Factory (Windows): Cost: Free | Quality: B+ | Ease of Use: B | Use With: 1, 2, 3, 4, 5, 6


 
  Four Examples
 
 
 
    Other:
  Samples on Site
  Samples on Blog