SVG Graphics preparation guide

General recommendations

1. Make sure your vector data is optimized, does not contain:
   • any hidden elements;
   • any referred external images;
   • any extra namespaces like RDF, sodipodi etc;
   • any clip-paths inside that may conflict with other elements on LiveArt stage.
2. Always remember that your user will be using mobile internet most of his time, so you might want SVGs to be small.
3. Use https://jakearchibald.github.io/svgomg/ (opens new window) utility to prettify and clean up your SVG.
4. Suggested SVG gallery image dimensions are 300x300px.

Preparation of colorizable graphics

There are 3 ways you can make your graphics colorizable:

Automatically parsed colors

1. Save your graphics with CSS Properties set to Presentation Attributes on svg export dialog (examples: in Illustrator (opens new window), in Corel (opens new window)).
2. Set "parseColorAreas": true in the configuration for this artwork (configuration schema (opens new window)).

Use special layer names

1. Name all layers to colorize with a special layer name syntax: la|Layer Name or la|Layer Name|group  (how it looks in illustrator sample (opens new window) and exported to SVG sample (opens new window))
   • | - separator (Note: exported to SVG as UTF code _x7C_);
   • la - special prefix;
   • Layer Name - layer name on UI in colorize menu;
   • group (optional) - layer group.
2. Use groups:
   • to colorize independent areas at the same time;
   • to colorize the same area on product different locations (see example: front location (opens new window), back location (opens new window), colorize in the designer (opens new window));
   • Note: If layers from the same group have different Layer Name, on UI layer name will be the same as the highest (in the layers list) layer name in Illustrator has.
3. What is colorizable:
   • all kinds of paths with solid color (Note: in groups the first (lowest) object with fill will be used as a source. This fill will be applied to all objects inside the group).
4. What can not be colorizable in Illustrator:
   • Clip paths.
5. Save your graphics with CSS Properties set to Presentation Attributes on svg export dialog (examples: in Illustrator (opens new window), in Corel (opens new window)).

Use unique ids

1. Add unique id to each layer to colorize (samples: in editor (opens new window), SVG (opens new window)).
2. Add fill attribute with default color to colorizable layer (sample (opens new window)).
3. Respective configuration file (graphics or product) should be updated as well. Add respective id to colorizableElements[].query (samples: configuration schema (opens new window), configuration updates (opens new window), view in the designer (opens new window))