Skip to content

leomcelroy/svg-pcb

Repository files navigation

SVG PCB: a bidirectional editor for making circuits with code

teaser

SVG PCB is JavaScript based hardware description language and a browser-based editor for that language.

For more information go to the SVG PCB Website.

An introductory tutorial can be found here.

You can also read our paper from SCF 2022.

Use a Chromium Browser

About

SVG PCB is an open-source, web-based, client-side editor for parametric printed circuit board (PCB) design which supports bidirectional editing between our JavaScript hardware description language and a direct manipulation graphical interface. We developed a JSON format for describing component pads as SVG path data strings, referential component placements, and wire descriptions with curves, arbitrary degree Bezier splines, fillets, and chamfers. Boards can be exported in their JavaScript representation, as SVGs, or in Gerber format. The web-editor also supports interactive elements which update PCB designs in real-time such as number sliders, component translation handles, and drag-and-drop component libraries. Our tool was successfully used for developing and sharing basic boards in a distributed global class on digital fabrication and by researchers to produce procedurally generated designs. SVG-PCB offers the power and flexibility of a general purpose programming language for designing boards with the ease of use of a graphical user interface.

Using programming constructs like loops for parametric designs

Below demonstrates the code generating a procedural array of components (a), with arbitrary length and automatic wiring. Examples are shown for 𝑛 = 3 (b) and 𝑛 = 6 (c).

Screenshot 2024-12-23 at 11 43 34 AM

Reconfigurable designs

Here we see a reconfigurable board, where the user can select connectors and some components (here, the voltage regulator) from a list.

Screenshot 2024-12-23 at 11 45 52 AM

Different types of wires

Different type of wire points. Left to right: regular (a), chamfer (b), fillet (c) and Bezier splines (d).

Screenshot 2024-12-23 at 11 47 10 AM

SVG insertion and Bezier spline traces

Left: example board design using SVG insertion and Bezier splines wires. Right: resulting board milled on a desktop CNC milling machine.

Screenshot 2024-12-23 at 11 40 49 AM

Dev

Download the repo and run:

yarn
yarn dev