SVG Graphics preparation guide
General recommendations
- 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.
- Always remember that your user will be using mobile internet most of his time, so you might want SVGs to be small.
- Use https://jakearchibald.github.io/svgomg/ (opens new window) utility to prettify and clean up your SVG.
- Suggested SVG gallery image dimensions are 300x300px.
Preparation of colorizable graphics
There are 3 ways you can make your graphics colorizable:
Automatically parsed colors
- 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)). - Set
"parseColorAreas": true
in the configuration for this artwork (configuration schema (opens new window)).
Use special layer names
- Name all layers to colorize with a special layer name syntax:
la|Layer Name
orla|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.
- 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.
- 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).
- What can not be colorizable in Illustrator:
- Clip paths.
- 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
- Add unique id to each layer to colorize (samples: in editor (opens new window), SVG (opens new window)).
- Add
fill
attribute with default color to colorizable layer (sample (opens new window)). - 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))