Skip to content

How to prepare colorized artwork?

While most of your logos would have fixed colors, you can allow your users picking up individual colors for certain parts of the image. These can be created from common vector Illustrator file, that was created with Style Elements.
  1. Verify you have styles definitions at the top. If you have it already setup, you may skip the steps below and update the Gallery JSON to let LiveArt know which styles will be colorized. Please note that only "fill" attribute will be taken into account, so make sure you expand all of your strokes.
  2. If you don't have style definitions, decide first which path elements you'd like to colorize. Add definition of class to the path object, e.g. class="wings".
  3. Finally, add a definition of default style, this should go immediately after svg element.
<style type="text/css">
   <![CDATA[
    .wings{fill:#f00}
   ]]>
</style>

You can have multiple definitions of classes with different default colors, set via the "fill" attribute.
Next step - update the Gallery JSON or upload your artwork to admin area and define the colorized areas. For example, to make the above colorized layer available, the following should be added to the graphics.json.

"multicolor": true,
"colorizableElements": 
[
    {
        "name": "Wings",
        "id": ".wings.fill",
        "colors": [
            { "name": "Epic Red", "value": "#f00" },
            { "name": "Pitch Black", "value": "#000"},
            { "name": "Yellow", "value": "#ff0"}
        ]
    }
]

Please note couple of specifics in the configuration snippet above:
  • The id should correspond the class you have used inside SVG file.
  • colorizableElements node is of type array (note the square brackets);
  • You can omit "colors" array node. In this case list of available decoration colors will be used, i.e. all colorizable elements will have same color list.
  • Avoid using "_" (underscore) symbol in class names — Adobe Illustrator has issues with import/export such SVG files.

Feedback and Knowledge Base