5

I’ve noticed that when exporting a file from AI to SVG, there is a lot of code created that is not necessary and I realized then that this code can be certainly optimised.

Found this interesting SVG optimizer tool:

http://petercollingridge.appspot.com/svg_optimiser

I also found that the following practices may increase the performance of your final animation:

  • Using predefined shapes in SVG such as circles, elipses, squares, rectangles and polygons instead of paths.

  • Reducing the amount curves and corners when using paths.

  • When exporting AI to SVG, choose the option “presentation atributtes” so styles will be inside the SVG tag, instead of linking them to an external CSS file.

My question now is:

What other aspects must be considered WHEN WORKING IN ILLUSTRATOR in order to improve the final performance of an SVG animation?

Thank's.

  • I don't know if it works with animated SVGs, but SVGOMG is awesome for SVG optimisation. – Dom Jun 11 '15 at 0:04
  • The predefined thing does not work very well when doing stuff in illustrator. – joojaa Aug 6 '15 at 15:03
4

Here are a few simple things you can do while in Illustrator to keep file size low:

  • Merging as many shapes together as possible.
  • Expanding paths if you must use a path instead of a shape.
  • Reducing decimals places to 1. This is found in the advanced options in Illustrator when saving the image as an SVG.
  • Don't preserve AI editing capabilities either.
  • Avoid any kind of Illustrator or Photoshop effects.
4

I second everything in HandsomePhil's answer and would add:

  • Ungroup items if you won't need to reference the groups when working with your SVG. This will eliminate extra <g> tags.
  • Limit the number of colors.
  • Fit the artboard to artwork bounds (Object > Artboards > Fit to Artwork Bounds in CS5).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.