SVG Limitations
Mannequin uses SVG format for its graphic assets. To ensure maximum compatiblity with all of the available features, make sure that there is no bitmap parts in your SVG file. Some vector graphic apps convert gradients to bitmaps when exporting as SVG, so double-check your output to make sure that your app of choice behaves as expected. At this moment, the recommended apps to use are Illustrator (the same that we use) and Inkscape (for lower cost alternative).
Please note that with the current state of SVG, only linear and radial gradient can be used.
Coloring Rules
The color palette of your clothing templates' graphic assets should always be limited to these:
Fill (both solid and gradients): #3C4C72 (base color), #4B5D7F (highlight color), #131C43 (shadow color), #F5F5F5 (backlight color)
Stroke: #0C1535
Fill for cast shadows (both solid and gradients): #151515
Thickness Rules and Wrap Layer
To prevent clipping when multiple clothing items is used at the same time, always use the graphic assets of body template as starting point. From that, expand the thickness of your clothing graphic asset by 1 pixel depending on the designated clothing template layer property, starting from under to outer (or 1 to 4 if you prefer to use numbers).
Below is an example of how clothing template for t-shirt (layer 2 / base) differ in thickness versus blazer (layer 4 / outer), magnified four times. The t-shirt asset is 2px thicker compared to the body part asset, and the blazer asset is 4px thicker compared to the body part asset.
Of course, most clothing is not skin-tight and we want to use a more diverse shapes for our clothing template. This is where wrap layer is used, utilizing the boolean property removeWhenWrapped set to true. Below is the graphic assets for sweater/hoodie, the lower torso part:
By setting the removeWhenWrapped property to true for the 'wrap' layer object, it will be removed when other clothing layer object is rendered in front of it, thus avoiding clipping.
Back to Top