Order

The Item Order page is designed to manage the stacking order of items on the canvas, crucial for scenarios where items may overlap. In the generated SVG document, this concept is often referred to as Z-ordering, although technically, the document is two-dimensional without an actual Z-axis.

Ordering of Items

Items are assigned a relative ordering value expressed as a percentage, where 100% positions an item at the forefront and 0% places it at the back of the canvas. Items with higher ordering values will appear above those with lower values, dictating their overlap sequence.

Previewing Item Order

The preview window at the top showcases the effect of the selected item order using colored rectangles of varying sizes: smaller, red rectangles represent items positioned towards the back, whereas larger, green rectangles signify items at the front.

It’s crucial to understand that the preview is a simplified representation, focusing on illustrating the ordering principle rather than mimicking the exact item layout of your design.

As you adjust the item order settings, the label in the top left corner of the preview updates to reflect the chosen input. For example, selecting the input, which uses the X-position of items, changes the label to X→. This indicates a left-to-right progression of input values in the preview, providing clarity on how adjustments impact item order. This guidance is invaluable, especially for abstract inputs like “item order,” where the order→ label helps visualize how item sequencing is mapped across the preview.

Adjusting Item Order Settings

Below the preview, controls are available to define the dynamic value for item order, ranging from 0% (back) to 100% (front). The settings enforce a strict adherence to this range to maintain order integrity. In instances where multiple items have identical order values, their sequence is determined by the order in which they are placed by the generator.

Dynamic Values

For a comprehensive understanding of dynamic values and their role in item order, refer to the Dynamic Values chapter. This section elaborates on using dynamic values to fine-tune item positioning, significantly enhancing the aesthetic and coherence of your project.