Repository: microsoft/quantum-viz.js (language: python)

Issue:
Generate gates as DOM elements instead of strings
Currently, we generate gates as strings. However, it would be better to generate them as DOM elements so that we can easily add in functionality and properties to the elements directly.


Discussion / hints:

Fix patch:
diff --git a/src/constants.ts b/src/constants.ts
index f658a012..2ccb9e33 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+// SVG Namespace
+export const svgNS = 'http://www.w3.org/2000/svg';
+
 // Display attributes
 /** Left padding of SVG. */
 export const leftPadding = 20;
diff --git a/src/formatters/formatUtils.ts b/src/formatters/formatUtils.ts
index 17423372..99b4ffa4 100644
--- a/src/formatters/formatUtils.ts
+++ b/src/formatters/formatUtils.ts
@@ -1,37 +1,37 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { labelFontSize } from '../constants';
+import { labelFontSize, svgNS } from '../constants';
 
 // Helper functions for basic SVG components
 
 /**
- * Given an array of SVG elements, group them as an SVG group using the `<g>` tag.
+ * Create an SVG element.
  *
- * @param svgElems   Array of SVG elements.
- * @param attributes Key-value pairs of attributes and they values.
+ * @param type The type of element to be created.
+ * @param attributes The attributes that define the element.
  *
- * @returns SVG string for grouped elements.
+ * @returns SVG element.
  */
-export const group = (svgElems: string[], attributes: { [attr: string]: string | undefined } = {}): string => {
-    const attrs: string = Object.entries(attributes)
-        .filter(([_, val]) => val != null)
-        .map(([attr, val]) => `${attr}='${val}'`)
-        .join(' ');
-    return [`<g ${attrs}>`, ...svgElems.flat(), '</g>'].join('\n');
+export const createSvgElement = (type: string, attributes: { [attr: string]: string } = {}): SVGElement => {
+    const el: SVGElement = document.createElementNS(svgNS, type);
+    Object.entries(attributes).forEach(([attrName, attrVal]) => el.setAttribute(attrName, attrVal));
+    return el;
 };
 
 /**
- * Generate the SVG representation of a control dot used for controlled operations.
+ * Given an array of SVG elements, group them as an SVG group using the `<g>` tag.
  *
- * @param x      x coord of circle.
- * @param y      y coord of circle.
- * @param radius Radius of circle.
+ * @param svgElems   Array of SVG elements.
+ * @param attributes Key-value pairs of attributes and they values.
  *
- * @returns SVG string for control dot.
+ * @returns SVG element for grouped elements.
  */
-export const controlDot = (x: number, y: number, radius = 5): string =>
-    `<circle class="control-dot" cx="${x}" cy="${y}" r="${radius}"></circle>`;
+export const group = (svgElems: SVGElement[], attributes: { [attr: string]: string } = {}): SVGElement => {
+    const el: SVGElement = createSvgElement('g', attributes);
+    svgElems.forEach((child: SVGElement) => el.appendChild(child));
+    return el;
+};
 
 /**
  * Generate an SVG line.
@@ -42,13 +42,49 @@ export const controlDot = (x: number, y: number, radius = 5): string =>
  * @param y2        y coord fo ending point of line.
  * @param className Class name of element.
  *
- * @returns SVG string for line.
+ * @returns SVG element for line.
+ */
+export const line = (x1: number, y1: number, x2: number, y2: number, className?: string): SVGElement => {
+    const attrs: { [attr: string]: string } = {
+        x1: x1.toString(),
+        x2: x2.toString(),
+        y1: y1.toString(),
+        y2: y2.toString(),
+    };
+    if (className != null) attrs['class'] = className;
+    return createSvgElement('line', attrs);
+};
+
+/**
+ * Generate an SVG circle.
+ *
+ * @param x      x coord of circle.
+ * @param y      y coord of circle.
+ * @param radius Radius of circle.
+ *
+ * @returns SVG element for circle.
  */
-export const line = (x1: number, y1: number, x2: number, y2: number, className?: string): string => {
-    const clsString: string = className != null ? ` class="${className}"` : '';
-    return `<line${clsString} x1="${x1}" x2="${x2}" y1="${y1}" y2="${y2}"></line>`;
+export const circle = (x: number, y: number, radius: number, className?: string): SVGElement => {
+    const attrs: { [attr: string]: string } = {
+        cx: x.toString(),
+        cy: y.toString(),
+        r: radius.toString(),
+    };
+    if (className != null) attrs['class'] = className;
+    return createSvgElement('circle', attrs);
 };
 
+/**
+ * Generate the SVG representation of a control dot used for controlled operations.
+ *
+ * @param x      x coord of circle.
+ * @param y      y coord of circle.
+ * @param radius Radius of circle.
+ *
+ * @returns SVG element for control dot.
+ */
+export const controlDot = (x: number, y: number, radius = 5): SVGElement => circle(x, y, radius, 'control-dot');
+
 /**
  * Generate the SVG representation of a unitary box that represents an arbitrary unitary operation.
  *
@@ -58,10 +94,16 @@ export const line = (x1: number, y1: number, x2: number, y2: number, className?:
  * @param height    Height of box.
  * @param className Class name of element.
  *
- * @returns SVG string for unitary box.
+ * @returns SVG element for unitary box.
  */
-export const box = (x: number, y: number, width: number, height: number, className = 'gate-unitary'): string =>
-    `<rect class="${className}" x="${x}" y="${y}" width="${width}" height="${height}"></rect>`;
+export const box = (x: number, y: number, width: number, height: number, className = 'gate-unitary'): SVGElement =>
+    createSvgElement('rect', {
+        class: className,
+        x: x.toString(),
+        y: y.toString(),
+        width: width.toString(),
+        height: height.toString(),
+    });
 
 /**
  * Generate the SVG text element from a given text string.
@@ -71,10 +113,17 @@ export const box = (x: number, y: number, width: number, height: number, classNa
  * @param y    Middle y coord of text.
  * @param fs   Font size of text.
  *
- * @returns SVG string for text.
+ * @returns SVG element for text.
  */
-export const text = (text: string, x: number, y: number, fs: number = labelFontSize): string =>
-    `<text font-size="${fs}" x="${x}" y="${y}">${text}</text>`;
+export const text = (text: string, x: number, y: number, fs: number = labelFontSize): SVGElement => {
+    const el: SVGElement = createSvgElement('text', {
+        'font-size': fs.toString(),
+        x: x.toString(),
+        y: y.toString(),
+    });
+    el.textContent = text;
+    return el;
+};
 
 /**
  * Generate the SVG representation of the arc used in the measurement box.
@@ -84,10 +133,13 @@ export const text = (text: string, x: number, y: number, fs: number = labelFontS
  * @param rx x radius of arc.
  * @param ry y radius of arc.
  *
- * @returns SVG string for arc.
+ * @returns SVG element for arc.
  */
-export const arc = (x: number, y: number, rx: number, ry: number): string =>
-    `<path class="arc-measure" d="M ${x + 2 * rx} ${y} A ${rx} ${ry} 0 0 0 ${x} ${y}"></path>`;
+export const arc = (x: number, y: number, rx: number, ry: number): SVGElement =>
+    createSvgElement('path', {
+        class: 'arc-measure',
+        d: `M ${x + 2 * rx} ${y} A ${rx} ${ry} 0 0 0 ${x} ${y}`,
+    });
 
 /**
  * Generate a dashed SVG line.
@@ -98,11 +150,12 @@ export const arc = (x: number, y: number, rx: number, ry: number): string =>
  * @param y2        y coord fo ending point of line.
  * @param className Class name of element.
  *
- * @returns SVG string for dashed line.
+ * @returns SVG element for dashed line.
  */
-export const dashedLine = (x1: number, y1: number, x2: number, y2: number, className?: string): string => {
-    const clsString: string = className != null ? ` class="${className}"` : '';
-    return `<line${clsString} x1="${x1}" x2="${x2}" y1="${y1}" y2="${y2}" stroke-dasharray="8, 8"></line>`;
+export const dashedLine = (x1: number, y1: number, x2: number, y2: number, className?: string): SVGElement => {
+    const el: SVGElement = line(x1, y1, x2, y2, className);
+    el.setAttribute('stroke-dasharray', '8, 8');
+    return el;
 };
 
 /**
@@ -114,9 +167,11 @@ export const dashedLine = (x1: number, y1: number, x2: number, y2: number, class
  * @param height    Height of box.
  * @param className Class name of element.
  *
- * @returns SVG string for dashed box.
+ * @returns SVG element for dashed box.
  */
-export const dashedBox = (x: number, y: number, width: number, height: number, className?: string): string => {
-    const clsString: string = className != null ? ` class="${className}"` : '';
-    return `<rect${clsString} x="${x}" y="${y}" width="${width}" height="${height}" fill-opacity="0" stroke-dasharray="8, 8"></rect>`;
+export const dashedBox = (x: number, y: number, width: number, height: number, className?: string): SVGElement => {
+    const el: SVGElement = box(x, y, width, height, className);
+    el.setAttribute('fill-opacity', '0');
+    el.setAttribute('stroke-dasharray', '8, 8');
+    return el;
 };
diff --git a/src/formatters/gateFormatter.ts b/src/formatters/gateFormatter.ts
index 81a1644d..16588ff3 100644
--- a/src/formatters/gateFormatter.ts
+++ b/src/formatters/gateFormatter.ts
@@ -13,7 +13,18 @@ import {
     classicalRegHeight,
     nestedGroupPadding,
 } from '../constants';
-import { group, controlDot, line, box, text, arc, dashedLine, dashedBox } from './formatUtils';
+import {
+    createSvgElement,
+    group,
+    line,
+    circle,
+    controlDot,
+    box,
+    text,
+    arc,
+    dashedLine,
+    dashedBox,
+} from './formatUtils';
 
 /**
  * Given an array of operations (in metadata format), return the SVG representation.
@@ -23,56 +34,9 @@ import { group, controlDot, line, box, text, arc, dashedLine, dashedBox } from '
  *
  * @returns SVG representation of operations.
  */
-const formatGates = (opsMetadata: Metadata[], nestedDepth = 0): string => {
-    const formattedGates: string[] = opsMetadata.map((metadata) => _formatGate(metadata, nestedDepth));
-    return formattedGates.flat().join('\n');
-};
-
-const _gateControls = (metadata: Metadata, nestedDepth: number): string[] => {
-    if (metadata == undefined) return [];
-
-    const [x1, y1] = _gatePosition(metadata, nestedDepth);
-    const { dataAttributes } = metadata;
-    const atts = dataAttributes || {};
-    const ctrls: string[] = [];
-
-    const expanded = 'expanded' in atts;
-
-    // Add collapse if expanded.
-    if (expanded) {
-        ctrls.push(
-            group(['<circle cx="0" cy="0" r="10" />', '<path d="M-7,0 H7" />'], {
-                class: 'gate-control gate-collapse',
-                transform: `translate(${x1 + 2}, ${y1 + 2})`,
-            }),
-        );
-    } else if (atts['zoom-in'] == 'true') {
-        ctrls.push(
-            group(['<circle cx="0" cy="0" r="10" />', '<path d="M0,-7 V7 M-7,0 H7" />'], {
-                class: 'gate-control gate-expand',
-                transform: `translate(${x1 + 2}, ${y1 + 2})`,
-            }),
-        );
-    }
-
-    return ctrls;
-};
-
-/**
- * Groups SVG elements into a gate SVG group.
- *
- * @param svgElems       Array of SVG elements.
- * @param dataAttributes Custom data attributes to be attached to SVG group.
- *
- * @returns SVG representation of a gate.
- */
-const _createGate = (body: string[], metadata: Metadata, nestedDepth: number): string => {
-    const ctrls = _gateControls(metadata, nestedDepth);
-    const { dataAttributes } = metadata || {};
-    const attributes: { [attr: string]: string } = { class: 'gate' };
-    Object.entries(dataAttributes || {}).forEach(([attr, val]) => (attributes[`data-${attr}`] = val));
-
-    return group(body.concat(ctrls), attributes);
+const formatGates = (opsMetadata: Metadata[], nestedDepth = 0): SVGElement => {
+    const formattedGates: SVGElement[] = opsMetadata.map((metadata) => _formatGate(metadata, nestedDepth));
+    return group(formattedGates);
 };
 
 /**
@@ -83,7 +47,7 @@ const _createGate = (body: string[], metadata: Metadata, nestedDepth: number): s
  *
  * @returns SVG representation of gate.
  */
-const _formatGate = (metadata: Metadata, nestedDepth = 0): string => {
+const _formatGate = (metadata: Metadata, nestedDepth = 0): SVGElement => {
     const { type, x, controlsY, targetsY, label, displayArgs, width } = metadata;
     switch (type) {
         case GateType.Measure:
@@ -108,6 +72,99 @@ const _formatGate = (metadata: Metadata, nestedDepth = 0): string => {
     }
 };
 
+/**
+ * Groups SVG elements into a gate SVG group.
+ *
+ * @param svgElems       Array of SVG elements.
+ * @param dataAttributes Custom data attributes to be attached to SVG group.
+ *
+ * @returns SVG representation of a gate.
+ */
+const _createGate = (svgElems: SVGElement[], metadata: Metadata, nestedDepth: number): SVGElement => {
+    const { dataAttributes } = metadata || {};
+    const attributes: { [attr: string]: string } = { class: 'gate' };
+    Object.entries(dataAttributes || {}).forEach(([attr, val]) => (attributes[`data-${attr}`] = val));
+
+    const zoomBtn: SVGElement | null = _zoomButton(metadata, nestedDepth);
+    if (zoomBtn != null) svgElems = svgElems.concat([zoomBtn]);
+    return group(svgElems, attributes);
+};
+
+/**
+ * Returns the expand/collapse button for an operation if it can be zoomed-in or zoomed-out,
+ * respectively. If neither are allowed, return `null`.
+ *
+ * @param metadata Operation metadata.
+ * @param nestedDepth Depth of nested operation.
+ *
+ * @returns SVG element for expand/collapse button if needed, or null otherwise.
+ */
+const _zoomButton = (metadata: Metadata, nestedDepth: number): SVGElement | null => {
+    if (metadata == undefined) return null;
+
+    const [x1, y1] = _gatePosition(metadata, nestedDepth);
+    let { dataAttributes } = metadata;
+    dataAttributes = dataAttributes || {};
+
+    const expanded = 'expanded' in dataAttributes;
+
+    const x = x1 + 2;
+    const y = y1 + 2;
+    const circleBorder: SVGElement = circle(x, y, 10);
+
+    if (expanded) {
+        // Create collapse button if expanded
+        const minusSign: SVGElement = createSvgElement('path', { d: `M${x - 7},${y} h14` });
+        const elements: SVGElement[] = [circleBorder, minusSign];
+        return group(elements, { class: 'gate-control gate-collapse' });
+    } else if (dataAttributes['zoom-in'] == 'true') {
+        // Create expand button if operation can be zoomed in
+        const plusSign: SVGElement = createSvgElement('path', { d: `M${x},${y - 7} v14 M${x - 7},${y} h14` });
+        const elements: SVGElement[] = [circleBorder, plusSign];
+        return group(elements, { class: 'gate-control gate-expand' });
+    }
+
+    return null;
+};
+
+/**
+ * Calculate position of gate.
+ *
+ * @param metadata Operation metadata.
+ * @param nestedDepth Depth of nested operations.
+ *
+ * @returns Coordinates of gate: [x1, y1, x2, y2].
+ */
+const _gatePosition = (metadata: Metadata, nestedDepth: number): [number, number, number, number] => {
+    const { x, width, type, targetsY } = metadata;
+
+    const ys = targetsY?.flatMap((y) => y as number[]) || [];
+    const maxY = Math.max(...ys);
+    const minY = Math.min(...ys);
+
+    let x1: number, y1: number, x2: number, y2: number;
+
+    switch (type) {
+        case GateType.Group:
+            const padding = groupBoxPadding - nestedDepth * nestedGroupPadding;
+
+            x1 = x - 2 * padding;
+            y1 = minY - gateHeight / 2 - padding;
+            x2 = width + 2 * padding;
+            y2 = maxY + +gateHeight / 2 + padding - (minY - gateHeight / 2 - padding);
+
+            return [x1, y1, x2, y2];
+
+        default:
+            x1 = x - width / 2;
+            y1 = minY - gateHeight / 2;
+            x2 = x + width;
+            y2 = maxY + gateHeight / 2;
+    }
+
+    return [x1, y1, x2, y2];
+};
+
 /**
  * Creates a measurement gate at position (x, y).
  *
@@ -116,15 +173,15 @@ const _formatGate = (metadata: Metadata, nestedDepth = 0): string => {
  *
  * @returns SVG representation of measurement gate.
  */
-const _measure = (x: number, y: number): string => {
+const _measure = (x: number, y: number): SVGElement => {
     x -= minGateWidth / 2;
     const width: number = minGateWidth,
         height = gateHeight;
     // Draw measurement box
-    const mBox: string = box(x, y - height / 2, width, height, 'gate-measure');
-    const mArc: string = arc(x + 5, y + 2, width / 2 - 5, height / 2 - 8);
-    const meter: string = line(x + width / 2, y + 8, x + width - 8, y - height / 2 + 8);
-    return [mBox, mArc, meter].join('\n');
+    const mBox: SVGElement = box(x, y - height / 2, width, height, 'gate-measure');
+    const mArc: SVGElement = arc(x + 5, y + 2, width / 2 - 5, height / 2 - 8);
+    const meter: SVGElement = line(x + width / 2, y + 8, x + width - 8, y - height / 2 + 8);
+    return group([mBox, mArc, meter]);
 };
 
 /**
@@ -146,11 +203,11 @@ const _unitary = (
     width: number,
     displayArgs?: string,
     renderDashedLine = true,
-): string => {
-    if (y.length === 0) return '';
+): SVGElement => {
+    if (y.length === 0) throw new Error(`Failed to render unitary gate (${label}): has no y-values`);
 
     // Render each group as a separate unitary boxes
-    const unitaryBoxes: string[] = y.map((group: number[]) => {
+    const unitaryBoxes: SVGElement[] = y.map((group: number[]) => {
         const maxY: number = group[group.length - 1],
             minY: number = group[0];
         const height: number = maxY - minY + gateHeight;
@@ -163,9 +220,11 @@ const _unitary = (
         const firstBox: number[] = y[0];
         const maxY: number = lastBox[lastBox.length - 1],
             minY: number = firstBox[0];
-        const vertLine: string = dashedLine(x, minY, x, maxY);
-        return [vertLine, ...unitaryBoxes].join('\n');
-    } else return unitaryBoxes.join('\n');
+        const vertLine: SVGElement = dashedLine(x, minY, x, maxY);
+        return group([vertLine, ...unitaryBoxes]);
+    }
+
+    return group(unitaryBoxes);
 };
 
 /**
@@ -187,18 +246,18 @@ const _unitaryBox = (
     width: number,
     height: number = gateHeight,
     displayArgs?: string,
-): string => {
+): SVGElement => {
     y -= gateHeight / 2;
-    const uBox: string = box(x - width / 2, y, width, height);
+    const uBox: SVGElement = box(x - width / 2, y, width, height);
     const labelY = y + height / 2 - (displayArgs == null ? 0 : 7);
-    const labelText: string = text(label, x, labelY);
+    const labelText: SVGElement = text(label, x, labelY);
     const elems = [uBox, labelText];
     if (displayArgs != null) {
         const argStrY = y + height / 2 + 8;
-        const argText: string = text(displayArgs, x, argStrY, argsFontSize);
+        const argText: SVGElement = text(displayArgs, x, argStrY, argsFontSize);
         elems.push(argText);
     }
-    return elems.join('\n');
+    return group(elems);
 };
 
 /**
@@ -209,28 +268,27 @@ const _unitaryBox = (
  *
  * @returns SVG representation of SWAP gate.
  */
-const _swap = (metadata: Metadata, nestedDepth: number): string => {
+const _swap = (metadata: Metadata, nestedDepth: number): SVGElement => {
     const { x, targetsY } = metadata;
 
     // Get SVGs of crosses
     const [x1, y1, x2, y2] = _gatePosition(metadata, nestedDepth);
     const ys = targetsY?.flatMap((y) => y as number[]) || [];
 
-    const bg: string = box(x1, y1, x2, y2, 'gate-swap');
-    const crosses: string[] = ys.map((y) => _cross(x, y));
-    const vertLine: string = line(x, ys[0], x, ys[1]);
-    return [bg, crosses, vertLine].join('\n');
+    const bg: SVGElement = box(x1, y1, x2, y2, 'gate-swap');
+    const crosses: SVGElement[] = ys.map((y) => _cross(x, y));
+    const vertLine: SVGElement = line(x, ys[0], x, ys[1]);
+    return group([bg, ...crosses, vertLine]);
 };
 /**
  * Creates the SVG for an X gate
  *
  * @returns SVG representation of X gate.
  */
-const _x = (metadata: Metadata, _: number): string => {
+const _x = (metadata: Metadata, _: number): SVGElement => {
     const { x, targetsY } = metadata;
     const ys = targetsY.flatMap((y) => y as number[]);
-    const circle: string = _oplus(x, ys[0]);
-    return circle;
+    return _oplus(x, ys[0]);
 };
 /**
  * Generates cross for display in SWAP gate.
@@ -240,11 +298,11 @@ const _x = (metadata: Metadata, _: number): string => {
  *
  * @returns SVG representation for cross.
  */
-const _cross = (x: number, y: number): string => {
+const _cross = (x: number, y: number): SVGElement => {
     const radius = 8;
-    const line1: string = line(x - radius, y - radius, x + radius, y + radius);
-    const line2: string = line(x - radius, y + radius, x + radius, y - radius);
-    return [line1, line2].join('\n');
+    const line1: SVGElement = line(x - radius, y - radius, x + radius, y + radius);
+    const line2: SVGElement = line(x - radius, y + radius, x + radius, y - radius);
+    return group([line1, line2]);
 };
 
 /**
@@ -254,8 +312,8 @@ const _cross = (x: number, y: number): string => {
  *
  * @returns SVG representation of controlled gate.
  */
-const _controlledGate = (metadata: Metadata, nestedDepth: number): string => {
-    const targetGateSvgs: string[] = [];
+const _controlledGate = (metadata: Metadata, nestedDepth: number): SVGElement => {
+    const targetGateSvgs: SVGElement[] = [];
     const { type, x, controlsY, label, displayArgs, width } = metadata;
     let { targetsY } = metadata;
 
@@ -276,12 +334,12 @@ const _controlledGate = (metadata: Metadata, nestedDepth: number): string => {
             throw new Error(`ERROR: Unrecognized gate: ${label} of type ${type}`);
     }
     // Get SVGs for control dots
-    const controlledDotsSvg: string[] = controlsY.map((y) => controlDot(x, y));
+    const controlledDotsSvg: SVGElement[] = controlsY.map((y) => controlDot(x, y));
     // Create control lines
     const maxY: number = Math.max(...controlsY, ...(targetsY as number[]));
     const minY: number = Math.min(...controlsY, ...(targetsY as number[]));
-    const vertLine: string = line(x, minY, x, maxY);
-    const svg: string = _createGate([vertLine, ...controlledDotsSvg, ...targetGateSvgs], metadata, nestedDepth);
+    const vertLine: SVGElement = line(x, minY, x, maxY);
+    const svg: SVGElement = _createGate([vertLine, ...controlledDotsSvg, ...targetGateSvgs], metadata, nestedDepth);
     return svg;
 };
 
@@ -294,41 +352,11 @@ const _controlledGate = (metadata: Metadata, nestedDepth: number): string => {
  *
  * @returns SVG representation of $\oplus$ symbol.
  */
-const _oplus = (x: number, y: number, r = 15): string => {
-    const circle = `<circle class="oplus" cx="${x}" cy="${y}" r="${r}"></circle>`;
-    const vertLine: string = line(x, y - r, x, y + r);
-    const horLine: string = line(x - r, y, x + r, y);
-    return group([circle, vertLine, horLine], { class: 'oplus' });
-};
-
-const _gatePosition = (metadata: Metadata, nestedDepth: number): [number, number, number, number] => {
-    const { x, width, type, targetsY } = metadata;
-
-    const ys = targetsY?.flatMap((y) => y as number[]) || [];
-    const maxY = Math.max(...ys);
-    const minY = Math.min(...ys);
-
-    let x1: number, y1: number, x2: number, y2: number;
-
-    switch (type) {
-        case GateType.Group:
-            const padding = groupBoxPadding - nestedDepth * nestedGroupPadding;
-
-            x1 = x - 2 * padding;
-            y1 = minY - gateHeight / 2 - padding;
-            x2 = width + 2 * padding;
-            y2 = maxY + +gateHeight / 2 + padding - (minY - gateHeight / 2 - padding);
-
-            return [x1, y1, x2, y2];
-
-        default:
-            x1 = x - width / 2;
-            y1 = minY - gateHeight / 2;
-            x2 = x + width;
-            y2 = maxY + gateHeight / 2;
-    }
-
-    return [x1, y1, x2, y2];
+const _oplus = (x: number, y: number, r = 15): SVGElement => {
+    const circleBorder: SVGElement = circle(x, y, r);
+    const vertLine: SVGElement = line(x, y - r, x, y + r);
+    const horLine: SVGElement = line(x - r, y, x + r, y);
+    return group([circleBorder, vertLine, horLine], { class: 'oplus' });
 };
 
 /**
@@ -339,14 +367,15 @@ const _gatePosition = (metadata: Metadata, nestedDepth: number): [number, number
  *
  * @returns SVG representation of gate.
  */
-const _groupedOperations = (metadata: Metadata, nestedDepth: number): string => {
+const _groupedOperations = (metadata: Metadata, nestedDepth: number): SVGElement => {
     const { children } = metadata;
     const [x1, y1, x2, y2] = _gatePosition(metadata, nestedDepth);
-    const childrenGates: string = children != null ? formatGates(children as Metadata[], nestedDepth + 1) : '';
 
     // Draw dashed box around children gates
-    const box: string = dashedBox(x1, y1, x2, y2);
-    return _createGate([box, childrenGates], metadata, nestedDepth);
+    const box: SVGElement = dashedBox(x1, y1, x2, y2);
+    const elems: SVGElement[] = [box];
+    if (children != null) elems.push(formatGates(children as Metadata[], nestedDepth + 1));
+    return _createGate(elems, metadata, nestedDepth);
 };
 
 /**
@@ -357,7 +386,7 @@ const _groupedOperations = (metadata: Metadata, nestedDepth: number): string =>
  *
  * @returns SVG representation of gate.
  */
-const _classicalControlled = (metadata: Metadata, padding: number = groupBoxPadding): string => {
+const _classicalControlled = (metadata: Metadata, padding: number = groupBoxPadding): SVGElement => {
     const { controlsY, dataAttributes } = metadata;
     const targetsY: number[] = metadata.targetsY as number[];
     const children: Metadata[][] = metadata.children as Metadata[][];
@@ -365,22 +394,31 @@ const _classicalControlled = (metadata: Metadata, padding: number = groupBoxPadd
 
     const controlY = controlsY[0];
 
-    // Get SVG for gates controlled on 0
-    let childrenZero: string = children != null ? formatGates(children[0]) : '';
-    childrenZero = `<g class="gates-zero">\r\n${childrenZero}</g>`;
+    const elems: SVGElement[] = [];
+
+    if (children != null) {
+        if (children.length !== 2)
+            throw new Error(`Invalid number of children found for classically-controlled gate: ${children.length}`);
 
-    // Get SVG for gates controlled on 1
-    let childrenOne: string = children != null ? formatGates(children[1]) : '';
-    childrenOne = `<g class="gates-one">\r\n${childrenOne}</g>`;
+        // Get SVG for gates controlled on 0
+        const childrenZero: SVGElement = formatGates(children[0]);
+        childrenZero.setAttribute('class', 'gates-zero');
+        elems.push(childrenZero);
+
+        // Get SVG for gates controlled on 1
+        const childrenOne: SVGElement = formatGates(children[1]);
+        childrenOne.setAttribute('class', 'gates-one');
+        elems.push(childrenOne);
+    }
 
     // Draw control button and attached dashed line to dashed box
     const controlCircleX: number = x + controlBtnRadius;
-    const controlCircle: string = _controlCircle(controlCircleX, controlY);
+    const controlCircle: SVGElement = _controlCircle(controlCircleX, controlY);
     const lineY1: number = controlY + controlBtnRadius,
         lineY2: number = controlY + classicalRegHeight / 2;
-    const vertLine: string = dashedLine(controlCircleX, lineY1, controlCircleX, lineY2, 'classical-line');
+    const vertLine: SVGElement = dashedLine(controlCircleX, lineY1, controlCircleX, lineY2, 'classical-line');
     x += controlBtnOffset;
-    const horLine: string = dashedLine(controlCircleX, lineY2, x, lineY2, 'classical-line');
+    const horLine: SVGElement = dashedLine(controlCircleX, lineY2, x, lineY2, 'classical-line');
 
     width = width - controlBtnOffset + (padding - groupBoxPadding) * 2;
     x += groupBoxPadding - padding;
@@ -388,7 +426,9 @@ const _classicalControlled = (metadata: Metadata, padding: number = groupBoxPadd
     const height: number = targetsY[1] - targetsY[0] + gateHeight + padding * 2;
 
     // Draw dashed box around children gates
-    const box: string = dashedBox(x, y, width, height, 'classical-container');
+    const box: SVGElement = dashedBox(x, y, width, height, 'classical-container');
+
+    elems.push(...[horLine, vertLine, controlCircle, box]);
 
     // Display controlled operation in initial "unknown" state
     const attributes: { [attr: string]: string } = {
@@ -397,7 +437,7 @@ const _classicalControlled = (metadata: Metadata, padding: number = groupBoxPadd
     if (dataAttributes != null)
         Object.entries(dataAttributes).forEach(([attr, val]) => (attributes[`data-${attr}`] = val));
 
-    return group([horLine, vertLine, controlCircle, childrenZero, childrenOne, box], attributes);
+    return group(elems, attributes);
 };
 
 /**
@@ -406,26 +446,22 @@ const _classicalControlled = (metadata: Metadata, padding: number = groupBoxPadd
  *
  * @param x   x coord.
  * @param y   y coord.
- * @param cls Class name.
  * @param r   Radius of circle.
  *
  * @returns SVG representation of control circle.
  */
-const _controlCircle = (x: number, y: number, r: number = controlBtnRadius): string =>
-    `<g class="classically-controlled-btn">
-<circle cx="${x}" cy="${y}" r="${r}"></circle>
-<text font-size="${labelFontSize}" x="${x}" y="${y}">?</text>
-</g>`;
+const _controlCircle = (x: number, y: number, r: number = controlBtnRadius): SVGElement =>
+    group([circle(x, y, r), text('?', x, y, labelFontSize)], { class: 'classically-controlled-btn' });
 
 export {
     formatGates,
     _formatGate,
     _createGate,
+    _zoomButton,
     _measure,
     _unitary,
     _swap,
     _controlledGate,
     _groupedOperations,
     _classicalControlled,
-    _gateControls,
 };
diff --git a/src/formatters/inputFormatter.ts b/src/formatters/inputFormatter.ts
index a11275dd..e3acf982 100644
--- a/src/formatters/inputFormatter.ts
+++ b/src/formatters/inputFormatter.ts
@@ -4,6 +4,7 @@
 import { Qubit } from '../circuit';
 import { RegisterType, RegisterMap, RegisterMetadata } from '../register';
 import { leftPadding, startY, registerHeight, classicalRegHeight } from '../constants';
+import { group, text } from './formatUtils';
 
 /**
  * `formatInputs` takes in an array of Qubits and outputs the SVG string of formatted
@@ -14,8 +15,8 @@ import { leftPadding, startY, registerHeight, classicalRegHeight } from '../cons
  * @returns returns the SVG string of formatted qubit wires, a mapping from registers
  *          to y coord and total SVG height.
  */
-const formatInputs = (qubits: Qubit[]): { qubitWires: string; registers: RegisterMap; svgHeight: number } => {
-    const qubitWires: string[] = [];
+const formatInputs = (qubits: Qubit[]): { qubitWires: SVGElement; registers: RegisterMap; svgHeight: number } => {
+    const qubitWires: SVGElement[] = [];
     const registers: RegisterMap = {};
 
     let currY: number = startY;
@@ -44,7 +45,7 @@ const formatInputs = (qubits: Qubit[]): { qubitWires: string; registers: Registe
     });
 
     return {
-        qubitWires: qubitWires.join('\n'),
+        qubitWires: group(qubitWires),
         registers,
         svgHeight: currY,
     };
@@ -57,7 +58,11 @@ const formatInputs = (qubits: Qubit[]): { qubitWires: string; registers: Registe
  *
  * @returns SVG text component for the input register.
  */
-const _qubitInput = (y: number): string =>
-    `<text x="${leftPadding}" y="${y}" dominant-baseline="middle" text-anchor="start">|0⟩</text>`;
+const _qubitInput = (y: number): SVGElement => {
+    const el: SVGElement = text('|0⟩', leftPadding, y, 16);
+    el.setAttribute('text-anchor', 'start');
+    el.setAttribute('dominant-baseline', 'middle');
+    return el;
+};
 
 export { formatInputs, _qubitInput };
diff --git a/src/formatters/registerFormatter.ts b/src/formatters/registerFormatter.ts
index 6c31dba2..3d9637c9 100644
--- a/src/formatters/registerFormatter.ts
+++ b/src/formatters/registerFormatter.ts
@@ -4,7 +4,7 @@
 import { RegisterMap } from '../register';
 import { regLineStart } from '../constants';
 import { Metadata, GateType } from '../metadata';
-import { line } from './formatUtils';
+import { group, line, text } from './formatUtils';
 
 /**
  * Generate the SVG representation of the qubit register wires in `registers` and the classical wires
@@ -16,8 +16,8 @@ import { line } from './formatUtils';
  *
  * @returns SVG representation of register wires.
  */
-const formatRegisters = (registers: RegisterMap, measureGates: Metadata[], endX: number): string => {
-    const formattedRegs: string[] = [];
+const formatRegisters = (registers: RegisterMap, measureGates: Metadata[], endX: number): SVGElement => {
+    const formattedRegs: SVGElement[] = [];
     // Render qubit wires
     for (const qId in registers) {
         formattedRegs.push(_qubitRegister(Number(qId), endX, registers[qId].y));
@@ -30,7 +30,7 @@ const formatRegisters = (registers: RegisterMap, measureGates: Metadata[], endX:
             formattedRegs.push(_classicalRegister(x, gateY, endX, y));
         });
     });
-    return formattedRegs.join('\n');
+    return group(formattedRegs);
 };
 
 /**
@@ -43,40 +43,41 @@ const formatRegisters = (registers: RegisterMap, measureGates: Metadata[], endX:
  *
  * @returns SVG representation of the given classical register.
  */
-const _classicalRegister = (startX: number, gateY: number, endX: number, wireY: number): string => {
+const _classicalRegister = (startX: number, gateY: number, endX: number, wireY: number): SVGElement => {
     const wirePadding = 1;
     // Draw vertical lines
-    const vLine1: string = line(
+    const vLine1: SVGElement = line(
         startX + wirePadding,
         gateY,
         startX + wirePadding,
         wireY - wirePadding,
         'register-classical',
     );
-    const vLine2: string = line(
+    const vLine2: SVGElement = line(
         startX - wirePadding,
         gateY,
         startX - wirePadding,
         wireY + wirePadding,
         'register-classical',
     );
+
     // Draw horizontal lines
-    const hLine1: string = line(
+    const hLine1: SVGElement = line(
         startX + wirePadding,
         wireY - wirePadding,
         endX,
         wireY - wirePadding,
         'register-classical',
     );
-    const hLine2: string = line(
+    const hLine2: SVGElement = line(
         startX - wirePadding,
         wireY + wirePadding,
         endX,
         wireY + wirePadding,
         'register-classical',
     );
-    const svg: string = [vLine1, vLine2, hLine1, hLine2].join('\n');
-    return svg;
+
+    return group([vLine1, vLine2, hLine1, hLine2]);
 };
 
 /**
@@ -89,12 +90,15 @@ const _classicalRegister = (startX: number, gateY: number, endX: number, wireY:
  *
  * @returns SVG representation of the given qubit register.
  */
-const _qubitRegister = (qId: number, endX: number, y: number, labelOffset = 16): string => {
-    const labelY: number = y - labelOffset;
-    const wire: string = line(regLineStart, y, endX, y);
-    const label = `<text x="${regLineStart}" y="${labelY}" dominant-baseline="hanging" text-anchor="start" font-size="75%">q${qId}</text>`;
-    const svg: string = [wire, label].join('\n');
-    return svg;
+const _qubitRegister = (qId: number, endX: number, y: number, labelOffset = 16): SVGElement => {
+    const wire: SVGElement = line(regLineStart, y, endX, y);
+
+    const label: SVGElement = text(`q${qId}`, regLineStart, y - labelOffset);
+    label.setAttribute('dominant-baseline', 'hanging');
+    label.setAttribute('text-anchor', 'start');
+    label.setAttribute('font-size', '75%');
+
+    return group([wire, label]);
 };
 
 export { formatRegisters, _classicalRegister, _qubitRegister };
diff --git a/src/sqore.ts b/src/sqore.ts
index b043d2e1..27656cb6 100644
--- a/src/sqore.ts
+++ b/src/sqore.ts
@@ -9,6 +9,7 @@ import { ConditionalRender, Circuit, Operation } from './circuit';
 import { Metadata, GateType } from './metadata';
 import { StyleConfig, style, STYLES } from './styles';
 import { createUUID } from './utils';
+import { svgNS } from './constants';
 
 /**
  * Contains metadata for visualization.
@@ -19,7 +20,7 @@ interface ComposedSqore {
     /** Height of visualization. */
     height: number;
     /** SVG elements the make up the visualization. */
-    elements: string[];
+    elements: SVGElement[];
 }
 
 /**
@@ -109,7 +110,9 @@ export class Sqore {
     private renderCircuit(container: HTMLElement, circuit: Circuit): void {
         // Create visualization components
         const composedSqore: ComposedSqore = this.compose(circuit);
-        container.innerHTML = this.generateSvg(composedSqore);
+        const svg: SVGElement = this.generateSvg(composedSqore);
+        container.innerHTML = '';
+        container.appendChild(svg);
         this.addGateClickHandlers(container, circuit);
     }
 
@@ -139,9 +142,9 @@ export class Sqore {
         const { qubits, operations } = circuit;
         const { qubitWires, registers, svgHeight } = formatInputs(qubits);
         const { metadataList, svgWidth } = processOperations(operations, registers);
-        const formattedGates: string = formatGates(metadataList);
+        const formattedGates: SVGElement = formatGates(metadataList);
         const measureGates: Metadata[] = flatten(metadataList).filter(({ type }) => type === GateType.Measure);
-        const formattedRegs: string = formatRegisters(registers, measureGates, svgWidth);
+        const formattedRegs: SVGElement = formatRegisters(registers, measureGates, svgWidth);
 
         const composedSqore: ComposedSqore = {
             width: svgWidth,
@@ -152,22 +155,31 @@ export class Sqore {
     }
 
     /**
-     * Generates visualization of `composedSqore` as an SVG string.
+     * Generates visualization of `composedSqore` as an SVG.
      *
      * @param composedSqore ComposedSqore to be visualized.
      *
      * @returns SVG representation of circuit visualization.
      */
-    // TODO: Return an SVG node instead and attach interactivity.
-    private generateSvg(composedSqore: ComposedSqore): string {
+    private generateSvg(composedSqore: ComposedSqore): SVGElement {
+        const { width, height, elements } = composedSqore;
         const uuid: string = createUUID();
 
-        return `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="${uuid}" class="qviz" width="${
-            composedSqore.width
-        }" height="${composedSqore.height}">
-    ${style(this.style)}
-    ${composedSqore.elements.join('\n')}
-</svg>`;
+        const svg: SVGElement = document.createElementNS(svgNS, 'svg');
+        svg.setAttribute('id', uuid);
+        svg.setAttribute('class', 'qviz');
+        svg.setAttribute('width', width.toString());
+        svg.setAttribute('height', height.toString());
+
+        // Add styles
+        const css = document.createElement('style');
+        css.innerHTML = style(this.style);
+        svg.appendChild(css);
+
+        // Add body elements
+        elements.forEach((element: SVGElement) => svg.appendChild(element));
+
+        return svg;
     }
 
     /**
@@ -182,13 +194,16 @@ export class Sqore {
     private fillGateRegistry(operation: Operation, id: string): void {
         if (operation.dataAttributes == null) operation.dataAttributes = {};
         operation.dataAttributes['id'] = id;
+        // By default, operations cannot be zoomed-out
         operation.dataAttributes['zoom-out'] = 'false';
         this.gateRegistry[id] = operation;
         operation.children?.forEach((childOp, i) => {
             this.fillGateRegistry(childOp, `${id}-${i}`);
             if (childOp.dataAttributes == null) childOp.dataAttributes = {};
+            // Children operations can be zoomed out
             childOp.dataAttributes['zoom-out'] = 'true';
         });
+        // Composite operations can be zoomed in
         operation.dataAttributes['zoom-in'] = (operation.children != null).toString();
     }
 
@@ -226,8 +241,8 @@ export class Sqore {
      * @param container HTML element containing visualized circuit.
      *
      */
-    private addClassicalControlHandlers(container: Element | null): Element | null {
-        container?.querySelectorAll('.classically-controlled-btn').forEach((btn) => {
+    private addClassicalControlHandlers(container: HTMLElement): void {
+        container.querySelectorAll('.classically-controlled-btn').forEach((btn) => {
             // Zoom in on clicked gate
             btn.addEventListener('click', (evt: Event) => {
                 const textSvg = btn.querySelector('text');
@@ -266,8 +281,6 @@ export class Sqore {
                 evt.stopPropagation();
             });
         });
-
-        return container;
     }
 
     /**
@@ -278,7 +291,7 @@ export class Sqore {
      *
      */
     private addZoomHandlers(container: HTMLElement, circuit: Circuit): void {
-        container.querySelectorAll(`.gate .gate-control`).forEach((ctrl) => {
+        container.querySelectorAll('.gate .gate-control').forEach((ctrl) => {
             // Zoom in on clicked gate
             ctrl.addEventListener('click', (ev: Event) => {
                 const gateId: string | null | undefined = ctrl.parentElement?.getAttribute('data-id');
diff --git a/src/styles.ts b/src/styles.ts
index ee5a6ed9..01192db9 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -84,7 +84,7 @@ export const STYLES: { [name: string]: StyleConfig } = {
 };
 
 /**
- * CSS style script to be injected into visualization HTML string.
+ * CSS style script to be injected into visualization SVG.
  *
  * @param customStyle Custom style configuration.
  *
@@ -92,8 +92,13 @@ export const STYLES: { [name: string]: StyleConfig } = {
  */
 export const style = (customStyle: StyleConfig = {}): string => {
     const styleConfig = { ...defaultStyle, ...customStyle };
-    return `
-<style>
+
+    return `${_defaultGates(styleConfig)}
+    ${_classicallyControlledGates(styleConfig)}
+    ${_expandCollapse}`;
+};
+
+const _defaultGates = (styleConfig: StyleConfig): string => `
     line,
     circle,
     rect {
@@ -130,15 +135,10 @@ export const style = (customStyle: StyleConfig = {}): string => {
     }
     .register-classical {
         stroke-width: ${(styleConfig.lineWidth || 0) / 2};
-    }
-    <!-- Classically controlled gates -->
-    .hidden {
-        display: none;
-    }
-    .classically-controlled-unknown {
-        opacity: 0.25;
-    }
-    <!-- Gate outline -->
+    }`;
+
+const _classicallyControlledGates = (styleConfig: StyleConfig): string => {
+    const gateOutline = `
     .classically-controlled-one .classical-container,
     .classically-controlled-one .classical-line {
         stroke: ${styleConfig.classicalOne};
@@ -152,8 +152,8 @@ export const style = (customStyle: StyleConfig = {}): string => {
         stroke-width: ${(styleConfig.lineWidth || 0) + 0.3};
         fill: ${styleConfig.classicalZero};
         fill-opacity: 0.1;
-    }
-    <!-- Control button -->
+    }`;
+    const controlBtn = `
     .classically-controlled-btn {
         cursor: pointer;
     }
@@ -165,8 +165,9 @@ export const style = (customStyle: StyleConfig = {}): string => {
     }
     .classically-controlled-zero .classically-controlled-btn {
         fill: ${styleConfig.classicalZero};
-    }
-    <!-- Control button text -->
+    }`;
+
+    const controlBtnText = `
     .classically-controlled-btn text {
         dominant-baseline: middle;
         text-anchor: middle;
@@ -181,8 +182,22 @@ export const style = (customStyle: StyleConfig = {}): string => {
     }
     .classically-controlled-zero .classically-controlled-btn text {
         fill: ${styleConfig.classicalZeroText};
+    }`;
+
+    return `
+    .hidden {
+        display: none;
     }
+    .classically-controlled-unknown {
+        opacity: 0.25;
+    }
+    
+    ${gateOutline}
+    ${controlBtn}
+    ${controlBtnText}`;
+};
 
+const _expandCollapse = `
     .qviz .gate-collapse,
     .qviz .gate-expand {
         opacity: 0;
@@ -218,7 +233,4 @@ export const style = (customStyle: StyleConfig = {}): string => {
         visibility: visible;
         opacity: 1;
         transition: opacity 1s;
-    }
-</style>
-`;
-};
+    }`;


Test patch:
diff --git a/__tests__/__snapshots__/gateFormatter.test.ts.snap b/__tests__/__snapshots__/gateFormatter.test.ts.snap
index 0f559d9b..e75b6f54 100644
--- a/__tests__/__snapshots__/gateFormatter.test.ts.snap
+++ b/__tests__/__snapshots__/gateFormatter.test.ts.snap
@@ -1,727 +1,2991 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Testing _classicalControlled No htmlClass 1`] = `
-"<g class='classically-controlled-group classically-controlled-unknown'>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"120\\" y1=\\"180\\" y2=\\"180\\" stroke-dasharray=\\"8, 8\\"></line>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"95\\" y1=\\"175\\" y2=\\"180\\" stroke-dasharray=\\"8, 8\\"></line>
-<g class=\\"classically-controlled-btn\\">
-<circle cx=\\"95\\" cy=\\"160\\" r=\\"15\\"></circle>
-<text font-size=\\"14\\" x=\\"95\\" y=\\"160\\">?</text>
+<g
+  class="classically-controlled-group classically-controlled-unknown"
+>
+  <g
+    class="gates-zero"
+  />
+  <g
+    class="gates-one"
+  >
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="120"
+    y1="180"
+    y2="180"
+  />
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="95"
+    y1="175"
+    y2="180"
+  />
+  <g
+    class="classically-controlled-btn"
+  >
+    <circle
+      cx="95"
+      cy="160"
+      r="15"
+    />
+    <text
+      font-size="14"
+      x="95"
+      y="160"
+    >
+      ?
+    </text>
+  </g>
+  <rect
+    class="classical-container"
+    fill-opacity="0"
+    height="120"
+    stroke-dasharray="8, 8"
+    width="80"
+    x="120"
+    y="10"
+  />
 </g>
-<g class=\\"gates-zero\\">
-</g>
-<g class=\\"gates-one\\">
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"40\\">X</text>
-</g></g>
-<rect class=\\"classical-container\\" x=\\"120\\" y=\\"10\\" width=\\"80\\" height=\\"120\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-</g>"
 `;
 
 exports[`Testing _classicalControlled change padding 1`] = `
-"<g class='classically-controlled-group classically-controlled-unknown'>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"120\\" y1=\\"180\\" y2=\\"180\\" stroke-dasharray=\\"8, 8\\"></line>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"95\\" y1=\\"175\\" y2=\\"180\\" stroke-dasharray=\\"8, 8\\"></line>
-<g class=\\"classically-controlled-btn\\">
-<circle cx=\\"95\\" cy=\\"160\\" r=\\"15\\"></circle>
-<text font-size=\\"14\\" x=\\"95\\" y=\\"160\\">?</text>
-</g>
-<g class=\\"gates-zero\\">
+<g
+  class="classically-controlled-group classically-controlled-unknown"
+>
+  <g
+    class="gates-zero"
+  />
+  <g
+    class="gates-one"
+  >
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="120"
+    y1="180"
+    y2="180"
+  />
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="95"
+    y1="175"
+    y2="180"
+  />
+  <g
+    class="classically-controlled-btn"
+  >
+    <circle
+      cx="95"
+      cy="160"
+      r="15"
+    />
+    <text
+      font-size="14"
+      x="95"
+      y="160"
+    >
+      ?
+    </text>
+  </g>
+  <rect
+    class="classical-container"
+    fill-opacity="0"
+    height="140"
+    stroke-dasharray="8, 8"
+    width="100"
+    x="110"
+    y="0"
+  />
 </g>
-<g class=\\"gates-one\\">
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"40\\">X</text>
-</g></g>
-<rect class=\\"classical-container\\" x=\\"110\\" y=\\"0\\" width=\\"100\\" height=\\"140\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-</g>"
 `;
 
 exports[`Testing _classicalControlled multiple 'zero'/'one' children 1`] = `
-"<g class='classically-controlled-group classically-controlled-unknown'>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"120\\" y1=\\"100\\" y2=\\"100\\" stroke-dasharray=\\"8, 8\\"></line>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"95\\" y1=\\"95\\" y2=\\"100\\" stroke-dasharray=\\"8, 8\\"></line>
-<g class=\\"classically-controlled-btn\\">
-<circle cx=\\"95\\" cy=\\"80\\" r=\\"15\\"></circle>
-<text font-size=\\"14\\" x=\\"95\\" y=\\"80\\">?</text>
-</g>
-<g class=\\"gates-zero\\">
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"130\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"150\\" y=\\"40\\">X</text>
-</g>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"190\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"210\\" y=\\"40\\">Z</text>
-</g></g>
-<g class=\\"gates-one\\">
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"130\\" y=\\"100\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"150\\" y=\\"120\\">H</text>
-</g></g>
-<rect class=\\"classical-container\\" x=\\"120\\" y=\\"10\\" width=\\"120\\" height=\\"140\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-</g>"
+<g
+  class="classically-controlled-group classically-controlled-unknown"
+>
+  <g
+    class="gates-zero"
+  >
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="130"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="150"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="190"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="210"
+            y="40"
+          >
+            Z
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g
+    class="gates-one"
+  >
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="130"
+            y="100"
+          />
+          <text
+            font-size="14"
+            x="150"
+            y="120"
+          >
+            H
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="120"
+    y1="100"
+    y2="100"
+  />
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="95"
+    y1="95"
+    y2="100"
+  />
+  <g
+    class="classically-controlled-btn"
+  >
+    <circle
+      cx="95"
+      cy="80"
+      r="15"
+    />
+    <text
+      font-size="14"
+      x="95"
+      y="80"
+    >
+      ?
+    </text>
+  </g>
+  <rect
+    class="classical-container"
+    fill-opacity="0"
+    height="140"
+    stroke-dasharray="8, 8"
+    width="120"
+    x="120"
+    y="10"
+  />
+</g>
 `;
 
 exports[`Testing _classicalControlled nested children 1`] = `
-"<g class='classically-controlled-group classically-controlled-unknown'>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"120\\" y1=\\"180\\" y2=\\"180\\" stroke-dasharray=\\"8, 8\\"></line>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"95\\" y1=\\"175\\" y2=\\"180\\" stroke-dasharray=\\"8, 8\\"></line>
-<g class=\\"classically-controlled-btn\\">
-<circle cx=\\"95\\" cy=\\"160\\" r=\\"15\\"></circle>
-<text font-size=\\"14\\" x=\\"95\\" y=\\"160\\">?</text>
-</g>
-<g class=\\"gates-zero\\">
-</g>
-<g class=\\"gates-one\\">
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"40\\">X</text>
-</g>
-<g class='classically-controlled-group classically-controlled-unknown'>
-<line class=\\"classical-line\\" x1=\\"165\\" x2=\\"190\\" y1=\\"240\\" y2=\\"240\\" stroke-dasharray=\\"8, 8\\"></line>
-<line class=\\"classical-line\\" x1=\\"165\\" x2=\\"165\\" y1=\\"235\\" y2=\\"240\\" stroke-dasharray=\\"8, 8\\"></line>
-<g class=\\"classically-controlled-btn\\">
-<circle cx=\\"165\\" cy=\\"220\\" r=\\"15\\"></circle>
-<text font-size=\\"14\\" x=\\"165\\" y=\\"220\\">?</text>
-</g>
-<g class=\\"gates-zero\\">
-</g>
-<g class=\\"gates-one\\">
-<g class='gate'>
-<line x1=\\"180\\" x2=\\"180\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"180\\" cy=\\"100\\" r=\\"5\\"></circle>
-<g class='oplus'>
-<circle class=\\"oplus\\" cx=\\"180\\" cy=\\"40\\" r=\\"15\\"></circle>
-<line x1=\\"180\\" x2=\\"180\\" y1=\\"25\\" y2=\\"55\\"></line>
-<line x1=\\"165\\" x2=\\"195\\" y1=\\"40\\" y2=\\"40\\"></line>
-</g>
-</g></g>
-<rect class=\\"classical-container\\" x=\\"190\\" y=\\"10\\" width=\\"20\\" height=\\"120\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-</g></g>
-<rect class=\\"classical-container\\" x=\\"120\\" y=\\"10\\" width=\\"100\\" height=\\"120\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-</g>"
+<g
+  class="classically-controlled-group classically-controlled-unknown"
+>
+  <g
+    class="gates-zero"
+  />
+  <g
+    class="gates-one"
+  >
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+    <g
+      class="classically-controlled-group classically-controlled-unknown"
+    >
+      <g
+        class="gates-zero"
+      />
+      <g
+        class="gates-one"
+      >
+        <g
+          class="gate"
+        >
+          <line
+            x1="180"
+            x2="180"
+            y1="40"
+            y2="100"
+          />
+          <circle
+            class="control-dot"
+            cx="180"
+            cy="100"
+            r="5"
+          />
+          <g
+            class="oplus"
+          >
+            <circle
+              cx="180"
+              cy="40"
+              r="15"
+            />
+            <line
+              x1="180"
+              x2="180"
+              y1="25"
+              y2="55"
+            />
+            <line
+              x1="165"
+              x2="195"
+              y1="40"
+              y2="40"
+            />
+          </g>
+        </g>
+      </g>
+      <line
+        class="classical-line"
+        stroke-dasharray="8, 8"
+        x1="165"
+        x2="190"
+        y1="240"
+        y2="240"
+      />
+      <line
+        class="classical-line"
+        stroke-dasharray="8, 8"
+        x1="165"
+        x2="165"
+        y1="235"
+        y2="240"
+      />
+      <g
+        class="classically-controlled-btn"
+      >
+        <circle
+          cx="165"
+          cy="220"
+          r="15"
+        />
+        <text
+          font-size="14"
+          x="165"
+          y="220"
+        >
+          ?
+        </text>
+      </g>
+      <rect
+        class="classical-container"
+        fill-opacity="0"
+        height="120"
+        stroke-dasharray="8, 8"
+        width="20"
+        x="190"
+        y="10"
+      />
+    </g>
+  </g>
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="120"
+    y1="180"
+    y2="180"
+  />
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="95"
+    y1="175"
+    y2="180"
+  />
+  <g
+    class="classically-controlled-btn"
+  >
+    <circle
+      cx="95"
+      cy="160"
+      r="15"
+    />
+    <text
+      font-size="14"
+      x="95"
+      y="160"
+    >
+      ?
+    </text>
+  </g>
+  <rect
+    class="classical-container"
+    fill-opacity="0"
+    height="120"
+    stroke-dasharray="8, 8"
+    width="100"
+    x="120"
+    y="10"
+  />
+</g>
 `;
 
 exports[`Testing _classicalControlled one 'one' child 1`] = `
-"<g class='classically-controlled-group classically-controlled-unknown'>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"120\\" y1=\\"100\\" y2=\\"100\\" stroke-dasharray=\\"8, 8\\"></line>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"95\\" y1=\\"95\\" y2=\\"100\\" stroke-dasharray=\\"8, 8\\"></line>
-<g class=\\"classically-controlled-btn\\">
-<circle cx=\\"95\\" cy=\\"80\\" r=\\"15\\"></circle>
-<text font-size=\\"14\\" x=\\"95\\" y=\\"80\\">?</text>
-</g>
-<g class=\\"gates-zero\\">
+<g
+  class="classically-controlled-group classically-controlled-unknown"
+>
+  <g
+    class="gates-zero"
+  />
+  <g
+    class="gates-one"
+  >
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="130"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="150"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="120"
+    y1="100"
+    y2="100"
+  />
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="95"
+    y1="95"
+    y2="100"
+  />
+  <g
+    class="classically-controlled-btn"
+  >
+    <circle
+      cx="95"
+      cy="80"
+      r="15"
+    />
+    <text
+      font-size="14"
+      x="95"
+      y="80"
+    >
+      ?
+    </text>
+  </g>
+  <rect
+    class="classical-container"
+    fill-opacity="0"
+    height="NaN"
+    stroke-dasharray="8, 8"
+    width="60"
+    x="120"
+    y="10"
+  />
 </g>
-<g class=\\"gates-one\\">
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"130\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"150\\" y=\\"40\\">X</text>
-</g></g>
-<rect class=\\"classical-container\\" x=\\"120\\" y=\\"10\\" width=\\"60\\" height=\\"NaN\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-</g>"
 `;
 
 exports[`Testing _classicalControlled one 'zero' child 1`] = `
-"<g class='classically-controlled-group classically-controlled-unknown'>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"120\\" y1=\\"100\\" y2=\\"100\\" stroke-dasharray=\\"8, 8\\"></line>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"95\\" y1=\\"95\\" y2=\\"100\\" stroke-dasharray=\\"8, 8\\"></line>
-<g class=\\"classically-controlled-btn\\">
-<circle cx=\\"95\\" cy=\\"80\\" r=\\"15\\"></circle>
-<text font-size=\\"14\\" x=\\"95\\" y=\\"80\\">?</text>
+<g
+  class="classically-controlled-group classically-controlled-unknown"
+>
+  <g
+    class="gates-zero"
+  >
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="130"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="150"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g
+    class="gates-one"
+  />
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="120"
+    y1="100"
+    y2="100"
+  />
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="95"
+    y1="95"
+    y2="100"
+  />
+  <g
+    class="classically-controlled-btn"
+  >
+    <circle
+      cx="95"
+      cy="80"
+      r="15"
+    />
+    <text
+      font-size="14"
+      x="95"
+      y="80"
+    >
+      ?
+    </text>
+  </g>
+  <rect
+    class="classical-container"
+    fill-opacity="0"
+    height="NaN"
+    stroke-dasharray="8, 8"
+    width="60"
+    x="120"
+    y="10"
+  />
 </g>
-<g class=\\"gates-zero\\">
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"130\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"150\\" y=\\"40\\">X</text>
-</g></g>
-<g class=\\"gates-one\\">
-</g>
-<rect class=\\"classical-container\\" x=\\"120\\" y=\\"10\\" width=\\"60\\" height=\\"NaN\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-</g>"
 `;
 
 exports[`Testing _classicalControlled one 'zero'/'one' child 1`] = `
-"<g class='classically-controlled-group classically-controlled-unknown'>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"120\\" y1=\\"100\\" y2=\\"100\\" stroke-dasharray=\\"8, 8\\"></line>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"95\\" y1=\\"95\\" y2=\\"100\\" stroke-dasharray=\\"8, 8\\"></line>
-<g class=\\"classically-controlled-btn\\">
-<circle cx=\\"95\\" cy=\\"80\\" r=\\"15\\"></circle>
-<text font-size=\\"14\\" x=\\"95\\" y=\\"80\\">?</text>
-</g>
-<g class=\\"gates-zero\\">
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"130\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"150\\" y=\\"40\\">X</text>
-</g></g>
-<g class=\\"gates-one\\">
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"130\\" y=\\"100\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"150\\" y=\\"120\\">H</text>
-</g></g>
-<rect class=\\"classical-container\\" x=\\"120\\" y=\\"10\\" width=\\"60\\" height=\\"140\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-</g>"
+<g
+  class="classically-controlled-group classically-controlled-unknown"
+>
+  <g
+    class="gates-zero"
+  >
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="130"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="150"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g
+    class="gates-one"
+  >
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="130"
+            y="100"
+          />
+          <text
+            font-size="14"
+            x="150"
+            y="120"
+          >
+            H
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="120"
+    y1="100"
+    y2="100"
+  />
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="95"
+    y1="95"
+    y2="100"
+  />
+  <g
+    class="classically-controlled-btn"
+  >
+    <circle
+      cx="95"
+      cy="80"
+      r="15"
+    />
+    <text
+      font-size="14"
+      x="95"
+      y="80"
+    >
+      ?
+    </text>
+  </g>
+  <rect
+    class="classical-container"
+    fill-opacity="0"
+    height="140"
+    stroke-dasharray="8, 8"
+    width="60"
+    x="120"
+    y="10"
+  />
+</g>
 `;
 
 exports[`Testing _controlledGate CNOT gate 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<g class='oplus'>
-<circle class=\\"oplus\\" cx=\\"80\\" cy=\\"100\\" r=\\"15\\"></circle>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"85\\" y2=\\"115\\"></line>
-<line x1=\\"65\\" x2=\\"95\\" y1=\\"100\\" y2=\\"100\\"></line>
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="100"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <g
+    class="oplus"
+  >
+    <circle
+      cx="80"
+      cy="100"
+      r="15"
+    />
+    <line
+      x1="80"
+      x2="80"
+      y1="85"
+      y2="115"
+    />
+    <line
+      x1="65"
+      x2="95"
+      y1="100"
+      y2="100"
+    />
+  </g>
 </g>
-</g>"
 `;
 
 exports[`Testing _controlledGate CNOT gate 2`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<g class='oplus'>
-<circle class=\\"oplus\\" cx=\\"80\\" cy=\\"40\\" r=\\"15\\"></circle>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"25\\" y2=\\"55\\"></line>
-<line x1=\\"65\\" x2=\\"95\\" y1=\\"40\\" y2=\\"40\\"></line>
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="100"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="100"
+    r="5"
+  />
+  <g
+    class="oplus"
+  >
+    <circle
+      cx="80"
+      cy="40"
+      r="15"
+    />
+    <line
+      x1="80"
+      x2="80"
+      y1="25"
+      y2="55"
+    />
+    <line
+      x1="65"
+      x2="95"
+      y1="40"
+      y2="40"
+    />
+  </g>
 </g>
-</g>"
 `;
 
 exports[`Testing _controlledGate Controlled U gate with 1 control + 1 target 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"80\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"100\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="100"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="80"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="100"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with 1 control + 1 target 2`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"20\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="100"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="100"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="40"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with 1 control + 2 targets 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"160\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"20\\" width=\\"45\\" height=\\"100\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"70\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="160"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="100"
+        width="45"
+        x="57.5"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="70"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with 1 control + 2 targets 2`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"80\\" width=\\"45\\" height=\\"100\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"130\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="100"
+        width="45"
+        x="57.5"
+        y="80"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="130"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with 1 control + 2 targets 3`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"20\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">Foo</text>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"140\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"160\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="100"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="40"
+      >
+        Foo
+      </text>
+    </g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="140"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="160"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with 2 controls + 2 targets 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"220\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"160\\" r=\\"5\\"></circle>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"220\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"20\\" width=\\"45\\" height=\\"100\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"70\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="220"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="160"
+    r="5"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="220"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="100"
+        width="45"
+        x="57.5"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="70"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with 2 controls + 2 targets 2`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"220\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"140\\" width=\\"45\\" height=\\"100\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"190\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="220"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="100"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="100"
+        width="45"
+        x="57.5"
+        y="140"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="190"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with 2 controls + 2 targets 3`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"220\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"160\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"20\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">Foo</text>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"200\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"220\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="220"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="100"
+    r="5"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="160"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="40"
+      >
+        Foo
+      </text>
+    </g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="200"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="220"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with 2 controls + 2 targets 4`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"220\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"220\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"20\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">Foo</text>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"140\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"160\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="220"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="100"
+    r="5"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="220"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="40"
+      >
+        Foo
+      </text>
+    </g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="140"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="160"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with multiple controls + 1 target 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"140\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"160\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="100"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="140"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="160"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with multiple controls + 1 target 2`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"160\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"20\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="100"
+    r="5"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="160"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="40"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate Controlled U gate with multiple controls + 1 target 3`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"160\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"57.5\\" y=\\"80\\" width=\\"45\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"100\\">Foo</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="160"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="45"
+        x="57.5"
+        y="80"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="100"
+      >
+        Foo
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate SWAP gate 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"92\\" y2=\\"108\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"108\\" y2=\\"92\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"152\\" y2=\\"168\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"168\\" y2=\\"152\\"></line>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="92"
+      y2="108"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="108"
+      y2="92"
+    />
+  </g>
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="152"
+      y2="168"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="168"
+      y2="152"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate SWAP gate 2`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"160\\" r=\\"5\\"></circle>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"32\\" y2=\\"48\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"48\\" y2=\\"32\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"92\\" y2=\\"108\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"108\\" y2=\\"92\\"></line>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="160"
+    r="5"
+  />
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="32"
+      y2="48"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="48"
+      y2="32"
+    />
+  </g>
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="92"
+      y2="108"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="108"
+      y2="92"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing _controlledGate SWAP gate 3`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"32\\" y2=\\"48\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"48\\" y2=\\"32\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"152\\" y2=\\"168\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"168\\" y2=\\"152\\"></line>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="100"
+    r="5"
+  />
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="32"
+      y2="48"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="48"
+      y2="32"
+    />
+  </g>
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="152"
+      y2="168"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="168"
+      y2="152"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing _createGate Expanded gate 1`] = `
-"<g class='gate' data-a='1' data-b='2' data-expanded='true'>
-<line />
-<g class='gate-control gate-collapse' transform='translate(2.5, Infinity)'>
-<circle cx=\\"0\\" cy=\\"0\\" r=\\"10\\" />
-<path d=\\"M-7,0 H7\\" />
+<g
+  class="gate"
+  data-a="1"
+  data-b="2"
+  data-expanded="true"
+>
+  <line />
+  <g
+    class="gate-control gate-collapse"
+  >
+    <circle
+      cx="2.5"
+      cy="Infinity"
+      r="10"
+    />
+    <path
+      d="M-4.5,Infinity h14"
+    />
+  </g>
 </g>
-</g>"
 `;
 
 exports[`Testing _formatGate CNOT gate 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<g class='oplus'>
-<circle class=\\"oplus\\" cx=\\"80\\" cy=\\"100\\" r=\\"15\\"></circle>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"85\\" y2=\\"115\\"></line>
-<line x1=\\"65\\" x2=\\"95\\" y1=\\"100\\" y2=\\"100\\"></line>
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="100"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <g
+    class="oplus"
+  >
+    <circle
+      cx="80"
+      cy="100"
+      r="15"
+    />
+    <line
+      x1="80"
+      x2="80"
+      y1="85"
+      y2="115"
+    />
+    <line
+      x1="65"
+      x2="95"
+      y1="100"
+      y2="100"
+    />
+  </g>
 </g>
-</g>"
 `;
 
 exports[`Testing _formatGate classically controlled gate 1`] = `
-"<g class='classically-controlled-group classically-controlled-unknown'>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"120\\" y1=\\"180\\" y2=\\"180\\" stroke-dasharray=\\"8, 8\\"></line>
-<line class=\\"classical-line\\" x1=\\"95\\" x2=\\"95\\" y1=\\"175\\" y2=\\"180\\" stroke-dasharray=\\"8, 8\\"></line>
-<g class=\\"classically-controlled-btn\\">
-<circle cx=\\"95\\" cy=\\"160\\" r=\\"15\\"></circle>
-<text font-size=\\"14\\" x=\\"95\\" y=\\"160\\">?</text>
-</g>
-<g class=\\"gates-zero\\">
+<g
+  class="classically-controlled-group classically-controlled-unknown"
+>
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="120"
+    y1="180"
+    y2="180"
+  />
+  <line
+    class="classical-line"
+    stroke-dasharray="8, 8"
+    x1="95"
+    x2="95"
+    y1="175"
+    y2="180"
+  />
+  <g
+    class="classically-controlled-btn"
+  >
+    <circle
+      cx="95"
+      cy="160"
+      r="15"
+    />
+    <text
+      font-size="14"
+      x="95"
+      y="160"
+    >
+      ?
+    </text>
+  </g>
+  <rect
+    class="classical-container"
+    fill-opacity="0"
+    height="120"
+    stroke-dasharray="8, 8"
+    width="0"
+    x="120"
+    y="10"
+  />
 </g>
-<g class=\\"gates-one\\">
-</g>
-<rect class=\\"classical-container\\" x=\\"120\\" y=\\"10\\" width=\\"0\\" height=\\"120\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-</g>"
 `;
 
 exports[`Testing _formatGate controlled swap gate 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"92\\" y2=\\"108\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"108\\" y2=\\"92\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"152\\" y2=\\"168\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"168\\" y2=\\"152\\"></line>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="92"
+      y2="108"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="108"
+      y2="92"
+    />
+  </g>
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="152"
+      y2="168"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="168"
+      y2="152"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing _formatGate controlled unitary gate 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"80\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"100\\">U</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="100"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="40"
+        x="60"
+        y="80"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="100"
+      >
+        U
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _formatGate controlled unitary gate with arguments 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"41.5\\" y=\\"80\\" width=\\"77\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"93\\">U</text>
-<text font-size=\\"12\\" x=\\"80\\" y=\\"108\\">('foo', 'bar')</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="100"
+  />
+  <circle
+    class="control-dot"
+    cx="80"
+    cy="40"
+    r="5"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="77"
+        x="41.5"
+        y="80"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="93"
+      >
+        U
+      </text>
+      <text
+        font-size="12"
+        x="80"
+        y="108"
+      >
+        ('foo', 'bar')
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _formatGate gate with metadata 1`] = `
-"<g class='gate' data-a='1' data-b='2'>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">H</text>
-</g>"
+<g
+  class="gate"
+  data-a="1"
+  data-b="2"
+>
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="40"
+        x="60"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="40"
+      >
+        H
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _formatGate measure gate 1`] = `
-"<g class='gate'>
-<rect class=\\"gate-measure\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<path class=\\"arc-measure\\" d=\\"M 95 42 A 15 12 0 0 0 65 42\\"></path>
-<line x1=\\"80\\" x2=\\"92\\" y1=\\"48\\" y2=\\"28\\"></line>
-</g>"
+<g
+  class="gate"
+>
+  <g>
+    <rect
+      class="gate-measure"
+      height="40"
+      width="40"
+      x="60"
+      y="20"
+    />
+    <path
+      class="arc-measure"
+      d="M 95 42 A 15 12 0 0 0 65 42"
+    />
+    <line
+      x1="80"
+      x2="92"
+      y1="48"
+      y2="28"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing _formatGate multi-qubit unitary gate 1`] = `
-"<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"100\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"70\\">U</text>
-</g>"
+<g
+  class="gate"
+>
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="100"
+        width="40"
+        x="60"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="70"
+      >
+        U
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _formatGate multi-qubit unitary gate with arguments 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<rect class=\\"gate-unitary\\" x=\\"41.5\\" y=\\"20\\" width=\\"77\\" height=\\"100\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"63\\">U</text>
-<text font-size=\\"12\\" x=\\"80\\" y=\\"78\\">('foo', 'bar')</text>
-</g>"
+<g
+  class="gate"
+>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="100"
+  />
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="100"
+        width="77"
+        x="41.5"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="63"
+      >
+        U
+      </text>
+      <text
+        font-size="12"
+        x="80"
+        y="78"
+      >
+        ('foo', 'bar')
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _formatGate single-qubit unitary gate 1`] = `
-"<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">H</text>
-</g>"
+<g
+  class="gate"
+>
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="40"
+        x="60"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="40"
+      >
+        H
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _formatGate single-qubit unitary gate with arguments 1`] = `
-"<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"54\\" y=\\"20\\" width=\\"52\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"33\\">Ry</text>
-<text font-size=\\"12\\" x=\\"80\\" y=\\"48\\">(0.25)</text>
-</g>"
+<g
+  class="gate"
+>
+  <g>
+    <g>
+      <rect
+        class="gate-unitary"
+        height="40"
+        width="52"
+        x="54"
+        y="20"
+      />
+      <text
+        font-size="14"
+        x="80"
+        y="33"
+      >
+        Ry
+      </text>
+      <text
+        font-size="12"
+        x="80"
+        y="48"
+      >
+        (0.25)
+      </text>
+    </g>
+  </g>
+</g>
 `;
 
 exports[`Testing _formatGate swap gate 1`] = `
-"<g class='gate'>
-<rect class=\\"gate-swap\\" x=\\"60\\" y=\\"20\\" width=\\"120\\" height=\\"120\\"></rect>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"32\\" y2=\\"48\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"48\\" y2=\\"32\\"></line>,<line x1=\\"72\\" x2=\\"88\\" y1=\\"92\\" y2=\\"108\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"108\\" y2=\\"92\\"></line>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-</g>"
-`;
-
-exports[`Testing _gateControls Expanded gate 1`] = `
-Array [
-  "<g class='gate-control gate-collapse' transform='translate(2.5, Infinity)'>
-<circle cx=\\"0\\" cy=\\"0\\" r=\\"10\\" />
-<path d=\\"M-7,0 H7\\" />
-</g>",
-]
-`;
-
-exports[`Testing _gateControls Expanded with children gate 1`] = `
-Array [
-  "<g class='gate-control gate-collapse' transform='translate(2.5, Infinity)'>
-<circle cx=\\"0\\" cy=\\"0\\" r=\\"10\\" />
-<path d=\\"M-7,0 H7\\" />
-</g>",
-]
-`;
-
-exports[`Testing _gateControls Non-expanded with children gate 1`] = `
-Array [
-  "<g class='gate-control gate-expand' transform='translate(2.5, Infinity)'>
-<circle cx=\\"0\\" cy=\\"0\\" r=\\"10\\" />
-<path d=\\"M0,-7 V7 M-7,0 H7\\" />
-</g>",
-]
+<g
+  class="gate"
+>
+  <g>
+    <rect
+      class="gate-swap"
+      height="120"
+      width="120"
+      x="60"
+      y="20"
+    />
+    <g>
+      <line
+        x1="72"
+        x2="88"
+        y1="32"
+        y2="48"
+      />
+      <line
+        x1="72"
+        x2="88"
+        y1="48"
+        y2="32"
+      />
+    </g>
+    <g>
+      <line
+        x1="72"
+        x2="88"
+        y1="92"
+        y2="108"
+      />
+      <line
+        x1="72"
+        x2="88"
+        y1="108"
+        y2="92"
+      />
+    </g>
+    <line
+      x1="80"
+      x2="80"
+      y1="40"
+      y2="100"
+    />
+  </g>
+</g>
 `;
 
-exports[`Testing _gateControls Non-expanded with no children gate 1`] = `Array []`;
-
 exports[`Testing _groupedOperations children on consecutive registers 1`] = `
-"<g class='gate'>
-<rect x=\\"60\\" y=\\"10\\" width=\\"80\\" height=\\"120\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"40\\">X</text>
+<g
+  class="gate"
+>
+  <rect
+    class="gate-unitary"
+    fill-opacity="0"
+    height="120"
+    stroke-dasharray="8, 8"
+    width="80"
+    x="60"
+    y="10"
+  />
+  <g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="80"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="100"
+          >
+            H
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
 </g>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"80\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"100\\">H</text>
-</g>
-</g>"
 `;
 
 exports[`Testing _groupedOperations children on non-consecutive registers 1`] = `
-"<g class='gate'>
-<rect x=\\"60\\" y=\\"10\\" width=\\"80\\" height=\\"180\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"40\\">X</text>
-</g>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"140\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"160\\">H</text>
+<g
+  class="gate"
+>
+  <rect
+    class="gate-unitary"
+    fill-opacity="0"
+    height="180"
+    stroke-dasharray="8, 8"
+    width="80"
+    x="60"
+    y="10"
+  />
+  <g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="140"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="160"
+          >
+            H
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
 </g>
-</g>"
 `;
 
 exports[`Testing _groupedOperations children on same register 1`] = `
-"<g class='gate'>
-<rect x=\\"60\\" y=\\"10\\" width=\\"140\\" height=\\"60\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"40\\">X</text>
+<g
+  class="gate"
+>
+  <rect
+    class="gate-unitary"
+    fill-opacity="0"
+    height="60"
+    stroke-dasharray="8, 8"
+    width="140"
+    x="60"
+    y="10"
+  />
+  <g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="150"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="170"
+            y="40"
+          >
+            Z
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
 </g>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"150\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"170\\" y=\\"40\\">Z</text>
-</g>
-</g>"
 `;
 
 exports[`Testing _groupedOperations multiple children 1`] = `
-"<g class='gate'>
-<rect x=\\"60\\" y=\\"10\\" width=\\"140\\" height=\\"120\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"40\\">X</text>
-</g>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"150\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"170\\" y=\\"40\\">Z</text>
+<g
+  class="gate"
+>
+  <rect
+    class="gate-unitary"
+    fill-opacity="0"
+    height="120"
+    stroke-dasharray="8, 8"
+    width="140"
+    x="60"
+    y="10"
+  />
+  <g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="150"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="170"
+            y="40"
+          >
+            Z
+          </text>
+        </g>
+      </g>
+    </g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="80"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="100"
+          >
+            H
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
 </g>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"80\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"100\\">H</text>
-</g>
-</g>"
 `;
 
 exports[`Testing _groupedOperations nested children 1`] = `
-"<g class='gate'>
-<rect x=\\"60\\" y=\\"10\\" width=\\"160\\" height=\\"120\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-<g class='gate'>
-<rect x=\\"74\\" y=\\"12\\" width=\\"136\\" height=\\"56\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"100\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"120\\" y=\\"40\\">X</text>
-</g>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"160\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"180\\" y=\\"40\\">Z</text>
-</g>
+<g
+  class="gate"
+>
+  <rect
+    class="gate-unitary"
+    fill-opacity="0"
+    height="120"
+    stroke-dasharray="8, 8"
+    width="160"
+    x="60"
+    y="10"
+  />
+  <g>
+    <g
+      class="gate"
+    >
+      <rect
+        class="gate-unitary"
+        fill-opacity="0"
+        height="56"
+        stroke-dasharray="8, 8"
+        width="136"
+        x="74"
+        y="12"
+      />
+      <g>
+        <g
+          class="gate"
+        >
+          <g>
+            <g>
+              <rect
+                class="gate-unitary"
+                height="40"
+                width="40"
+                x="100"
+                y="20"
+              />
+              <text
+                font-size="14"
+                x="120"
+                y="40"
+              >
+                X
+              </text>
+            </g>
+          </g>
+        </g>
+        <g
+          class="gate"
+        >
+          <g>
+            <g>
+              <rect
+                class="gate-unitary"
+                height="40"
+                width="40"
+                x="160"
+                y="20"
+              />
+              <text
+                font-size="14"
+                x="180"
+                y="40"
+              >
+                Z
+              </text>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="130"
+            y="80"
+          />
+          <text
+            font-size="14"
+            x="150"
+            y="100"
+          >
+            H
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
 </g>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"130\\" y=\\"80\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"150\\" y=\\"100\\">H</text>
-</g>
-</g>"
 `;
 
 exports[`Testing _groupedOperations one child 1`] = `
-"<g class='gate'>
-<rect x=\\"60\\" y=\\"10\\" width=\\"80\\" height=\\"60\\" fill-opacity=\\"0\\" stroke-dasharray=\\"8, 8\\"></rect>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"90\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"110\\" y=\\"40\\">X</text>
+<g
+  class="gate"
+>
+  <rect
+    class="gate-unitary"
+    fill-opacity="0"
+    height="60"
+    stroke-dasharray="8, 8"
+    width="80"
+    x="60"
+    y="10"
+  />
+  <g>
+    <g
+      class="gate"
+    >
+      <g>
+        <g>
+          <rect
+            class="gate-unitary"
+            height="40"
+            width="40"
+            x="90"
+            y="20"
+          />
+          <text
+            font-size="14"
+            x="110"
+            y="40"
+          >
+            X
+          </text>
+        </g>
+      </g>
+    </g>
+  </g>
 </g>
-</g>"
 `;
 
 exports[`Testing _measure 1 qubit + 1 classical registers 1`] = `
-"<rect class=\\"gate-measure\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<path class=\\"arc-measure\\" d=\\"M 95 42 A 15 12 0 0 0 65 42\\"></path>
-<line x1=\\"80\\" x2=\\"92\\" y1=\\"48\\" y2=\\"28\\"></line>"
+<g>
+  <rect
+    class="gate-measure"
+    height="40"
+    width="40"
+    x="60"
+    y="20"
+  />
+  <path
+    class="arc-measure"
+    d="M 95 42 A 15 12 0 0 0 65 42"
+  />
+  <line
+    x1="80"
+    x2="92"
+    y1="48"
+    y2="28"
+  />
+</g>
 `;
 
 exports[`Testing _measure 2 qubit + 1 classical registers 1`] = `
-"<rect class=\\"gate-measure\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<path class=\\"arc-measure\\" d=\\"M 95 42 A 15 12 0 0 0 65 42\\"></path>
-<line x1=\\"80\\" x2=\\"92\\" y1=\\"48\\" y2=\\"28\\"></line>"
+<g>
+  <rect
+    class="gate-measure"
+    height="40"
+    width="40"
+    x="60"
+    y="20"
+  />
+  <path
+    class="arc-measure"
+    d="M 95 42 A 15 12 0 0 0 65 42"
+  />
+  <line
+    x1="80"
+    x2="92"
+    y1="48"
+    y2="28"
+  />
+</g>
 `;
 
 exports[`Testing _measure 2 qubit + 2 classical registers 1`] = `
-"<rect class=\\"gate-measure\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<path class=\\"arc-measure\\" d=\\"M 95 42 A 15 12 0 0 0 65 42\\"></path>
-<line x1=\\"80\\" x2=\\"92\\" y1=\\"48\\" y2=\\"28\\"></line>"
+<g>
+  <rect
+    class="gate-measure"
+    height="40"
+    width="40"
+    x="60"
+    y="20"
+  />
+  <path
+    class="arc-measure"
+    d="M 95 42 A 15 12 0 0 0 65 42"
+  />
+  <line
+    x1="80"
+    x2="92"
+    y1="48"
+    y2="28"
+  />
+</g>
 `;
 
 exports[`Testing _measure 2 qubit + 2 classical registers 2`] = `
-"<rect class=\\"gate-measure\\" x=\\"60\\" y=\\"80\\" width=\\"40\\" height=\\"40\\"></rect>
-<path class=\\"arc-measure\\" d=\\"M 95 102 A 15 12 0 0 0 65 102\\"></path>
-<line x1=\\"80\\" x2=\\"92\\" y1=\\"108\\" y2=\\"88\\"></line>"
+<g>
+  <rect
+    class="gate-measure"
+    height="40"
+    width="40"
+    x="60"
+    y="80"
+  />
+  <path
+    class="arc-measure"
+    d="M 95 102 A 15 12 0 0 0 65 102"
+  />
+  <line
+    x1="80"
+    x2="92"
+    y1="108"
+    y2="88"
+  />
+</g>
 `;
 
 exports[`Testing _swap Adjacent swap 1`] = `
-"<rect class=\\"gate-swap\\" x=\\"60\\" y=\\"20\\" width=\\"120\\" height=\\"120\\"></rect>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"32\\" y2=\\"48\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"48\\" y2=\\"32\\"></line>,<line x1=\\"72\\" x2=\\"88\\" y1=\\"92\\" y2=\\"108\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"108\\" y2=\\"92\\"></line>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>"
+<g>
+  <rect
+    class="gate-swap"
+    height="120"
+    width="120"
+    x="60"
+    y="20"
+  />
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="32"
+      y2="48"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="48"
+      y2="32"
+    />
+  </g>
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="92"
+      y2="108"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="108"
+      y2="92"
+    />
+  </g>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="100"
+  />
+</g>
 `;
 
 exports[`Testing _swap Adjacent swap 2`] = `
-"<rect class=\\"gate-swap\\" x=\\"60\\" y=\\"20\\" width=\\"120\\" height=\\"120\\"></rect>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"92\\" y2=\\"108\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"108\\" y2=\\"92\\"></line>,<line x1=\\"72\\" x2=\\"88\\" y1=\\"32\\" y2=\\"48\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"48\\" y2=\\"32\\"></line>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"100\\" y2=\\"40\\"></line>"
+<g>
+  <rect
+    class="gate-swap"
+    height="120"
+    width="120"
+    x="60"
+    y="20"
+  />
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="92"
+      y2="108"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="108"
+      y2="92"
+    />
+  </g>
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="32"
+      y2="48"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="48"
+      y2="32"
+    />
+  </g>
+  <line
+    x1="80"
+    x2="80"
+    y1="100"
+    y2="40"
+  />
+</g>
 `;
 
 exports[`Testing _swap Non-adjacent swap 1`] = `
-"<rect class=\\"gate-swap\\" x=\\"60\\" y=\\"20\\" width=\\"120\\" height=\\"180\\"></rect>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"32\\" y2=\\"48\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"48\\" y2=\\"32\\"></line>,<line x1=\\"72\\" x2=\\"88\\" y1=\\"152\\" y2=\\"168\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"168\\" y2=\\"152\\"></line>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\"></line>"
+<g>
+  <rect
+    class="gate-swap"
+    height="180"
+    width="120"
+    x="60"
+    y="20"
+  />
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="32"
+      y2="48"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="48"
+      y2="32"
+    />
+  </g>
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="152"
+      y2="168"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="168"
+      y2="152"
+    />
+  </g>
+  <line
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+</g>
 `;
 
 exports[`Testing _swap Non-adjacent swap 2`] = `
-"<rect class=\\"gate-swap\\" x=\\"60\\" y=\\"20\\" width=\\"120\\" height=\\"180\\"></rect>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"152\\" y2=\\"168\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"168\\" y2=\\"152\\"></line>,<line x1=\\"72\\" x2=\\"88\\" y1=\\"32\\" y2=\\"48\\"></line>
-<line x1=\\"72\\" x2=\\"88\\" y1=\\"48\\" y2=\\"32\\"></line>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"160\\" y2=\\"40\\"></line>"
+<g>
+  <rect
+    class="gate-swap"
+    height="180"
+    width="120"
+    x="60"
+    y="20"
+  />
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="152"
+      y2="168"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="168"
+      y2="152"
+    />
+  </g>
+  <g>
+    <line
+      x1="72"
+      x2="88"
+      y1="32"
+      y2="48"
+    />
+    <line
+      x1="72"
+      x2="88"
+      y1="48"
+      y2="32"
+    />
+  </g>
+  <line
+    x1="80"
+    x2="80"
+    y1="160"
+    y2="40"
+  />
+</g>
 `;
 
 exports[`Testing _unitary Multiqubit unitary on consecutive registers 1`] = `
-"<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"100\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"70\\">ZZ</text>"
+<g>
+  <g>
+    <rect
+      class="gate-unitary"
+      height="100"
+      width="40"
+      x="60"
+      y="20"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="70"
+    >
+      ZZ
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing _unitary Multiqubit unitary on consecutive registers 2`] = `
-"<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"160\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"100\\">ZZZ</text>"
+<g>
+  <g>
+    <rect
+      class="gate-unitary"
+      height="160"
+      width="40"
+      x="60"
+      y="20"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="100"
+    >
+      ZZZ
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing _unitary Multiqubit unitary on non-consecutive registers 1`] = `
-"<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"160\\" stroke-dasharray=\\"8, 8\\"></line>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">ZZ</text>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"140\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"160\\">ZZ</text>"
+<g>
+  <line
+    stroke-dasharray="8, 8"
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="160"
+  />
+  <g>
+    <rect
+      class="gate-unitary"
+      height="40"
+      width="40"
+      x="60"
+      y="20"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="40"
+    >
+      ZZ
+    </text>
+  </g>
+  <g>
+    <rect
+      class="gate-unitary"
+      height="40"
+      width="40"
+      x="60"
+      y="140"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="160"
+    >
+      ZZ
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing _unitary Multiqubit unitary on non-consecutive registers 2`] = `
-"<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"220\\" stroke-dasharray=\\"8, 8\\"></line>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">ZZZ</text>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"140\\" width=\\"40\\" height=\\"100\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"190\\">ZZZ</text>"
+<g>
+  <line
+    stroke-dasharray="8, 8"
+    x1="80"
+    x2="80"
+    y1="40"
+    y2="220"
+  />
+  <g>
+    <rect
+      class="gate-unitary"
+      height="40"
+      width="40"
+      x="60"
+      y="20"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="40"
+    >
+      ZZZ
+    </text>
+  </g>
+  <g>
+    <rect
+      class="gate-unitary"
+      height="100"
+      width="40"
+      x="60"
+      y="140"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="190"
+    >
+      ZZZ
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing _unitary Multiqubit unitary on non-consecutive registers 3`] = `
-"<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">ZZ</text>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"140\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"160\\">ZZ</text>"
+<g>
+  <g>
+    <rect
+      class="gate-unitary"
+      height="40"
+      width="40"
+      x="60"
+      y="20"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="40"
+    >
+      ZZ
+    </text>
+  </g>
+  <g>
+    <rect
+      class="gate-unitary"
+      height="40"
+      width="40"
+      x="60"
+      y="140"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="160"
+    >
+      ZZ
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing _unitary Multiqubit unitary on non-consecutive registers 4`] = `
-"<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">ZZZ</text>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"140\\" width=\\"40\\" height=\\"100\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"190\\">ZZZ</text>"
+<g>
+  <g>
+    <rect
+      class="gate-unitary"
+      height="40"
+      width="40"
+      x="60"
+      y="20"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="40"
+    >
+      ZZZ
+    </text>
+  </g>
+  <g>
+    <rect
+      class="gate-unitary"
+      height="100"
+      width="40"
+      x="60"
+      y="140"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="190"
+    >
+      ZZZ
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing _unitary Single qubit unitary 1`] = `
-"<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"40\\">H</text>"
+<g>
+  <g>
+    <rect
+      class="gate-unitary"
+      height="40"
+      width="40"
+      x="60"
+      y="20"
+    />
+    <text
+      font-size="14"
+      x="80"
+      y="40"
+    >
+      H
+    </text>
+  </g>
+</g>
 `;
 
+exports[`Testing _zoomButton Expanded gate 1`] = `null`;
+
+exports[`Testing _zoomButton Expanded with children gate 1`] = `null`;
+
+exports[`Testing _zoomButton Non-expanded with children gate 1`] = `null`;
+
+exports[`Testing _zoomButton Non-expanded with no children gate 1`] = `null`;
+
 exports[`Testing formatGates Multiple gates 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<g class='oplus'>
-<circle class=\\"oplus\\" cx=\\"80\\" cy=\\"40\\" r=\\"15\\"></circle>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"25\\" y2=\\"55\\"></line>
-<line x1=\\"65\\" x2=\\"95\\" y1=\\"40\\" y2=\\"40\\"></line>
+<g>
+  <g
+    class="gate"
+  >
+    <line
+      x1="80"
+      x2="80"
+      y1="40"
+      y2="100"
+    />
+    <circle
+      class="control-dot"
+      cx="80"
+      cy="100"
+      r="5"
+    />
+    <g
+      class="oplus"
+    >
+      <circle
+        cx="80"
+        cy="40"
+        r="15"
+      />
+      <line
+        x1="80"
+        x2="80"
+        y1="25"
+        y2="55"
+      />
+      <line
+        x1="65"
+        x2="95"
+        y1="40"
+        y2="40"
+      />
+    </g>
+  </g>
+  <g
+    class="gate"
+  >
+    <line
+      x1="80"
+      x2="80"
+      y1="100"
+      y2="160"
+    />
+    <circle
+      class="control-dot"
+      cx="80"
+      cy="100"
+      r="5"
+    />
+    <g>
+      <g>
+        <rect
+          class="gate-unitary"
+          height="40"
+          width="40"
+          x="60"
+          y="140"
+        />
+        <text
+          font-size="14"
+          x="80"
+          y="160"
+        >
+          X
+        </text>
+      </g>
+    </g>
+  </g>
+  <g
+    class="gate"
+  >
+    <g>
+      <g>
+        <rect
+          class="gate-unitary"
+          height="40"
+          width="40"
+          x="60"
+          y="140"
+        />
+        <text
+          font-size="14"
+          x="80"
+          y="160"
+        >
+          X
+        </text>
+      </g>
+    </g>
+  </g>
+  <g
+    class="gate"
+  >
+    <g>
+      <rect
+        class="gate-measure"
+        height="40"
+        width="40"
+        x="60"
+        y="20"
+      />
+      <path
+        class="arc-measure"
+        d="M 95 42 A 15 12 0 0 0 65 42"
+      />
+      <line
+        x1="80"
+        x2="92"
+        y1="48"
+        y2="28"
+      />
+    </g>
+  </g>
 </g>
-</g>
-<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"100\\" y2=\\"160\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"100\\" r=\\"5\\"></circle>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"140\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"160\\">X</text>
-</g>
-<g class='gate'>
-<rect class=\\"gate-unitary\\" x=\\"60\\" y=\\"140\\" width=\\"40\\" height=\\"40\\"></rect>
-<text font-size=\\"14\\" x=\\"80\\" y=\\"160\\">X</text>
-</g>
-<g class='gate'>
-<rect class=\\"gate-measure\\" x=\\"60\\" y=\\"20\\" width=\\"40\\" height=\\"40\\"></rect>
-<path class=\\"arc-measure\\" d=\\"M 95 42 A 15 12 0 0 0 65 42\\"></path>
-<line x1=\\"80\\" x2=\\"92\\" y1=\\"48\\" y2=\\"28\\"></line>
-</g>"
 `;
 
 exports[`Testing formatGates Single gate 1`] = `
-"<g class='gate'>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"40\\" y2=\\"100\\"></line>
-<circle class=\\"control-dot\\" cx=\\"80\\" cy=\\"40\\" r=\\"5\\"></circle>
-<g class='oplus'>
-<circle class=\\"oplus\\" cx=\\"80\\" cy=\\"100\\" r=\\"15\\"></circle>
-<line x1=\\"80\\" x2=\\"80\\" y1=\\"85\\" y2=\\"115\\"></line>
-<line x1=\\"65\\" x2=\\"95\\" y1=\\"100\\" y2=\\"100\\"></line>
-</g>
-</g>"
+<g>
+  <g
+    class="gate"
+  >
+    <line
+      x1="80"
+      x2="80"
+      y1="40"
+      y2="100"
+    />
+    <circle
+      class="control-dot"
+      cx="80"
+      cy="40"
+      r="5"
+    />
+    <g
+      class="oplus"
+    >
+      <circle
+        cx="80"
+        cy="100"
+        r="15"
+      />
+      <line
+        x1="80"
+        x2="80"
+        y1="85"
+        y2="115"
+      />
+      <line
+        x1="65"
+        x2="95"
+        y1="100"
+        y2="100"
+      />
+    </g>
+  </g>
+</g>
 `;
diff --git a/__tests__/__snapshots__/inputFormatter.test.ts.snap b/__tests__/__snapshots__/inputFormatter.test.ts.snap
index 59a157b8..fc1914ac 100644
--- a/__tests__/__snapshots__/inputFormatter.test.ts.snap
+++ b/__tests__/__snapshots__/inputFormatter.test.ts.snap
@@ -1,32 +1,170 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Testing _qubitInput classical register 1`] = `"<text x=\\"20\\" y=\\"20\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>"`;
+exports[`Testing _qubitInput classical register 1`] = `
+<text
+  dominant-baseline="middle"
+  font-size="16"
+  text-anchor="start"
+  x="20"
+  y="20"
+>
+  |0⟩
+</text>
+`;
 
-exports[`Testing _qubitInput classical register 2`] = `"<text x=\\"20\\" y=\\"50\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>"`;
+exports[`Testing _qubitInput classical register 2`] = `
+<text
+  dominant-baseline="middle"
+  font-size="16"
+  text-anchor="start"
+  x="20"
+  y="50"
+>
+  |0⟩
+</text>
+`;
 
-exports[`Testing _qubitInput classical register 3`] = `"<text x=\\"20\\" y=\\"0\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>"`;
+exports[`Testing _qubitInput classical register 3`] = `
+<text
+  dominant-baseline="middle"
+  font-size="16"
+  text-anchor="start"
+  x="20"
+  y="0"
+>
+  |0⟩
+</text>
+`;
 
-exports[`Testing formatInputs 1 quantum register 1`] = `"<text x=\\"20\\" y=\\"40\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>"`;
+exports[`Testing formatInputs 1 quantum register 1`] = `
+<g>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="40"
+  >
+    |0⟩
+  </text>
+</g>
+`;
 
 exports[`Testing formatInputs Multiple quantum registers 1`] = `
-"<text x=\\"20\\" y=\\"40\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>
-<text x=\\"20\\" y=\\"100\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>
-<text x=\\"20\\" y=\\"160\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>"
+<g>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="40"
+  >
+    |0⟩
+  </text>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="100"
+  >
+    |0⟩
+  </text>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="160"
+  >
+    |0⟩
+  </text>
+</g>
 `;
 
 exports[`Testing formatInputs Quantum and classical registers 1`] = `
-"<text x=\\"20\\" y=\\"40\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>
-<text x=\\"20\\" y=\\"120\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>
-<text x=\\"20\\" y=\\"180\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>"
+<g>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="40"
+  >
+    |0⟩
+  </text>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="120"
+  >
+    |0⟩
+  </text>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="180"
+  >
+    |0⟩
+  </text>
+</g>
 `;
 
 exports[`Testing formatInputs Quantum and classical registers 2`] = `
-"<text x=\\"20\\" y=\\"40\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>
-<text x=\\"20\\" y=\\"100\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>
-<text x=\\"20\\" y=\\"220\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>"
+<g>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="40"
+  >
+    |0⟩
+  </text>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="100"
+  >
+    |0⟩
+  </text>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="220"
+  >
+    |0⟩
+  </text>
+</g>
 `;
 
 exports[`Testing formatInputs Skip quantum registers 1`] = `
-"<text x=\\"20\\" y=\\"40\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>
-<text x=\\"20\\" y=\\"100\\" dominant-baseline=\\"middle\\" text-anchor=\\"start\\">|0⟩</text>"
+<g>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="40"
+  >
+    |0⟩
+  </text>
+  <text
+    dominant-baseline="middle"
+    font-size="16"
+    text-anchor="start"
+    x="20"
+    y="100"
+  >
+    |0⟩
+  </text>
+</g>
 `;
diff --git a/__tests__/__snapshots__/registerFormatter.test.ts.snap b/__tests__/__snapshots__/registerFormatter.test.ts.snap
index 4736fada..3487917a 100644
--- a/__tests__/__snapshots__/registerFormatter.test.ts.snap
+++ b/__tests__/__snapshots__/registerFormatter.test.ts.snap
@@ -1,322 +1,1786 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Testing _classicalRegister register with label offset 1`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"100\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"100\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="100"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="100"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with label offset 2`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"100\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"100\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="100"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="100"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with label offset 3`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"100\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"100\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="100"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="100"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with large width 1`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"500\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"500\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="500"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="500"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with large width 2`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"500\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"500\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="500"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="500"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with large width 3`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"500\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"500\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="500"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="500"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with normal width 1`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"100\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"100\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="100"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="100"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with normal width 2`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"100\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"100\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="100"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="100"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with normal width 3`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"100\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"100\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="100"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="100"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with small width 1`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"5\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"5\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="5"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="5"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with small width 2`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"5\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"5\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="5"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="5"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _classicalRegister register with small width 3`] = `
-"<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"11\\" y1=\\"10\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"9\\" y1=\\"10\\" y2=\\"21\\"></line>
-<line class=\\"register-classical\\" x1=\\"11\\" x2=\\"5\\" y1=\\"19\\" y2=\\"19\\"></line>
-<line class=\\"register-classical\\" x1=\\"9\\" x2=\\"5\\" y1=\\"21\\" y2=\\"21\\"></line>"
+<g>
+  <line
+    class="register-classical"
+    x1="11"
+    x2="11"
+    y1="10"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="9"
+    y1="10"
+    y2="21"
+  />
+  <line
+    class="register-classical"
+    x1="11"
+    x2="5"
+    y1="19"
+    y2="19"
+  />
+  <line
+    class="register-classical"
+    x1="9"
+    x2="5"
+    y1="21"
+    y2="21"
+  />
+</g>
 `;
 
 exports[`Testing _qubitRegister register with label offset 1`] = `
-"<line x1=\\"40\\" x2=\\"100\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"20\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>"
+<g>
+  <line
+    x1="40"
+    x2="100"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="20"
+  >
+    q0
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with label offset 2`] = `
-"<line x1=\\"40\\" x2=\\"100\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"15\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>"
+<g>
+  <line
+    x1="40"
+    x2="100"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="15"
+  >
+    q1
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with label offset 3`] = `
-"<line x1=\\"40\\" x2=\\"100\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"-30\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>"
+<g>
+  <line
+    x1="40"
+    x2="100"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="-30"
+  >
+    q2
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with large width 1`] = `
-"<line x1=\\"40\\" x2=\\"500\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"4\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>"
+<g>
+  <line
+    x1="40"
+    x2="500"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="4"
+  >
+    q0
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with large width 2`] = `
-"<line x1=\\"40\\" x2=\\"500\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"4\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>"
+<g>
+  <line
+    x1="40"
+    x2="500"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="4"
+  >
+    q1
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with large width 3`] = `
-"<line x1=\\"40\\" x2=\\"500\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"4\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>"
+<g>
+  <line
+    x1="40"
+    x2="500"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="4"
+  >
+    q2
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with normal width 1`] = `
-"<line x1=\\"40\\" x2=\\"100\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"4\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>"
+<g>
+  <line
+    x1="40"
+    x2="100"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="4"
+  >
+    q0
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with normal width 2`] = `
-"<line x1=\\"40\\" x2=\\"100\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"4\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>"
+<g>
+  <line
+    x1="40"
+    x2="100"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="4"
+  >
+    q1
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with normal width 3`] = `
-"<line x1=\\"40\\" x2=\\"100\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"4\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>"
+<g>
+  <line
+    x1="40"
+    x2="100"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="4"
+  >
+    q2
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with small width 1`] = `
-"<line x1=\\"40\\" x2=\\"5\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"4\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>"
+<g>
+  <line
+    x1="40"
+    x2="5"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="4"
+  >
+    q0
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with small width 2`] = `
-"<line x1=\\"40\\" x2=\\"5\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"4\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>"
+<g>
+  <line
+    x1="40"
+    x2="5"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="4"
+  >
+    q1
+  </text>
+</g>
 `;
 
 exports[`Testing _qubitRegister register with small width 3`] = `
-"<line x1=\\"40\\" x2=\\"5\\" y1=\\"20\\" y2=\\"20\\"></line>
-<text x=\\"40\\" y=\\"4\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>"
+<g>
+  <line
+    x1="40"
+    x2="5"
+    y1="20"
+    y2="20"
+  />
+  <text
+    dominant-baseline="hanging"
+    font-size="75%"
+    text-anchor="start"
+    x="40"
+    y="4"
+  >
+    q2
+  </text>
+</g>
 `;
 
 exports[`Testing formatRegisters 1 quantum register 1`] = `
-"<line x1=\\"40\\" x2=\\"180\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters 1 quantum register 2`] = `
-"<line x1=\\"40\\" x2=\\"85\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters 1 quantum register 3`] = `
-"<line x1=\\"40\\" x2=\\"580\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Multiple quantum registers 1`] = `
-"<line x1=\\"40\\" x2=\\"180\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"180\\" y1=\\"100\\" y2=\\"100\\"></line>
-<text x=\\"40\\" y=\\"84\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>
-<line x1=\\"40\\" x2=\\"180\\" y1=\\"160\\" y2=\\"160\\"></line>
-<text x=\\"40\\" y=\\"144\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line x1=\\"40\\" x2=\\"180\\" y1=\\"220\\" y2=\\"220\\"></line>
-<text x=\\"40\\" y=\\"204\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q3</text>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="100"
+      y2="100"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="84"
+    >
+      q1
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="160"
+      y2="160"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="144"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="220"
+      y2="220"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="204"
+    >
+      q3
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Multiple quantum registers 2`] = `
-"<line x1=\\"40\\" x2=\\"85\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"85\\" y1=\\"100\\" y2=\\"100\\"></line>
-<text x=\\"40\\" y=\\"84\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>
-<line x1=\\"40\\" x2=\\"85\\" y1=\\"160\\" y2=\\"160\\"></line>
-<text x=\\"40\\" y=\\"144\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line x1=\\"40\\" x2=\\"85\\" y1=\\"220\\" y2=\\"220\\"></line>
-<text x=\\"40\\" y=\\"204\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q3</text>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="100"
+      y2="100"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="84"
+    >
+      q1
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="160"
+      y2="160"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="144"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="220"
+      y2="220"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="204"
+    >
+      q3
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Multiple quantum registers 3`] = `
-"<line x1=\\"40\\" x2=\\"580\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"580\\" y1=\\"100\\" y2=\\"100\\"></line>
-<text x=\\"40\\" y=\\"84\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>
-<line x1=\\"40\\" x2=\\"580\\" y1=\\"160\\" y2=\\"160\\"></line>
-<text x=\\"40\\" y=\\"144\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line x1=\\"40\\" x2=\\"580\\" y1=\\"220\\" y2=\\"220\\"></line>
-<text x=\\"40\\" y=\\"204\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q3</text>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="100"
+      y2="100"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="84"
+    >
+      q1
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="160"
+      y2="160"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="144"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="220"
+      y2="220"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="204"
+    >
+      q3
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Quantum and classical registers 1`] = `
-"<line x1=\\"40\\" x2=\\"180\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"180\\" y1=\\"120\\" y2=\\"120\\"></line>
-<text x=\\"40\\" y=\\"104\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>
-<line x1=\\"40\\" x2=\\"180\\" y1=\\"180\\" y2=\\"180\\"></line>
-<text x=\\"40\\" y=\\"164\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"40\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"40\\" y2=\\"81\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"180\\" y1=\\"79\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"180\\" y1=\\"81\\" y2=\\"81\\"></line>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="120"
+      y2="120"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="104"
+    >
+      q1
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="180"
+      y2="180"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="164"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="40"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="40"
+      y2="81"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="180"
+      y1="79"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="180"
+      y1="81"
+      y2="81"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Quantum and classical registers 2`] = `
-"<line x1=\\"40\\" x2=\\"85\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"85\\" y1=\\"120\\" y2=\\"120\\"></line>
-<text x=\\"40\\" y=\\"104\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>
-<line x1=\\"40\\" x2=\\"85\\" y1=\\"180\\" y2=\\"180\\"></line>
-<text x=\\"40\\" y=\\"164\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"40\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"40\\" y2=\\"81\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"85\\" y1=\\"79\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"85\\" y1=\\"81\\" y2=\\"81\\"></line>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="120"
+      y2="120"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="104"
+    >
+      q1
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="180"
+      y2="180"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="164"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="40"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="40"
+      y2="81"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="85"
+      y1="79"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="85"
+      y1="81"
+      y2="81"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Quantum and classical registers 3`] = `
-"<line x1=\\"40\\" x2=\\"580\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"580\\" y1=\\"120\\" y2=\\"120\\"></line>
-<text x=\\"40\\" y=\\"104\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>
-<line x1=\\"40\\" x2=\\"580\\" y1=\\"180\\" y2=\\"180\\"></line>
-<text x=\\"40\\" y=\\"164\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"40\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"40\\" y2=\\"81\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"580\\" y1=\\"79\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"580\\" y1=\\"81\\" y2=\\"81\\"></line>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="120"
+      y2="120"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="104"
+    >
+      q1
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="180"
+      y2="180"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="164"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="40"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="40"
+      y2="81"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="580"
+      y1="79"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="580"
+      y1="81"
+      y2="81"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Quantum and classical registers 4`] = `
-"<line x1=\\"40\\" x2=\\"180\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"180\\" y1=\\"100\\" y2=\\"100\\"></line>
-<text x=\\"40\\" y=\\"84\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>
-<line x1=\\"40\\" x2=\\"180\\" y1=\\"220\\" y2=\\"220\\"></line>
-<text x=\\"40\\" y=\\"204\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"40\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"40\\" y2=\\"81\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"180\\" y1=\\"79\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"180\\" y1=\\"81\\" y2=\\"81\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"40\\" y2=\\"119\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"40\\" y2=\\"121\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"180\\" y1=\\"119\\" y2=\\"119\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"180\\" y1=\\"121\\" y2=\\"121\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"160\\" y2=\\"199\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"160\\" y2=\\"201\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"180\\" y1=\\"199\\" y2=\\"199\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"180\\" y1=\\"201\\" y2=\\"201\\"></line>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="100"
+      y2="100"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="84"
+    >
+      q1
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="220"
+      y2="220"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="204"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="40"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="40"
+      y2="81"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="180"
+      y1="79"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="180"
+      y1="81"
+      y2="81"
+    />
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="40"
+      y2="119"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="40"
+      y2="121"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="180"
+      y1="119"
+      y2="119"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="180"
+      y1="121"
+      y2="121"
+    />
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="160"
+      y2="199"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="160"
+      y2="201"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="180"
+      y1="199"
+      y2="199"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="180"
+      y1="201"
+      y2="201"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Quantum and classical registers 5`] = `
-"<line x1=\\"40\\" x2=\\"85\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"85\\" y1=\\"100\\" y2=\\"100\\"></line>
-<text x=\\"40\\" y=\\"84\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>
-<line x1=\\"40\\" x2=\\"85\\" y1=\\"220\\" y2=\\"220\\"></line>
-<text x=\\"40\\" y=\\"204\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"40\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"40\\" y2=\\"81\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"85\\" y1=\\"79\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"85\\" y1=\\"81\\" y2=\\"81\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"40\\" y2=\\"119\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"40\\" y2=\\"121\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"85\\" y1=\\"119\\" y2=\\"119\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"85\\" y1=\\"121\\" y2=\\"121\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"160\\" y2=\\"199\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"160\\" y2=\\"201\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"85\\" y1=\\"199\\" y2=\\"199\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"85\\" y1=\\"201\\" y2=\\"201\\"></line>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="100"
+      y2="100"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="84"
+    >
+      q1
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="220"
+      y2="220"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="204"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="40"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="40"
+      y2="81"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="85"
+      y1="79"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="85"
+      y1="81"
+      y2="81"
+    />
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="40"
+      y2="119"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="40"
+      y2="121"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="85"
+      y1="119"
+      y2="119"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="85"
+      y1="121"
+      y2="121"
+    />
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="160"
+      y2="199"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="160"
+      y2="201"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="85"
+      y1="199"
+      y2="199"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="85"
+      y1="201"
+      y2="201"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Quantum and classical registers 6`] = `
-"<line x1=\\"40\\" x2=\\"580\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"580\\" y1=\\"100\\" y2=\\"100\\"></line>
-<text x=\\"40\\" y=\\"84\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q1</text>
-<line x1=\\"40\\" x2=\\"580\\" y1=\\"220\\" y2=\\"220\\"></line>
-<text x=\\"40\\" y=\\"204\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"40\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"40\\" y2=\\"81\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"580\\" y1=\\"79\\" y2=\\"79\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"580\\" y1=\\"81\\" y2=\\"81\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"40\\" y2=\\"119\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"40\\" y2=\\"121\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"580\\" y1=\\"119\\" y2=\\"119\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"580\\" y1=\\"121\\" y2=\\"121\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"81\\" y1=\\"160\\" y2=\\"199\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"79\\" y1=\\"160\\" y2=\\"201\\"></line>
-<line class=\\"register-classical\\" x1=\\"81\\" x2=\\"580\\" y1=\\"199\\" y2=\\"199\\"></line>
-<line class=\\"register-classical\\" x1=\\"79\\" x2=\\"580\\" y1=\\"201\\" y2=\\"201\\"></line>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="100"
+      y2="100"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="84"
+    >
+      q1
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="220"
+      y2="220"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="204"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="40"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="40"
+      y2="81"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="580"
+      y1="79"
+      y2="79"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="580"
+      y1="81"
+      y2="81"
+    />
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="40"
+      y2="119"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="40"
+      y2="121"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="580"
+      y1="119"
+      y2="119"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="580"
+      y1="121"
+      y2="121"
+    />
+  </g>
+  <g>
+    <line
+      class="register-classical"
+      x1="81"
+      x2="81"
+      y1="160"
+      y2="199"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="79"
+      y1="160"
+      y2="201"
+    />
+    <line
+      class="register-classical"
+      x1="81"
+      x2="580"
+      y1="199"
+      y2="199"
+    />
+    <line
+      class="register-classical"
+      x1="79"
+      x2="580"
+      y1="201"
+      y2="201"
+    />
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Skipped quantum registers 1`] = `
-"<line x1=\\"40\\" x2=\\"180\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"180\\" y1=\\"160\\" y2=\\"160\\"></line>
-<text x=\\"40\\" y=\\"144\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line x1=\\"40\\" x2=\\"180\\" y1=\\"220\\" y2=\\"220\\"></line>
-<text x=\\"40\\" y=\\"204\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q3</text>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="160"
+      y2="160"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="144"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="180"
+      y1="220"
+      y2="220"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="204"
+    >
+      q3
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Skipped quantum registers 2`] = `
-"<line x1=\\"40\\" x2=\\"85\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"85\\" y1=\\"160\\" y2=\\"160\\"></line>
-<text x=\\"40\\" y=\\"144\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line x1=\\"40\\" x2=\\"85\\" y1=\\"220\\" y2=\\"220\\"></line>
-<text x=\\"40\\" y=\\"204\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q3</text>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="160"
+      y2="160"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="144"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="85"
+      y1="220"
+      y2="220"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="204"
+    >
+      q3
+    </text>
+  </g>
+</g>
 `;
 
 exports[`Testing formatRegisters Skipped quantum registers 3`] = `
-"<line x1=\\"40\\" x2=\\"580\\" y1=\\"40\\" y2=\\"40\\"></line>
-<text x=\\"40\\" y=\\"24\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q0</text>
-<line x1=\\"40\\" x2=\\"580\\" y1=\\"160\\" y2=\\"160\\"></line>
-<text x=\\"40\\" y=\\"144\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q2</text>
-<line x1=\\"40\\" x2=\\"580\\" y1=\\"220\\" y2=\\"220\\"></line>
-<text x=\\"40\\" y=\\"204\\" dominant-baseline=\\"hanging\\" text-anchor=\\"start\\" font-size=\\"75%\\">q3</text>"
+<g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="40"
+      y2="40"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="24"
+    >
+      q0
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="160"
+      y2="160"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="144"
+    >
+      q2
+    </text>
+  </g>
+  <g>
+    <line
+      x1="40"
+      x2="580"
+      y1="220"
+      y2="220"
+    />
+    <text
+      dominant-baseline="hanging"
+      font-size="75%"
+      text-anchor="start"
+      x="40"
+      y="204"
+    >
+      q3
+    </text>
+  </g>
+</g>
 `;
diff --git a/__tests__/gateFormatter.test.ts b/__tests__/gateFormatter.test.ts
index 1e391534..ab277e3a 100644
--- a/__tests__/gateFormatter.test.ts
+++ b/__tests__/gateFormatter.test.ts
@@ -8,8 +8,9 @@ import {
     _controlledGate,
     _groupedOperations,
     _classicalControlled,
-    _gateControls,
+    _zoomButton,
 } from '../src/formatters/gateFormatter';
+import { createSvgElement } from '../src/formatters/formatUtils';
 import { Metadata, GateType } from '../src/metadata';
 import {
     startX,
@@ -451,7 +452,7 @@ describe('Testing _controlledGate', () => {
             targetsY: [startY + registerHeight],
             width: minGateWidth,
         };
-        let svg: string = _controlledGate(metadata, 0);
+        let svg: SVGElement = _controlledGate(metadata, 0);
         expect(svg).toMatchSnapshot();
 
         // Flip target and control
@@ -470,7 +471,7 @@ describe('Testing _controlledGate', () => {
             width: minGateWidth,
         };
         // Control on top
-        let svg: string = _controlledGate(metadata, 0);
+        let svg: SVGElement = _controlledGate(metadata, 0);
         expect(svg).toMatchSnapshot();
 
         // Control on bottom
@@ -494,7 +495,7 @@ describe('Testing _controlledGate', () => {
             targetsY: [[startY + registerHeight]],
             width: 45,
         };
-        let svg: string = _controlledGate(metadata, 0);
+        let svg: SVGElement = _controlledGate(metadata, 0);
         expect(svg).toMatchSnapshot();
 
         // Flip target and control
@@ -513,7 +514,7 @@ describe('Testing _controlledGate', () => {
             width: 45,
         };
         // Target on bottom
-        let svg: string = _controlledGate(metadata, 0);
+        let svg: SVGElement = _controlledGate(metadata, 0);
         expect(svg).toMatchSnapshot();
 
         // Target on top
@@ -538,7 +539,7 @@ describe('Testing _controlledGate', () => {
             width: 45,
         };
         // Control on bottom
-        let svg: string = _controlledGate(metadata, 0);
+        let svg: SVGElement = _controlledGate(metadata, 0);
         expect(svg).toMatchSnapshot();
 
         // Control on top
@@ -563,7 +564,7 @@ describe('Testing _controlledGate', () => {
             width: 45,
         };
         // Controls on bottom
-        let svg: string = _controlledGate(metadata, 0);
+        let svg: SVGElement = _controlledGate(metadata, 0);
         expect(svg).toMatchSnapshot();
 
         // Controls on top
@@ -611,7 +612,7 @@ describe('Testing _swap', () => {
 
     test('Adjacent swap', () => {
         metadata.targetsY = [startY, startY + registerHeight];
-        let svg: string = _swap(metadata, 0);
+        let svg: SVGElement = _swap(metadata, 0);
         expect(svg).toMatchSnapshot();
         // Flip target and control
         metadata.targetsY = [startY + registerHeight, startY];
@@ -620,7 +621,7 @@ describe('Testing _swap', () => {
     });
     test('Non-adjacent swap', () => {
         metadata.targetsY = [startY, startY + registerHeight * 2];
-        let svg: string = _swap(metadata, 0);
+        let svg: SVGElement = _swap(metadata, 0);
         expect(svg).toMatchSnapshot();
         // Flip target and control
         metadata.targetsY = [startY + registerHeight * 2, startY];
@@ -634,14 +635,14 @@ describe('Testing _unitary', () => {
         expect(_unitary('H', startX, [[startY]], minGateWidth)).toMatchSnapshot();
     });
     test('Multiqubit unitary on consecutive registers', () => {
-        let svg: string = _unitary('ZZ', startX, [[startY, startY + registerHeight]], minGateWidth);
+        let svg: SVGElement = _unitary('ZZ', startX, [[startY, startY + registerHeight]], minGateWidth);
         expect(svg).toMatchSnapshot();
         svg = _unitary('ZZZ', startX, [[startY, startY + registerHeight, startY + registerHeight * 2]], minGateWidth);
         expect(svg).toMatchSnapshot();
     });
     test('Multiqubit unitary on non-consecutive registers', () => {
         // Dashed line between unitaries
-        let svg: string = _unitary('ZZ', startX, [[startY], [startY + registerHeight * 2]], minGateWidth);
+        let svg: SVGElement = _unitary('ZZ', startX, [[startY], [startY + registerHeight * 2]], minGateWidth);
         expect(svg).toMatchSnapshot();
         svg = _unitary(
             'ZZZ',
@@ -664,8 +665,9 @@ describe('Testing _unitary', () => {
         expect(svg).toMatchSnapshot();
     });
     test('No y coords', () => {
-        const svg: string = _unitary('ZZ', startX, [], minGateWidth);
-        expect(svg).toStrictEqual('');
+        expect(() => _unitary('ZZ', startX, [], minGateWidth)).toThrowError(
+            'Failed to render unitary gate (ZZ): has no y-values',
+        );
     });
 });
 
@@ -692,26 +694,36 @@ describe('Testing _createGate', () => {
         width: -1,
         dataAttributes: { a: '1', b: '2' },
     };
+    const line: SVGElement = createSvgElement('line');
     test('Empty gate', () => {
-        expect(_createGate(['<line />'], metadata, 0)).toEqual(
-            `<g class='gate' data-a='1' data-b='2'>\n<line />\n</g>`,
+        expect(_createGate([line], metadata, 0).outerHTML).toEqual(
+            '<g class="gate" data-a="1" data-b="2"><line></line></g>',
         );
     });
     test('Expanded gate', () => {
         if (metadata.dataAttributes) metadata.dataAttributes['expanded'] = 'true';
-        expect(_createGate(['<line />'], metadata, 0)).toMatchSnapshot();
+        expect(_createGate([line], metadata, 0)).toMatchSnapshot();
     });
 });
 
-describe('Testing _gateControls', () => {
+describe('Testing _zoomButton', () => {
     const metadata: Metadata = {
-        type: GateType.Invalid,
-        x: 0,
+        type: GateType.Group,
+        x: startX,
         controlsY: [],
-        targetsY: [],
+        targetsY: [startY],
         label: '',
-        width: -1,
-        dataAttributes: { a: '1', b: '2' },
+        width: minGateWidth + groupBoxPadding * 2,
+        children: [
+            {
+                type: GateType.Unitary,
+                x: startX + minGateWidth / 2 + groupBoxPadding,
+                controlsY: [],
+                targetsY: [[startY]],
+                label: 'X',
+                width: minGateWidth,
+            },
+        ],
     };
 
     test('Expanded gate', () => {
@@ -719,28 +731,28 @@ describe('Testing _gateControls', () => {
             metadata.dataAttributes['expanded'] = 'true';
             metadata.dataAttributes['zoom-in'] = 'true';
         }
-        expect(_gateControls(metadata, 0)).toMatchSnapshot();
+        expect(_zoomButton(metadata, 0)).toMatchSnapshot();
     });
     test('Non-expanded with no children gate', () => {
         if (metadata.dataAttributes) {
             delete metadata.dataAttributes['expanded'];
             delete metadata.dataAttributes['zoom-in'];
         }
-        expect(_gateControls(metadata, 0)).toMatchSnapshot();
+        expect(_zoomButton(metadata, 0)).toMatchSnapshot();
     });
     test('Non-expanded with children gate', () => {
         if (metadata.dataAttributes) {
             delete metadata.dataAttributes['expanded'];
             metadata.dataAttributes['zoom-in'] = 'true';
         }
-        expect(_gateControls(metadata, 0)).toMatchSnapshot();
+        expect(_zoomButton(metadata, 0)).toMatchSnapshot();
     });
     test('Expanded with children gate', () => {
         if (metadata.dataAttributes) {
             metadata.dataAttributes['expanded'] = 'true';
             metadata.dataAttributes['zoom-in'] = 'true';
         }
-        expect(_gateControls(metadata, 0)).toMatchSnapshot();
+        expect(_zoomButton(metadata, 0)).toMatchSnapshot();
     });
 });