svg-figure

SVG Figure

Conventions for SVG schematics and diagrams (flowcharts, process diagrams, system diagrams, anatomical illustrations) with element-consistency guarantees: text aligned to box bounds, arrows pointing at their targets, lines passing under shapes by z-order. The output SVGs are designed to be composed as panels by the [[scientific-figure]] skill and verified by the [[figure-qa]] agent's SVG branch.

When to use this skill

For new programmatic work, use [[svg-primitives]] instead. It implements every convention below as a mechanical guarantee — text auto-fits boxes, arrowheads stay tangent-correct on curves, paint order is deterministic, and Canvas.save(validate='strict') raises if any of those invariants are violated. examples/schematic_from_primitives.py in this skill is the canonical programmatic example.

Reach for this skill when:

• You are writing SVG by hand or with an editor like Inkscape, and need the conventions the figure-qa agent expects.
• You are using a non-Python tool to emit SVG and want to know what shape it should take.
• You are reading hand-authored SVG produced by an external collaborator and want to understand the layout grammar.
• You are debugging a figure-qa finding on an SVG that did not come from svg-primitives.
• The figure is a schematic (boxes, arrows, labels) rather than data plotted from numbers — for plots use [[plot-styling]].

Reach for a different tool when:

• You are writing Python → use [[svg-primitives]].
• The figure is a plot of data → use [[plot-styling]].
• The figure is pictorial substrate (a brain, a microscope, a setup photo aesthetic) → use [[ai-full-figure]] for the substrate and overlay labels via [[svg-primitives]].
• The figure needs icon-style elements repeated across panels → generate the icons via [[transparent-icons]] and place them as <image> references in the SVG.

Programmatic authoring (recommended path)

See [[svg-primitives]]. The canonical example in this skill is examples/schematic_from_primitives.py which reproduces examples/schematic.svg using Canvas, LabeledBox, Arrow.connect, and Annotation. Run it: