Optimizing SVG graphics

Complexity

The complexity of the graphics is mainly defined by the content and drawing style. A world map or a gothic-looking object is relative bigger in file size than a ball or a simplified modern looking object.
Complexity can be reduced without affecting the outlook of the object by:
* SVGt file’ storage size on disk, ASCII text format optimized with SVG2SVGT too


Figure: Different size graphics

Reducing points

Removing unnecessary points is a way to optimize graphics as each point consumes ~20-40 bytes of memory. Actions to do this are:
Points may be created stacked close to each. This may occur, for example, when multiple shapes have been combined with Boolean operations (e.g. union, subtract, divide).

Simplify curved points

A curved line requires more time and CPU power to render than a straight line. Therefore utilizing straight lines whenever possible is preferable. Actions to do this are:


Remove points that do not have any visual effect - point’s existence does not affect the shape’s outlook.



If an outline is hidden, it is recommended to simplify it by converting the relevant curved points to straight ones.



If a curved line can not be recognized, convert them into straight lines.



If a line is not needed to be curved on both sides of a point retract the handle that is on the straight line side.

Simplify shapes

Simplifying shapes by removing unnecessary details is another step for optimization graphics. Actions are:

Demanding features

Gradient and opacity are relative demanding features for the SVG engine to render, especially when used in large areas. Optimization actions are:
Avoid using overlapping transparency or transparency on a gradient. Create the same visual effect ‘faking’ the transparency outcome.