: 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
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:
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.
More posts by @Megan533
2 Comments
Sorted by latest first Latest Oldest Best
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).
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.