Groups, transforms, and reuse

Draw a component once, then place, rotate, and repeat it — the structure that keeps a real schematic editable.

A schematic with six identical detectors shouldn’t contain six hand-typed copies. SVG has structure for this: group with <g>, position with transform, define once with <defs> and stamp with <use>.

Step 1 — Group and move

A <g> bundles elements; its transform moves them as one. Draw the component at a comfortable local origin, then place the group:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(60, 80)">
    <rect x="0" y="0" width="60" height="40" fill="none" stroke="black" stroke-width="2"/>
    <circle cx="30" cy="20" r="8" fill="none" stroke="black" stroke-width="2"/>
    <text x="30" y="60" text-anchor="middle" font-size="12">sensor</text>
  </g>
</svg>

Everything inside is drawn relative to (0,0) — reposition the whole sensor by editing one number.

Step 2 — Rotate around the right point

Rotation takes an optional center — almost always what you want:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(200, 100) rotate(30)">
    <rect x="-30" y="-20" width="60" height="40" fill="none" stroke="black" stroke-width="2"/>
    <line x1="30" y1="0" x2="80" y2="0" stroke="black" stroke-width="2"/>
  </g>
</svg>

Trick: center the component on its own origin (x="-30" for a width-60 box), then translate to the target and rotate — transforms apply right-to-left, so the rotation happens around the component’s center.

Step 3 — Define once, use many times

<defs> holds invisible templates; <use> stamps them:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="detector">
      <rect x="-20" y="-14" width="40" height="28" fill="none" stroke="black" stroke-width="2"/>
      <circle cx="0" cy="0" r="6" fill="black"/>
    </g>
  </defs>
  <use href="#detector" x="80"  y="60"/>
  <use href="#detector" x="200" y="60"/>
  <use href="#detector" x="320" y="60"/>
  <use href="#detector" x="140" y="140"/>
  <use href="#detector" x="260" y="140"/>
</svg>

Change the detector’s shape once in <defs> and all five update — the difference between a drawing and a maintainable figure.

Step 4 — Layering and shared style

Later elements draw on top, and style set on a <g> is inherited — so a “wiring layer” group under a “components layer” group, each carrying its stroke style, keeps the markup short and the z-order deliberate:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <g stroke="gray" stroke-width="1.5">
    <line x1="80" y1="60" x2="200" y2="60"/>
    <line x1="200" y1="60" x2="320" y2="60"/>
  </g>
  <g stroke="black" stroke-width="2" fill="white">
    <circle cx="80" cy="60" r="10"/>
    <circle cx="200" cy="60" r="10"/>
    <circle cx="320" cy="60" r="10"/>
  </g>
</svg>

Step 5 — Export or insert

Export / Insert — vector PDF or straight into the paper with a \label. The structured markup is what gets saved, so next revision you edit components, not coordinates.

Tip: Name your groups with ids even when you don’t <use> them — six months later, id="beam-path" is the difference between reading your schematic and re-deriving it.