A precise schematic in SVG

Hand-author a vector schematic — exact coordinates, clean lines, labels — in the Code editor's SVG mode and insert it as a crisp figure.

For an experimental setup, a geometry sketch, or any figure where every line’s position matters, hand-authored SVG gives you exact control. This tutorial draws a small two-element schematic with labels and an arrow.

Step 1 — Open the SVG mode

In Figure Studio, open the Code tab and pick SVG. You write the markup directly; Run renders it in the preview.

Step 2 — Set up the canvas

Start from the viewBox — it defines your coordinate system, and the preview sizes itself from it, so you don’t need explicit width and height:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
</svg>

Everything you draw uses these coordinates: 0 0 is the top-left, 400 200 the bottom-right.

Step 3 — Draw the elements

Rectangles, circles, and lines cover most schematics. Two components and a connection:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="40" y="70" width="100" height="60" fill="none" stroke="black" stroke-width="2"/>
  <rect x="260" y="70" width="100" height="60" fill="none" stroke="black" stroke-width="2"/>
  <line x1="140" y1="100" x2="260" y2="100" stroke="black" stroke-width="2"/>
</svg>

Step 4 — Add labels and an arrowhead

Text elements label the parts; a marker turns the connecting line into an arrow:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5"
            markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z"/>
    </marker>
  </defs>
  <rect x="40" y="70" width="100" height="60" fill="none" stroke="black" stroke-width="2"/>
  <rect x="260" y="70" width="100" height="60" fill="none" stroke="black" stroke-width="2"/>
  <line x1="140" y1="100" x2="258" y2="100" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
  <text x="90" y="105" text-anchor="middle" font-size="14">Source</text>
  <text x="310" y="105" text-anchor="middle" font-size="14">Detector</text>
</svg>

Press Run after each change — the preview re-renders from the markup.

Step 5 — Export or insert

Export / Insert gives you a vector PDF for LaTeX, or drops the figure into the current paper with a \label. Because the figure is vector all the way through, it stays razor-sharp at any print size, and the saved markup reopens in this editor for later edits.

Tip: Pick stroke widths for the final printed size — 2 units on a 400-wide viewBox reads like a 0.5 pt line in a single-column figure. Test-compile once early rather than adjusting at the end.