SVG optimization practices when drawing in Illustrator

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:

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?



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.

Source : Link , Question Author : user289877 , Answer Author : HandsomePhil

Leave a Comment