Optimized FXG graphics in Adobe Illustrator

In one of our previous posts we've spoke about possibility of creation vector assets and generation textures with right size for specific device on the fly during application loading. As a result we can achieve the same good quality on all devices and extremely smal size of application.
Key point of this approach is that all vector assets should be in FXG format. But I'd like to say that it is not so easy to create vector graphics with good quality in Adobe Illustrator and export it in pure FXG format without side bitmaps.



In this post I'd like to share with you several hints and tips of optimized FXG graphics creation. FXG builds an 2d image by describing every point in xml model. So every point, every line, every effect is described inside of model an that increases size and loading time.

If you want the best what vector graphic can do, you should avoid using effects, filters and adjustments that can be rasterized. I’m talking about meshes that looks great but can’t be written as vector. Remember to convert strokes (lines), brushes and other art objects into paths just to make sure the image converts and then reads in proper way (Object→Path→Outline Stroke or Object→Expand Appearance). I suggest you to use linear or radial gradient fill instead of glow or shadow filter effects. Interesting thing about gradient fill is that you can use opacity here and it will not affect any raster image generation. Clean up you layer/object structure because disabled/hidden layers and objects are present in final FXG file. FXG allows to reuse multiple symbols within one FXG file. Symbols can be used at different sizes and orientations. This approach reduces total FXG file size.

Summary:
Do:
- use minimum lines and anchor points (all of that increases file size)
- use gradient fill if possible (instead of using filters like glow or shadow)
- outline all strokes
- expand all art objects
- for repeating objects use symbols approach

Don't:

- don’t use meshes (they converts into raster images)
- don't leave hidden, empty layers or objects (they increase final FXG file size)