Layer Order

Layer Order

Changes the rendering order of SVG elements. In SVG, elements later in the document render on top of earlier elements.

Usage

node .claude/skills/layer-order/index.js <svg-file> <selector> <action>

Selectors

Must include an index:

Actions

Examples

Bring to Front

# Bring first circle to front
node .claude/skills/layer-order/index.js output/art.svg circle:0 front

Send to Back

# Send last path behind other elements
node .claude/skills/layer-order/index.js output/art.svg path:-1 back

Move Up/Down

# Move element up one layer
node .claude/skills/layer-order/index.js output/art.svg rect:0 up

# Move element down one layer
node .claude/skills/layer-order/index.js output/art.svg circle:1 down

How SVG Layering Works

SVG uses "painter's model" - elements are painted in document order:

First in document  → Renders at back (covered by later elements)
Last in document   → Renders at front (covers earlier elements)

<svg>
  <rect ... />     <!-- Bottom layer -->
  <circle ... />   <!-- Middle layer -->
  <path ... />     <!-- Top layer -->
</svg>

Common Workflows

Overlapping Shapes

# Create overlapping circles
node .claude/skills/add-circle/index.js output/art.svg 180 200 50 fill=#E53935
node .claude/skills/add-circle/index.js output/art.svg 220 200 50 fill=#1E88E5

# Bring red circle to front
node .claude/skills/layer-order/index.js output/art.svg circle:0 front

Labels on Top

# Ensure text labels are on top
node .claude/skills/layer-order/index.js output/art.svg text:0 front

Background Elements

# Send decorative element behind main content
node .claude/skills/layer-order/index.js output/art.svg path:3 back

Notes

• The first element (index 0) is typically the background rectangle
• back places element after the background, not before it
• Negative indices work (-1 = last, -2 = second to last)
• Groups (<g>) can also be reordered
• Use front and back for major changes, up/down for fine-tuning