Improve SVG Performance (#841)

* Improve SVG Performance

This PR introduces three new classes:  `svgNode`, `pathNode`, and `lineNode`. SVG data is then loaded into the domTree exclusively via instances of these classes.

`innerHTML` is banished.

* Fix lint errors

* Fix \cancel typo

* Fix sqrt height

* Adjust min-lenght

Adjust some of the extensible arrows to get a min-length that matches glyph length of the long arrows in KaTeX Main font range from Unicode 27F5  to 27FC.

The accent arrows still get min-lengths that match the arrows in the Unicode 2100 range.

* regenerate screenshots after optimizing SVG code

* update DisplayStyle screenshot for Chrome

* update OverUnderset and Smash screenshots for Chrome as well

* Remove escapes from template strings

* Pick up review comments

* Fix lint errors

* Add comments

src/buildHTML.js

@@ -1598,15 +1598,19 @@ groupTypes.xArrow = function(group, options) {
 
     const arrowBody = stretchy.svgSpan(group, options);
 
-    const arrowShift = -options.fontMetrics().axisHeight + arrowBody.depth;
-    const upperShift = -options.fontMetrics().axisHeight - arrowBody.height -
-        0.111;    // 2 mu. Ref: amsmath.dtx: #7\if0#2\else\mkern#2mu\fi
+    // Re shift: Note that stretchy.svgSpan returned arrowBody.depth = 0.
+    // The point we want on the math axis is at 0.5 * arrowBody.height.
+    const arrowShift = -options.fontMetrics().axisHeight +
+        0.5 * arrowBody.height;
+    // 2 mu kern. Ref: amsmath.dtx: #7\if0#2\else\mkern#2mu\fi
+    const upperShift = -options.fontMetrics().axisHeight -
+        0.5 * arrowBody.height - 0.111;
 
     // Generate the vlist
     let vlist;
     if (group.value.below) {
         const lowerShift = -options.fontMetrics().axisHeight
-            + lowerGroup.height + arrowBody.height
+            + lowerGroup.height + 0.5 * arrowBody.height
             + 0.111;
         vlist = buildCommon.makeVList([
             {type: "elem", elem: upperGroup, shift: upperShift},

src/delimiter.js

@@ -23,6 +23,7 @@
 import ParseError from "./ParseError";
 import Style from "./Style";
 
+import domTree from "./domTree";
 import buildCommon, { makeSpan } from "./buildCommon";
 import fontMetrics from "./fontMetrics";
 import symbols from "./symbols";
@@ -313,107 +314,65 @@ const makeStackedDelim = function(delim, heightTotal, center, options, mode,
         Style.TEXT, options, classes);
 };
 
-const sqrtInnerSVG = {
-    // The main path geometry is from glyph U221A in the font KaTeX Main
-    main: `<svg viewBox='0 0 400000 1000' preserveAspectRatio='xMinYMin
-slice'><path d='M95 622c-2.667 0-7.167-2.667-13.5
--8S72 604 72 600c0-2 .333-3.333 1-4 1.333-2.667 23.833-20.667 67.5-54s
-65.833-50.333 66.5-51c1.333-1.333 3-2 5-2 4.667 0 8.667 3.333 12 10l173
-378c.667 0 35.333-71 104-213s137.5-285 206.5-429S812 17.333 812 14c5.333
--9.333 12-14 20-14h399166v40H845.272L620 507 385 993c-2.667 4.667-9 7-19
-7-6 0-10-1-12-3L160 575l-65 47zM834 0h399166v40H845z'/></svg>`,
+const sqrtSvg = function(sqrtName, height, viewBoxHeight, options) {
+    let alternate;
+    if (sqrtName === "sqrtTall") {
+        // sqrtTall is from glyph U23B7 in the font KaTeX_Size4-Regular
+        // One path edge has a variable length. It runs from the viniculumn
+        // to a point near (14 units) the bottom of the surd. The viniculum
+        // is 40 units thick. So the length of the line in question is:
+        const vertSegment = viewBoxHeight - 54;
+        alternate = `M702 0H400000v40H742v${vertSegment}l-4 4-4 4c-.667.667
+-2 1.5-4 2.5s-4.167 1.833-6.5 2.5-5.5 1-9.5 1h-12l-28-84c-16.667-52-96.667
+-294.333-240-727l-212 -643 -85 170c-4-3.333-8.333-7.667-13 -13l-13-13l77-155
+ 77-156c66 199.333 139 419.667 219 661 l218 661zM702 0H400000v40H742z`;
+    }
+    const pathNode = new domTree.pathNode(sqrtName, alternate);
 
-    // size1 is from glyph U221A in the font KaTeX_Size1-Regular
-    1: `<svg viewBox='0 0 400000 1200' preserveAspectRatio='xMinYMin
-slice'><path d='M263 601c.667 0 18 39.667 52 119s68.167
- 158.667 102.5 238 51.833 119.333 52.5 120C810 373.333 980.667 17.667 982 11
-c4.667-7.333 11-11 19-11h398999v40H1012.333L741 607c-38.667 80.667-84 175-136
- 283s-89.167 185.333-111.5 232-33.833 70.333-34.5 71c-4.667 4.667-12.333 7-23
- 7l-12-1-109-253c-72.667-168-109.333-252-110-252-10.667 8-22 16.667-34 26-22
- 17.333-33.333 26-34 26l-26-26 76-59 76-60zM1001 0h398999v40H1012z'/></svg>`,
+    let attributes = [["width", "100%"], ["height", height + "em"]];
+    attributes.push(["viewBox", "0 0 400000 " + viewBoxHeight]);
+    attributes.push(["preserveAspectRatio", "xMinYMin slice"]);
+    const innerSVG =  new domTree.svgNode([pathNode], attributes);
 
-    // size2 is from glyph U221A in the font KaTeX_Size2-Regular
-    2: `<svg viewBox='0 0 400000 1800' preserveAspectRatio='xMinYMin
-slice'><path d='M1001 0h398999v40H1013.084S929.667 308 749
- 880s-277 876.333-289 913c-4.667 4.667-12.667 7-24 7h-12c-1.333-3.333-3.667
--11.667-7-25-35.333-125.333-106.667-373.333-214-744-10 12-21 25-33 39l-32 39
-c-6-5.333-15-14-27-26l25-30c26.667-32.667 52-63 76-91l52-60 208 722c56-175.333
- 126.333-397.333 211-666s153.833-488.167 207.5-658.5C944.167 129.167 975 32.667
- 983 10c4-6.667 10-10 18-10zm0 0h398999v40H1013z'/></svg>`,
-
-    // size3 is from glyph U221A in the font KaTeX_Size3-Regular
-    3: `<svg viewBox='0 0 400000 2400' preserveAspectRatio='xMinYMin
-slice'><path d='M424 2398c-1.333-.667-38.5-172-111.5-514
-S202.667 1370.667 202 1370c0-2-10.667 14.333-32 49-4.667 7.333-9.833 15.667
--15.5 25s-9.833 16-12.5 20l-5 7c-4-3.333-8.333-7.667-13-13l-13-13 76-122 77-121
- 209 968c0-2 84.667-361.667 254-1079C896.333 373.667 981.667 13.333 983 10
-c4-6.667 10-10 18-10h398999v40H1014.622S927.332 418.667 742 1206c-185.333
- 787.333-279.333 1182.333-282 1185-2 6-10 9-24 9-8 0-12-.667-12-2z
-M1001 0h398999v40H1014z'/></svg>`,
-
-    // size4 is from glyph U221A in the font KaTeX_Size4-Regular
-    4: `<svg viewBox='0 0 400000 3000' preserveAspectRatio='xMinYMin
-slice'><path d='M473 2713C812.333 913.667 982.333 13 983 11
-c3.333-7.333 9.333-11 18-11h399110v40H1017.698S927.168 518 741.5 1506C555.833
- 2494 462 2989 460 2991c-2 6-10 9-24 9-8 0-12-.667-12-2s-5.333-32-16-92c-50.667
--293.333-119.667-693.333-207-1200 0-1.333-5.333 8.667-16 30l-32 64-16 33-26-26
- 76-153 77-151c.667.667 35.667 202 105 604 67.333 400.667 102 602.667 104 606z
-M1001 0h398999v40H1017z'/></svg>`,
-
-    // tall is from glyph U23B7 in the font KaTeX_Size4-Regular
-    tall: `l-4 4-4 4c-.667.667-2 1.5-4 2.5s-4.167 1.833-6.5 2.5-5.5 1-9.5 1h
--12l-28-84c-16.667-52-96.667 -294.333-240-727l-212 -643 -85 170c-4-3.333-8.333
--7.667-13 -13l-13-13l77-155 77-156c66 199.333 139 419.667 219 661 l218 661z
-M702 0H400000v40H742z'/></svg>`,
+    attributes = [["width", "100%"], ["height", height + "em"]];
+    const svg = new domTree.svgNode([innerSVG], attributes);
+    return buildCommon.makeSpan([], [svg], options);
 };
 
 const sqrtSpan = function(height, delim, options) {
     // Create a span containing an SVG image of a sqrt symbol.
-    const span = buildCommon.makeSpan([], [], options);
+    let span;
     let sizeMultiplier = options.sizeMultiplier;  // default
+    let spanHeight;
+    let viewBoxHeight;
 
     if (delim.type === "small") {
         // Get an SVG that is derived from glyph U+221A in font KaTeX-Main.
+        viewBoxHeight = 1000;  // from font
         const newOptions = options.havingBaseStyle(delim.style);
         sizeMultiplier = newOptions.sizeMultiplier / options.sizeMultiplier;
-
-        span.height = 1 * sizeMultiplier;
-        span.style.height = span.height + "em";
+        spanHeight = 1 * sizeMultiplier;
+        span = sqrtSvg("sqrtMain", spanHeight, viewBoxHeight, options);
         span.surdWidth = 0.833 * sizeMultiplier;   // from the font.
-        //In the font, the glyph is 1000 units tall. The font scale is 1:1000.
-
-        span.innerHTML = `<svg width='100%' height='${span.height}em'>
-            ${sqrtInnerSVG['main']}</svg>`;
 
     } else if (delim.type === "large") {
         // These SVGs come from fonts: KaTeX_Size1, _Size2, etc.
-        // Get sqrt height from font data
-        span.height = sizeToMaxHeight[delim.size] / sizeMultiplier;
-        span.style.height = span.height + "em";
+        viewBoxHeight = 1000 * sizeToMaxHeight[delim.size];
+        spanHeight = sizeToMaxHeight[delim.size] / sizeMultiplier;
+        span = sqrtSvg("sqrtSize" + delim.size, spanHeight, viewBoxHeight, options);
         span.surdWidth = 1.0 / sizeMultiplier; // from the font
 
-        span.innerHTML = `<svg width="100%" height="${span.height}em">
-            ${sqrtInnerSVG[delim.size]}</svg>`;
-
     } else {
         // Tall sqrt. In TeX, this would be stacked using multiple glyphs.
         // We'll use a single SVG to accomplish the same thing.
-        span.height = height / sizeMultiplier;
-        span.style.height = span.height + "em";
+        spanHeight = height / sizeMultiplier;
+        viewBoxHeight = Math.floor(1000 * spanHeight);
+        span = sqrtSvg("sqrtTall", spanHeight, viewBoxHeight, options);
         span.surdWidth = 1.056 / sizeMultiplier;
-        const viewBoxHeight = Math.floor(span.height * 1000); // scale = 1:1000
-        const vertSegment = viewBoxHeight - 54;
-
-        // This \sqrt is customized in both height and width. We set the
-        // height now. Then CSS will stretch the image to the correct width.
-        // This SVG path comes from glyph U+23B7, font KaTeX_Size4-Regular.
-        span.innerHTML = `<svg width='100%' height='${span.height}em'>
-            <svg viewBox='0 0 400000 ${viewBoxHeight}'
-            preserveAspectRatio='xMinYMax slice'>
-            <path d='M702 0H400000v40H742v${vertSegment}
-            ${sqrtInnerSVG['tall']}</svg>`;
     }
 
+    span.height = spanHeight;
+    span.style.height = spanHeight + "em";
     span.sizeMultiplier = sizeMultiplier;
 
     return span;
@@ -590,7 +549,7 @@ const makeCustomSizedDelim = function(delim, height, center, options, mode,
     const delimType = traverseSequence(delim, height, sequence, options);
 
     if (delim === "\\surd") {
-        // Get an SVG image for
+        // Get an SVG image
         return sqrtSpan(height, delimType, options);
     } else {
         // Get the delimiter from font glyphs.

src/domTree.js

@@ -9,6 +9,7 @@
  */
 import {cjkRegex, hangulRegex} from "./unicodeRegexes";
 import utils from "./utils";
+import svgGeometry from "./svgGeometry";
 
 /**
  * Create an HTML className based on a list of classes. In addition to joining
@@ -39,7 +40,6 @@ class span {
         this.maxFontSize = 0;
         this.style = {};
         this.attributes = {};
-        this.innerHTML;           // used for inline SVG code.
         if (options) {
             if (options.style.isTight()) {
                 this.classes.push("mtight");
@@ -86,10 +86,6 @@ class span {
             }
         }
 
-        if (this.innerHTML) {
-            span.innerHTML = this.innerHTML;
-        }
-
         // Append the children, also as HTML nodes
         for (let i = 0; i < this.children.length; i++) {
             span.appendChild(this.children[i].toNode());
@@ -135,10 +131,6 @@ class span {
 
         markup += ">";
 
-        if (this.innerHTML) {
-            markup += this.innerHTML;
-        }
-
         // Add the markup of the children, also as markup
         for (let i = 0; i < this.children.length; i++) {
             markup += this.children[i].toMarkup();
@@ -344,8 +336,118 @@ class symbolNode {
     }
 }
 
+/**
+ * SVG nodes are used to render stretchy wide elements.
+ */
+class svgNode {
+    constructor(children, attributes) {
+        this.children = children || [];
+        this.attributes = attributes || [];
+    }
+
+    toNode() {
+        const svgNS = "http://www.w3.org/2000/svg";
+        const node = document.createElementNS(svgNS, "svg");
+
+        // Apply attributes
+        for (let i = 0; i < this.attributes.length; i++) {
+            const [name, value] = this.attributes[i];
+            node.setAttribute(name, value);
+        }
+
+        for (let i = 0; i < this.children.length; i++) {
+            node.appendChild(this.children[i].toNode());
+        }
+        return node;
+    }
+
+    toMarkup() {
+        let markup = "<svg";
+
+        // Apply attributes
+        for (let i = 0; i < this.attributes.length; i++) {
+            const [name, value] = this.attributes[i];
+            markup +=  ` ${name}='${value}'`;
+        }
+
+        markup += ">";
+
+        for (let i = 0; i < this.children.length; i++) {
+            markup += this.children[i].toMarkup();
+        }
+
+        markup += "</svg>";
+
+        return markup;
+
+    }
+}
+
+class pathNode {
+    constructor(pathName, alternate) {
+        this.pathName = pathName;
+        this.alternate = alternate;  // Used only for tall \sqrt
+    }
+
+    toNode() {
+        const svgNS = "http://www.w3.org/2000/svg";
+        const node = document.createElementNS(svgNS, "path");
+
+        if (this.pathName !== "sqrtTall") {
+            node.setAttribute("d", svgGeometry.path[this.pathName]);
+        } else {
+            node.setAttribute("d", this.alternate);
+        }
+
+        return node;
+    }
+
+    toMarkup() {
+        if (this.pathName !== "sqrtTall") {
+            return `<path d='${svgGeometry.path[this.pathName]}'/>`;
+        } else {
+            return `<path d='${this.alternate}'/>`;
+        }
+    }
+}
+
+class lineNode {
+    constructor(attributes) {
+        this.attributes = attributes || [];
+    }
+
+    toNode() {
+        const svgNS = "http://www.w3.org/2000/svg";
+        const node = document.createElementNS(svgNS, "line");
+
+        // Apply attributes
+        for (let i = 0; i < this.attributes.length; i++) {
+            const [name, value] = this.attributes[i];
+            node.setAttribute(name, value);
+        }
+
+        return node;
+    }
+
+    toMarkup() {
+        let markup = "<line";
+
+        for (let i = 0; i < this.attributes.length; i++) {
+            const [name, value] = this.attributes[i];
+            markup +=  ` ${name}='${value}'`;
+        }
+
+        markup += "/>";
+
+        return markup;
+    }
+}
+
 module.exports = {
     span: span,
     documentFragment: documentFragment,
     symbolNode: symbolNode,
+    svgNode: svgNode,
+    pathNode: pathNode,
+    lineNode: lineNode,
 };

src/stretchy.js

@@ -4,6 +4,7 @@
  * and other CSS trickery.
  */
 
+const domTree = require("./domTree");
 const buildCommon = require("./buildCommon");
 const mathMLTree = require("./mathMLTree");
 const utils = require("./utils");
@@ -51,52 +52,6 @@ const mathMLnode = function(label) {
     return node;
 };
 
-// In the katexImagesData object just below, the dimensions all
-// correspond to path geometry inside the relevant SVG.
-// For example, \rightarrow uses the same arrowhead as glyph U+2192
-// from the KaTeX Main font. The scaling factor is 1000.
-// That is, inside the font, that arrowhead is 522 units tall, which
-// corresponds to 0.522 em inside the document.
-// And for extensible arrows, we split that distance around the math axis.
-
-const katexImagesData = {
-                 // height, depth, imageName, minWidth
-    overleftarrow: [0.522, 0, "leftarrow", 0.5],
-    underleftarrow: [0.522, 0, "leftarrow", 0.5],
-    xleftarrow: [0.261, 0.261, "leftarrow", 0.783],
-    overrightarrow: [0.522, 0, "rightarrow", 0.5],
-    underrightarrow: [0.522, 0, "rightarrow", 0.5],
-    xrightarrow: [0.261, 0.261, "rightarrow", 0.783],
-    overbrace: [0.548, 0, "overbrace", 1.6],
-    underbrace: [0.548, 0, "underbrace", 1.6],
-    overleftrightarrow: [0.522, 0, "leftrightarrow", 0.5],
-    underleftrightarrow: [0.522, 0, "leftrightarrow", 0.5],
-    xleftrightarrow: [0.261, 0.261, "leftrightarrow", 0.783],
-    Overrightarrow: [0.56, 0, "doublerightarrow", 0.5],
-    xLeftarrow: [0.28, 0.28, "doubleleftarrow", 0.783],
-    xRightarrow: [0.28, 0.28, "doublerightarrow", 0.783],
-    xLeftrightarrow: [0.28, 0.28, "doubleleftrightarrow", 0.955],
-    overleftharpoon: [0.522, 0, "leftharpoon", 0.5],
-    overrightharpoon: [0.522, 0, "rightharpoon", 0.5],
-    xleftharpoonup: [0.261, 0.261, "leftharpoon", 0.783],
-    xrightharpoonup: [0.261, 0.261, "rightharpoon", 0.783],
-    xhookleftarrow: [0.261, 0.261, "hookleftarrow", 0.87],
-    xhookrightarrow: [0.261, 0.261, "hookrightarrow", 0.87],
-    overlinesegment: [0.414, 0, "linesegment", 0.5],
-    underlinesegment: [0.414, 0, "linesegment", 0.5],
-    xmapsto: [0.261, 0.261, "mapsto", 0.783],
-    xrightharpoondown: [0.261, 0.261, "rightharpoondown", 0.783],
-    xleftharpoondown: [0.261, 0.261, "leftharpoondown", 0.783],
-    xrightleftharpoons: [0.358, 0.358, "rightleftharpoons", 0.716],
-    xleftrightharpoons: [0.358, 0.358, "leftrightharpoons", 0.716],
-    overgroup: [0.342, 0, "overgroup", 0.87],
-    undergroup: [0.342, 0, "undergroup", 0.87],
-    xtwoheadleftarrow: [0.167, 0.167, "twoheadleftarrow", 0.86],
-    xtwoheadrightarrow: [0.167, 0.167, "twoheadrightarrow", 0.86],
-    xLongequal: [0.167, 0.167, "longequal", 0.5],
-    xtofrom: [0.264, 0.264, "tofrom", 0.86],
-};
-
 // Many of the KaTeX SVG images have been adapted from glyphs in KaTeX fonts.
 // Copyright (c) 2009-2010, Design Science, Inc. (<www.mathjax.org>)
 // Copyright (c) 2014-2017 Khan Academy (<www.khanacademy.org>)
@@ -137,309 +92,52 @@ const katexImagesData = {
 //    gray pixel that a  single path would generate. So we get arrow shafts
 //    whose edges appear to be sharper.
 
-const svgPath = {
-    doubleleftarrow: `<path d='M262 157
-l10-10c34-36 62.7-77 86-123 3.3-8 5-13.3 5-16 0-5.3-6.7-8-20-8-7.3
- 0-12.2.5-14.5 1.5-2.3 1-4.8 4.5-7.5 10.5-49.3 97.3-121.7 169.3-217 216-28
- 14-57.3 25-88 33-6.7 2-11 3.8-13 5.5-2 1.7-3 4.2-3 7.5s1 5.8 3 7.5
-c2 1.7 6.3 3.5 13 5.5 68 17.3 128.2 47.8 180.5 91.5 52.3 43.7 93.8 96.2 124.5
- 157.5 9.3 8 15.3 12.3 18 13h6c12-.7 18-4 18-10 0-2-1.7-7-5-15-23.3-46-52-87
--86-123l-10-10h399738v-40H218c328 0 0 0 0 0l-10-8c-26.7-20-65.7-43-117-69 2.7
--2 6-3.7 10-5 36.7-16 72.3-37.3 107-64l10-8h399782v-40z
-m8 0v40h399730v-40zm0 194v40h399730v-40z'/>`,
+// In the katexImagesData object just below, the dimensions all
+// correspond to path geometry inside the relevant SVG.
+// For example, \overrightarrow uses the same arrowhead as glyph U+2192
+// from the KaTeX Main font. The scaling factor is 1000.
+// That is, inside the font, that arrowhead is 522 units tall, which
+// corresponds to 0.522 em inside the document.
 
-    doublerightarrow: `<path d='M399738 392l
--10 10c-34 36-62.7 77-86 123-3.3 8-5 13.3-5 16 0 5.3 6.7 8 20 8 7.3 0 12.2-.5
- 14.5-1.5 2.3-1 4.8-4.5 7.5-10.5 49.3-97.3 121.7-169.3 217-216 28-14 57.3-25 88
--33 6.7-2 11-3.8 13-5.5 2-1.7 3-4.2 3-7.5s-1-5.8-3-7.5c-2-1.7-6.3-3.5-13-5.5-68
--17.3-128.2-47.8-180.5-91.5-52.3-43.7-93.8-96.2-124.5-157.5-9.3-8-15.3-12.3-18
--13h-6c-12 .7-18 4-18 10 0 2 1.7 7 5 15 23.3 46 52 87 86 123l10 10H0v40h399782
-c-328 0 0 0 0 0l10 8c26.7 20 65.7 43 117 69-2.7 2-6 3.7-10 5-36.7 16-72.3 37.3
--107 64l-10 8H0v40zM0 157v40h399730v-40zm0 194v40h399730v-40z'/>`,
+const katexImagesData = {
+                   //   path(s), minWidth, height, align
+    overrightarrow: [["rightarrow"], 0.888, 522, "xMaxYMin"],
+    overleftarrow: [["leftarrow"], 0.888, 522, "xMinYMin"],
+    underrightarrow: [["rightarrow"], 0.888, 522, "xMaxYMin"],
+    underleftarrow: [["leftarrow"], 0.888, 522, "xMinYMin"],
+    xrightarrow: [["rightarrow"], 1.469, 522, "xMaxYMin"],
+    xleftarrow: [["leftarrow"], 1.469, 522, "xMinYMin"],
+    Overrightarrow: [["doublerightarrow"], 0.888, 560, "xMaxYMin"],
+    xRightarrow: [["doublerightarrow"], 1.526, 560, "xMaxYMin"],
+    xLeftarrow: [["doubleleftarrow"], 1.526, 560, "xMinYMin"],
+    overleftharpoon: [["leftharpoon"], 0.888, 522, "xMinYMin"],
+    xleftharpoonup: [["leftharpoon"], 0.888, 522, "xMinYMin"],
+    xleftharpoondown: [["leftharpoondown"], 0.888, 522, "xMinYMin"],
+    overrightharpoon: [["rightharpoon"], 0.888, 522, "xMaxYMin"],
+    xrightharpoonup: [["rightharpoon"], 0.888, 522, "xMaxYMin"],
+    xrightharpoondown: [["rightharpoondown"], 0.888, 522, "xMaxYMin"],
+    xLongequal: [["longequal"], 0.888, 334, "xMinYMin"],
+    xtwoheadleftarrow: [["twoheadleftarrow"], 0.888, 334, "xMinYMin"],
+    xtwoheadrightarrow: [["twoheadrightarrow"], 0.888, 334, "xMaxYMin"],
 
-    leftarrow: `<path d='M400000 241H110l3-3c68.7-52.7 113.7-120
- 135-202 4-14.7 6-23 6-25 0-7.3-7-11-21-11-8 0-13.2.8-15.5 2.5-2.3 1.7-4.2 5.8
--5.5 12.5-1.3 4.7-2.7 10.3-4 17-12 48.7-34.8 92-68.5 130S65.3 228.3 18 247
-c-10 4-16 7.7-18 11 0 8.7 6 14.3 18 17 47.3 18.7 87.8 47 121.5 85S196 441.3 208
- 490c.7 2 1.3 5 2 9s1.2 6.7 1.5 8c.3 1.3 1 3.3 2 6s2.2 4.5 3.5 5.5c1.3 1 3.3
- 1.8 6 2.5s6 1 10 1c14 0 21-3.7 21-11 0-2-2-10.3-6-25-20-79.3-65-146.7-135-202
- l-3-3h399890zM100 241v40h399900v-40z'/>`,
-
-    rightarrow: `<path d='M0 241v40h399891c-47.3 35.3-84 78-110 128
--16.7 32-27.7 63.7-33 95 0 1.3-.2 2.7-.5 4-.3 1.3-.5 2.3-.5 3 0 7.3 6.7 11 20
- 11 8 0 13.2-.8 15.5-2.5 2.3-1.7 4.2-5.5 5.5-11.5 2-13.3 5.7-27 11-41 14.7-44.7
- 39-84.5 73-119.5s73.7-60.2 119-75.5c6-2 9-5.7 9-11s-3-9-9-11c-45.3-15.3-85
--40.5-119-75.5s-58.3-74.8-73-119.5c-4.7-14-8.3-27.3-11-40-1.3-6.7-3.2-10.8-5.5
--12.5-2.3-1.7-7.5-2.5-15.5-2.5-14 0-21 3.7-21 11 0 2 2 10.3 6 25 20.7 83.3 67
- 151.7 139 205zm0 0v40h399900v-40z'/>`,
-};
-
-const innerSVG = {
-    // Since bcancel's SVG is inline and it omits the viewBox attribute,
-    // it's stroke-width will not vary with span area.
-    bcancel: `<line x1='0' y1='0' x2='100%' y2='100%' stroke-width='0.046em'/>`,
-
-    cancel: `<line x1='0' y1='100%' x2='100%' y2='0' stroke-width='0.046em'/>`,
-
-    // The doubleleftarrow geometry is from glyph U+21D0 in the font KaTeX Main
-    doubleleftarrow: `><svg viewBox='0 0 400000 549'
-preserveAspectRatio='xMinYMin slice'>${svgPath["doubleleftarrow"]}</svg>`,
-
-    // doubleleftrightarrow is from glyph U+21D4 in font KaTeX Main
-    doubleleftrightarrow: `><svg width='50.1%' viewBox='0 0 400000 549'
-preserveAspectRatio='xMinYMin slice'>${svgPath["doubleleftarrow"]}</svg>
-<svg x='50%' width='50%' viewBox='0 0 400000 549' preserveAspectRatio='xMaxYMin
- slice'>${svgPath["doublerightarrow"]}</svg>`,
-
-    // doublerightarrow is from glyph U+21D2 in font KaTeX Main
-    doublerightarrow: `><svg viewBox='0 0 400000 549'
-preserveAspectRatio='xMaxYMin slice'>${svgPath["doublerightarrow"]}</svg>`,
-
-    // hookleftarrow is from glyph U+21A9 in font KaTeX Main
-    hookleftarrow: `><svg width='50.1%' viewBox='0 0 400000 522'
-preserveAspectRatio='xMinYMin slice'>${svgPath["leftarrow"]}</svg>
-<svg x='50%' width='50%' viewBox='0 0 400000 522' preserveAspectRatio='xMaxYMin
- slice'><path d='M399859 241c-764 0 0 0 0 0 40-3.3 68.7
- -15.7 86-37 10-12 15-25.3 15-40 0-22.7-9.8-40.7-29.5-54-19.7-13.3-43.5-21-71.5
- -23-17.3-1.3-26-8-26-20 0-13.3 8.7-20 26-20 38 0 71 11.2 99 33.5 0 0 7 5.6 21
- 16.7 14 11.2 21 33.5 21 66.8s-14 61.2-42 83.5c-28 22.3-61 33.5-99 33.5L0 241z
- M0 281v-40h399859v40z'/></svg>`,
-
-    // hookrightarrow is from glyph U+21AA in font KaTeX Main
-    hookrightarrow: `><svg width='50.1%' viewBox='0 0 400000 522'
-preserveAspectRatio='xMinYMin slice'><path d='M400000 281
-H103s-33-11.2-61-33.5S0 197.3 0 164s14.2-61.2 42.5-83.5C70.8 58.2 104 47 142 47
-c16.7 0 25 6.7 25 20 0 12-8.7 18.7-26 20-40 3.3-68.7 15.7-86 37-10 12-15 25.3
--15 40 0 22.7 9.8 40.7 29.5 54 19.7 13.3 43.5 21 71.5 23h399859zM103 281v-40
-h399897v40z'/></svg><svg x='50%' width='50%' viewBox='0 0 400000 522'
-preserveAspectRatio='xMaxYMin slice'>${svgPath["rightarrow"]}</svg>`,
-
-    // leftarrow is from glyph U+2190 in font KaTeX Main
-    leftarrow: `><svg viewBox='0 0 400000 522' preserveAspectRatio='xMinYMin
- slice'>${svgPath["leftarrow"]}</svg>`,
-
-    // leftharpoon is from glyph U+21BD in font KaTeX Main
-    leftharpoon: `><svg viewBox='0 0 400000 522' preserveAspectRatio='xMinYMin
- slice'><path d='M0 267c.7 5.3 3 10 7 14h399993v-40H93c3.3
--3.3 10.2-9.5 20.5-18.5s17.8-15.8 22.5-20.5c50.7-52 88-110.3 112-175 4-11.3 5
--18.3 3-21-1.3-4-7.3-6-18-6-8 0-13 .7-15 2s-4.7 6.7-8 16c-42 98.7-107.3 174.7
--196 228-6.7 4.7-10.7 8-12 10-1.3 2-2 5.7-2 11zm100-26v40h399900v-40z'/></svg>`,
-
-    // leftharpoondown is from glyph U+21BD in font KaTeX Main
-    leftharpoondown: `><svg viewBox='0 0 400000 522'
-preserveAspectRatio='xMinYMin slice'><path d="M7 241c-4 4-6.333 8.667-7 14
- 0 5.333.667 9 2 11s5.333 5.333 12 10c90.667 54 156 130 196 228 3.333 10.667
- 6.333 16.333 9 17 2 .667 5 1 9 1h5c10.667 0 16.667-2 18-6 2-2.667 1-9.667-3-21
- -32-87.333-82.667-157.667-152-211l-3-3h399907v-40z
-M93 281 H400000 v-40L7 241z"/></svg>`,
-
-    // leftrightarrow is from glyph U+2194 in font KaTeX Main
-    leftrightarrow: `><svg width='50.1%' viewBox='0 0 400000 522'
-preserveAspectRatio='xMinYMin slice'>${svgPath["leftarrow"]}</svg>
-<svg x='50%' width='50%' viewBox='0 0 400000 522' preserveAspectRatio='xMaxYMin
- slice'>${svgPath["rightarrow"]}</svg>`,
-
-    // leftrightharpoons is from glyphs U+21BC/21B1 in font KaTeX Main
-    leftrightharpoons: `><svg width='50.1%' viewBox='0 0 400000 716'
-preserveAspectRatio='xMinYMin slice'><path d='M0 267c.7 5.3
- 3 10 7 14h399993v-40H93c3.3-3.3 10.2-9.5 20.5-18.5s17.8-15.8 22.5-20.5c50.7-52
- 88-110.3 112-175 4-11.3 5-18.3 3-21-1.3-4-7.3-6-18-6-8 0-13 .7-15 2s-4.7 6.7-8
- 16c-42 98.7-107.3 174.7-196 228-6.7 4.7-10.7 8-12 10-1.3 2-2 5.7-2 11zm100-26
-v40h399900v-40zM0 435v40h400000v-40zm0 0v40h400000v-40z'/></svg>
-<svg x='50%' width='50%' viewBox='0 0 400000 716' preserveAspectRatio='xMaxYMin
- slice'><path d='M399747 705c0 7.3 6.7 11 20 11 8 0 13-.8
- 15-2.5s4.7-6.8 8-15.5c40-94 99.3-166.3 178-217 13.3-8 20.3-12.3 21-13 5.3-3.3
- 8.5-5.8 9.5-7.5 1-1.7 1.5-5.2 1.5-10.5s-2.3-10.3-7-15H0v40h399908c-34 25.3
--64.7 57-92 95-27.3 38-48.7 77.7-64 119-3.3 8.7-5 14-5 16zM0 435v40h399900v-40z
-m0-194v40h400000v-40zm0 0v40h400000v-40z'/></svg>`,
-
-    linesegment: `><svg width='50.1%' viewBox='0 0 400000 414'
-preserveAspectRatio='xMinYMin slice'><path d='M40 187V40H0
-v334h40V227h399960v-40zm0 0V40H0v334h40V227h399960v-40z'/></svg><svg x='50%'
-width='50%' viewBox='0 0 400000 414' preserveAspectRatio='xMaxYMin slice'>
-<path d='M0 187v40h399960v147h40V40h-40v147zm0
- 0v40h399960v147h40V40h-40v147z'/></svg>`,
-
-    longequal: ` viewBox='0 0 100 334' preserveAspectRatio='none'>
-<path d='M0 50h100v40H0zm0 194h100v40H0z'/>`,
-
-    // mapsto is from glyph U+21A6 in font KaTeX Main
-    mapsto: `><svg width='50.1%' viewBox='0 0 400000 522'
-preserveAspectRatio='xMinYMin slice'><path d='M40 241c740
- 0 0 0 0 0v-75c0-40.7-.2-64.3-.5-71-.3-6.7-2.2-11.7-5.5-15-4-4-8.7-6-14-6-5.3 0
--10 2-14 6C2.7 83.3.8 91.3.5 104 .2 116.7 0 169 0 261c0 114 .7 172.3 2 175 4 8
- 10 12 18 12 5.3 0 10-2 14-6 3.3-3.3 5.2-8.3 5.5-15 .3-6.7.5-30.3.5-71v-75
-h399960zm0 0v40h399960v-40z'/></svg><svg x='50%' width='50%' viewBox='0 0
- 400000 522' preserveAspectRatio='xMaxYMin slice'>${svgPath["rightarrow"]}</svg>`,
-
-    // overbrace is from glyphs U+23A9/23A8/23A7 in font KaTeX_Size4-Regular
-    overbrace: `><svg width='25.5%' viewBox='0 0 400000 548'
-preserveAspectRatio='xMinYMin slice'><path d='M6 548l-6-6
-v-35l6-11c56-104 135.3-181.3 238-232 57.3-28.7 117-45 179-50h399577v120H403
-c-43.3 7-81 15-113 26-100.7 33-179.7 91-237 174-2.7 5-6 9-10 13-.7 1-7.3 1-20 1
-H6z'/></svg><svg x='25%' width='50%' viewBox='0 0 400000 548'
-preserveAspectRatio='xMidYMin slice'><path d='M200428 334
-c-100.7-8.3-195.3-44-280-108-55.3-42-101.7-93-139-153l-9-14c-2.7 4-5.7 8.7-9 14
--53.3 86.7-123.7 153-211 199-66.7 36-137.3 56.3-212 62H0V214h199568c178.3-11.7
- 311.7-78.3 403-201 6-8 9.7-12 11-12 .7-.7 6.7-1 18-1s17.3.3 18 1c1.3 0 5 4 11
- 12 44.7 59.3 101.3 106.3 170 141s145.3 54.3 229 60h199572v120z'/></svg>
-<svg x='74.9%' width='24.1%' viewBox='0 0 400000 548'
-preserveAspectRatio='xMaxYMin slice'><path d='M400000 542l
--6 6h-17c-12.7 0-19.3-.3-20-1-4-4-7.3-8.3-10-13-35.3-51.3-80.8-93.8-136.5-127.5
-s-117.2-55.8-184.5-66.5c-.7 0-2-.3-4-1-18.7-2.7-76-4.3-172-5H0V214h399571l6 1
-c124.7 8 235 61.7 331 161 31.3 33.3 59.7 72.7 85 118l7 13v35z'/></svg>`,
-
-    // overgroup is from the MnSymbol package (public domain)
-    overgroup: `><svg width='50.1%' viewBox='0 0 400000 342'
-preserveAspectRatio='xMinYMin slice'><path d='M400000 80
-H435C64 80 168.3 229.4 21 260c-5.9 1.2-18 0-18 0-2 0-3-1-3-3v-38C76 61 257 0
- 435 0h399565z'/></svg><svg x='50%' width='50%' viewBox='0 0 400000 342'
-preserveAspectRatio='xMaxYMin slice'><path d='M0 80h399565
-c371 0 266.7 149.4 414 180 5.9 1.2 18 0 18 0 2 0 3-1 3-3v-38
-c-76-158-257-219-435-219H0z'/></svg>`,
-
-    // rightarrow is from glyph U+2192 in font KaTeX Main
-    rightarrow: `><svg viewBox='0 0 400000 522' preserveAspectRatio='xMaxYMin
- slice'>${svgPath["rightarrow"]}</svg>`,
-
-    // rightharpoon is from glyph U+21C0 in font KaTeX Main
-    rightharpoon: `><svg viewBox='0 0 400000 522' preserveAspectRatio='xMaxYMin
- slice'><path d='M0 241v40h399993c4.7-4.7 7-9.3 7-14 0-9.3
--3.7-15.3-11-18-92.7-56.7-159-133.7-199-231-3.3-9.3-6-14.7-8-16-2-1.3-7-2-15-2
--10.7 0-16.7 2-18 6-2 2.7-1 9.7 3 21 15.3 42 36.7 81.8 64 119.5 27.3 37.7 58
- 69.2 92 94.5zm0 0v40h399900v-40z'/></svg>`,
-
-    // rightharpoondown is from glyph U+21C1 in font KaTeX Main
-    rightharpoondown: `><svg viewBox='0 0 400000 522'
-preserveAspectRatio='xMaxYMin slice'><path d='M399747 511
-c0 7.3 6.7 11 20 11 8 0 13-.8 15-2.5s4.7-6.8 8-15.5c40-94 99.3-166.3 178-217
- 13.3-8 20.3-12.3 21-13 5.3-3.3 8.5-5.8 9.5-7.5 1-1.7 1.5-5.2 1.5-10.5s-2.3
- -10.3-7-15H0v40h399908c-34 25.3-64.7 57-92 95-27.3 38-48.7 77.7-64 119-3.3
- 8.7-5 14-5 16zM0 241v40h399900v-40z'/></svg>`,
-
-    // rightleftharpoons is from glyph U+21CC in font KaTeX Main
-    rightleftharpoons: `><svg width='50%' viewBox='0 0 400000 716'
-preserveAspectRatio='xMinYMin slice'><path d='M7 435c-4 4
--6.3 8.7-7 14 0 5.3.7 9 2 11s5.3 5.3 12 10c90.7 54 156 130 196 228 3.3 10.7 6.3
- 16.3 9 17 2 .7 5 1 9 1h5c10.7 0 16.7-2 18-6 2-2.7 1-9.7-3-21-32-87.3-82.7
--157.7-152-211l-3-3h399907v-40H7zm93 0v40h399900v-40zM0 241v40h399900v-40z
-m0 0v40h399900v-40z'/></svg><svg x='50%' width='50%' viewBox='0 0 400000 716'
-preserveAspectRatio='xMaxYMin slice'><path d='M0 241v40
-h399993c4.7-4.7 7-9.3 7-14 0-9.3-3.7-15.3-11-18-92.7-56.7-159-133.7-199-231-3.3
--9.3-6-14.7-8-16-2-1.3-7-2-15-2-10.7 0-16.7 2-18 6-2 2.7-1 9.7 3 21 15.3 42
- 36.7 81.8 64 119.5 27.3 37.7 58 69.2 92 94.5zm0 0v40h399900v-40z
- m100 194v40h399900v-40zm0 0v40h399900v-40z'/></svg>`,
-
-    // tilde1 is a modified version of a glyph from the MnSymbol package
-    tilde1: ` viewBox='0 0 600 260' preserveAspectRatio='none'>
-<path d='M200 55.538c-77 0-168 73.953-177 73.953-3 0-7
--2.175-9-5.437L2 97c-1-2-2-4-2-6 0-4 2-7 5-9l20-12C116 12 171 0 207 0c86 0
- 114 68 191 68 78 0 168-68 177-68 4 0 7 2 9 5l12 19c1 2.175 2 4.35 2 6.525 0
- 4.35-2 7.613-5 9.788l-19 13.05c-92 63.077-116.937 75.308-183 76.128
--68.267.847-113-73.952-191-73.952z'/>`,
-
-    // Ditto tilde2, tilde3, and tilde 4
-    tilde2: ` viewBox='0 0 1033 286' preserveAspectRatio='none'>
-<path d='M344 55.266c-142 0-300.638 81.316-311.5 86.418
--8.01 3.762-22.5 10.91-23.5 5.562L1 120c-1-2-1-3-1-4 0-5 3-9 8-10l18.4-9C160.9
- 31.9 283 0 358 0c148 0 188 122 331 122s314-97 326-97c4 0 8 2 10 7l7 21.114
-c1 2.14 1 3.21 1 4.28 0 5.347-3 9.626-7 10.696l-22.3 12.622C852.6 158.372 751
- 181.476 676 181.476c-149 0-189-126.21-332-126.21z'/>`,
-
-    tilde3: ` viewBox='0 0 2339 306' preserveAspectRatio='none'>
-<path d='M786 59C457 59 32 175.242 13 175.242c-6 0-10-3.457
--11-10.37L.15 138c-1-7 3-12 10-13l19.2-6.4C378.4 40.7 634.3 0 804.3 0c337 0
- 411.8 157 746.8 157 328 0 754-112 773-112 5 0 10 3 11 9l1 14.075c1 8.066-.697
- 16.595-6.697 17.492l-21.052 7.31c-367.9 98.146-609.15 122.696-778.15 122.696
- -338 0-409-156.573-744-156.573z'/>`,
-
-    tilde4: ` viewBox='0 0 2340 312' preserveAspectRatio='none'>
-<path d='M786 58C457 58 32 177.487 13 177.487c-6 0-10-3.345
--11-10.035L.15 143c-1-7 3-12 10-13l22-6.7C381.2 35 637.15 0 807.15 0c337 0 409
- 177 744 177 328 0 754-127 773-127 5 0 10 3 11 9l1 14.794c1 7.805-3 13.38-9
- 14.495l-20.7 5.574c-366.85 99.79-607.3 139.372-776.3 139.372-338 0-409
- -175.236-744-175.236z'/>`,
-
-    // tofrom is from glyph U+21C4 in font KaTeX AMS Regular
-    tofrom: `><svg width='50.1%' viewBox='0 0 400000 528'
-preserveAspectRatio='xMinYMin slice'><path d='M0 147h400000
-v40H0zm0 214c68 40 115.7 95.7 143 167h22c15.3 0 23-.3 23-1 0-1.3-5.3-13.7-16-37
--18-35.3-41.3-69-70-101l-7-8h399905v-40H95l7-8c28.7-32 52-65.7 70-101 10.7-23.3
- 16-35.7 16-37 0-.7-7.7-1-23-1h-22C115.7 265.3 68 321 0 361zm0-174v-40h399900
-v40zm100 154v40h399900v-40z'/></svg><svg x='50%' width='50%' viewBox='0 0
- 400000 528' preserveAspectRatio='xMaxYMin slice'><path
-d='M400000 167c-70.7-42-118-97.7-142-167h-23c-15.3 0-23 .3-23 1 0 1.3 5.3 13.7
- 16 37 18 35.3 41.3 69 70 101l7 8H0v40h399905l-7 8c-28.7 32-52 65.7-70 101-10.7
- 23.3-16 35.7-16 37 0 .7 7.7 1 23 1h23c24-69.3 71.3-125 142-167z
- M100 147v40h399900v-40zM0 341v40h399900v-40z'/></svg>`,
-
-    // twoheadleftarrow is from glyph U+219E in font KaTeX AMS Regular
-    twoheadleftarrow: `><svg viewBox='0 0 400000 334'
-preserveAspectRatio='xMinYMin slice'><path d='M0 167c68 40
- 115.7 95.7 143 167h22c15.3 0 23-.3 23-1 0-1.3-5.3-13.7-16-37-18-35.3-41.3-69
--70-101l-7-8h125l9 7c50.7 39.3 85 86 103 140h46c0-4.7-6.3-18.7-19-42-18-35.3
--40-67.3-66-96l-9-9h399716v-40H284l9-9c26-28.7 48-60.7 66-96 12.7-23.333 19
--37.333 19-42h-46c-18 54-52.3 100.7-103 140l-9 7H95l7-8c28.7-32 52-65.7 70-101
- 10.7-23.333 16-35.7 16-37 0-.7-7.7-1-23-1h-22C115.7 71.3 68 127 0 167z'/>
-</svg>`,
-
-    // twoheadrightarrow is from glyph U+21A0 in font KaTeX AMS Regular
-    twoheadrightarrow: `><svg viewBox='0 0 400000 334'
-preserveAspectRatio='xMaxYMin slice'><path d='M400000 167
-c-68-40-115.7-95.7-143-167h-22c-15.3 0-23 .3-23 1 0 1.3 5.3 13.7 16 37 18 35.3
- 41.3 69 70 101l7 8h-125l-9-7c-50.7-39.3-85-86-103-140h-46c0 4.7 6.3 18.7 19 42
- 18 35.3 40 67.3 66 96l9 9H0v40h399716l-9 9c-26 28.7-48 60.7-66 96-12.7 23.333
--19 37.333-19 42h46c18-54 52.3-100.7 103-140l9-7h125l-7 8c-28.7 32-52 65.7-70
- 101-10.7 23.333-16 35.7-16 37 0 .7 7.7 1 23 1h22c27.3-71.3 75-127 143-167z'/>
-</svg>`,
-
-    // underbrace is from glyphs U+23A9/23A8/23A7 in font KaTeX_Size4-Regular
-    underbrace: `><svg width='25.1%' viewBox='0 0 400000 548'
-preserveAspectRatio='xMinYMin slice'><path d='M0 6l6-6h17
-c12.688 0 19.313.3 20 1 4 4 7.313 8.3 10 13 35.313 51.3 80.813 93.8 136.5 127.5
- 55.688 33.7 117.188 55.8 184.5 66.5.688 0 2 .3 4 1 18.688 2.7 76 4.3 172 5
-h399450v120H429l-6-1c-124.688-8-235-61.7-331-161C60.687 138.7 32.312 99.3 7 54
-L0 41V6z'/></svg><svg x='25%' width='50%' viewBox='0 0 400000 548'
-preserveAspectRatio='xMidYMin slice'><path d='M199572 214
-c100.7 8.3 195.3 44 280 108 55.3 42 101.7 93 139 153l9 14c2.7-4 5.7-8.7 9-14
- 53.3-86.7 123.7-153 211-199 66.7-36 137.3-56.3 212-62h199568v120H200432c-178.3
- 11.7-311.7 78.3-403 201-6 8-9.7 12-11 12-.7.7-6.7 1-18 1s-17.3-.3-18-1c-1.3 0
--5-4-11-12-44.7-59.3-101.3-106.3-170-141s-145.3-54.3-229-60H0V214z'/></svg>
-<svg x='74.9%' width='25.1%' viewBox='0 0 400000 548'
-preserveAspectRatio='xMaxYMin slice'><path d='M399994 0l6 6
-v35l-6 11c-56 104-135.3 181.3-238 232-57.3 28.7-117 45-179 50H-300V214h399897
-c43.3-7 81-15 113-26 100.7-33 179.7-91 237-174 2.7-5 6-9 10-13 .7-1 7.3-1 20-1
-h17z'/></svg>`,
-
-    // undergroup is from the MnSymbol package (public domain)
-    undergroup: `><svg width='50.1%' viewBox='0 0 400000 342'
-preserveAspectRatio='xMinYMin slice'><path d='M400000 262
-H435C64 262 168.3 112.6 21 82c-5.9-1.2-18 0-18 0-2 0-3 1-3 3v38c76 158 257 219
- 435 219h399565z'/></svg><svg x='50%' width='50%' viewBox='0 0 400000 342'
-preserveAspectRatio='xMaxYMin slice'><path d='M0 262h399565
-c371 0 266.7-149.4 414-180 5.9-1.2 18 0 18 0 2 0 3 1 3 3v38c-76 158-257
- 219-435 219H0z'/></svg>`,
-
-    // widehat1 is a modified version of a glyph from the MnSymbol package
-    widehat1: ` viewBox='0 0 1062 239' preserveAspectRatio='none'>
-<path d='M529 0h5l519 115c5 1 9 5 9 10 0 1-1 2-1 3l-4 22
-c-1 5-5 9-11 9h-2L532 67 19 159h-2c-5 0-9-4-11-9l-5-22c-1-6 2-12 8-13z'/>`,
-
-    // Ditto widehat2, widehat3, and widehat4
-    widehat2: ` viewBox='0 0 2364 300' preserveAspectRatio='none'>
-<path d='M1181 0h2l1171 176c6 0 10 5 10 11l-2 23c-1 6-5 10
--11 10h-1L1182 67 15 220h-1c-6 0-10-4-11-10l-2-23c-1-6 4-11 10-11z'/>`,
-
-    widehat3: ` viewBox='0 0 2364 360' preserveAspectRatio='none'>
-<path d='M1181 0h2l1171 236c6 0 10 5 10 11l-2 23c-1 6-5 10
--11 10h-1L1182 67 15 280h-1c-6 0-10-4-11-10l-2-23c-1-6 4-11 10-11z'/>`,
-
-    widehat4: ` viewBox='0 0 2364 420' preserveAspectRatio='none'>
-<path d='M1181 0h2l1171 296c6 0 10 5 10 11l-2 23c-1 6-5 10
--11 10h-1L1182 67 15 340h-1c-6 0-10-4-11-10l-2-23c-1-6 4-11 10-11z'/>`,
-
-    xcancel: `<line x1='0' y1='0' x2='100%' y2='100%' stroke-width='0.046em'/>
-<line x1='0' y1='100%' x2='100%' y2='0' stroke-width='0.046em'/>`,
+    overleftrightarrow: [["leftarrow", "rightarrow"], 0.888, 522],
+    overbrace: [["leftbrace", "midbrace", "rightbrace"], 1.6, 548],
+    underbrace: [["leftbraceunder", "midbraceunder", "rightbraceunder"],
+        1.6, 548],
+    underleftrightarrow: [["leftarrow", "rightarrow"], 0.888, 522],
+    xleftrightarrow: [["leftarrow", "rightarrow"], 1.75, 522],
+    xLeftrightarrow: [["doubleleftarrow", "doublerightarrow"], 1.75, 560],
+    xrightleftharpoons: [["leftharpoondownplus", "rightharpoonplus"], 1.75, 716],
+    xleftrightharpoons: [["leftharpoonplus", "rightharpoondownplus"],
+        1.75, 716],
+    xhookleftarrow: [["leftarrow", "righthook"], 1.08, 522],
+    xhookrightarrow: [["lefthook", "rightarrow"], 1.08, 522],
+    overlinesegment: [["leftlinesegment", "rightlinesegment"], 0.888, 522],
+    underlinesegment: [["leftlinesegment", "rightlinesegment"], 0.888, 522],
+    overgroup: [["leftgroup", "rightgroup"], 0.888, 342],
+    undergroup: [["leftgroupunder", "rightgroupunder"], 0.888, 342],
+    xmapsto: [["leftmapsto", "rightarrow"], 1.5, 522],
+    xtofrom: [["leftToFrom", "rightToFrom"], 1.75, 528],
 };
 
 const groupLength = function(arg) {
@@ -453,48 +151,101 @@ const groupLength = function(arg) {
 const svgSpan = function(group, options) {
     // Create a span with inline SVG for the element.
     const label = group.value.label.substr(1);
-    let height = 0;
-    let depth = 0;
-    let imageName = "";
+    let attributes = [];
+    let height;
+    let viewBoxWidth = 400000;  // default
     let minWidth = 0;
+    let path;
+    let pathName;
+    let svgNode;
 
     if (utils.contains(["widehat", "widetilde", "undertilde"], label)) {
         // There are four SVG images available for each function.
         // Choose a taller image when there are more characters.
         const numChars = groupLength(group.value.base);
+        let viewBoxHeight;
+
         if (numChars > 5) {
-            height = 0.312;
-            imageName = (label === "widehat" ? "widehat" : "tilde") + "4";
+            viewBoxHeight = (label === "widehat" ? 420 : 312);
+            viewBoxWidth = (label === "widehat" ? 2364 : 2340);
+            // Next get the span height, in 1000 ems
+            height = (label === "widehat" ? 0.42 : 0.34);
+            pathName = (label === "widehat" ? "widehat" : "tilde") + "4";
         } else {
             const imgIndex = [1, 1, 2, 2, 3, 3][numChars];
             if (label === "widehat") {
-                height = [0, 0.24, 0.30, 0.30, 0.36, 0.36][numChars];
-                imageName = "widehat" + imgIndex;
+                viewBoxWidth = [0, 1062, 2364, 2364, 2364][imgIndex];
+                viewBoxHeight = [0, 239, 300, 360, 420][imgIndex];
+                height = [0, 0.24, 0.3, 0.3, 0.36, 0.42][imgIndex];
+                pathName = "widehat" + imgIndex;
             } else {
-                height = [0, 0.26, 0.30, 0.30, 0.34, 0.34][numChars];
-                imageName = "tilde" + imgIndex;
+                viewBoxWidth = [0, 600, 1033, 2339, 2340][imgIndex];
+                viewBoxHeight = [0, 260, 286, 306, 312][imgIndex];
+                height = [0, 0.26, 0.286, 0.3, 0.306, 0.34][imgIndex];
+                pathName = "tilde" + imgIndex;
             }
         }
+        path = new domTree.pathNode(pathName);
+        attributes.push(["width", "100%"]);
+        attributes.push(["height", height + "em"]);
+        attributes.push(["viewBox", `0 0 ${viewBoxWidth} ${viewBoxHeight}`]);
+        attributes.push(["preserveAspectRatio", "none"]);
+
+        svgNode = new domTree.svgNode([path], attributes);
+
     } else {
-        const imgData = katexImagesData[label];
-        height = imgData[0];
-        depth = imgData[1];
-        imageName = imgData[2];
-        minWidth = imgData[3];
+        let width;
+        let align;
+
+        const [paths, gWidth, vbHeight, alignOne] = katexImagesData[label];
+        const numSvgChildren = paths.length;
+        const innerSVGs = [];
+        height = vbHeight / 1000;
+        minWidth = gWidth;
+
+        for (let i = 0; i < numSvgChildren; i++) {
+            path = new domTree.pathNode(paths[i]);
+            attributes = [];
+
+            if (numSvgChildren === 1) {
+                width = "100%";
+                align = alignOne;
+            } else if (numSvgChildren === 2) {
+                // small overlap to prevent a 1 pixel gap.
+                if (i > 0) {
+                    attributes.push(["x", "50%"]);
+                }
+                width = ["50.1%", "50%"][i];
+                align = ["xMinYMin", "xMaxYMin"][i];
+            } else {
+                // 3 inner SVGs, as in a brace
+                if (i > 0) {
+                    attributes.push(["x", [null, "25%", "74.9%"][i]]);
+                }
+                width = ["25.5%", "50%", "25.1%"][i];
+                align = ["xMinYMin", "xMidYMin", "xMaxYMin"][i];
             }
 
-    const span = buildCommon.makeSpan([], [], options);
+            attributes.push(["width", width]);
+            attributes.push(["height", height + "em"]);
+            attributes.push(["viewBox", `0 0 ${viewBoxWidth} ${vbHeight}`]);
+            attributes.push(["preserveAspectRatio", align + " slice"]);
+
+            innerSVGs.push(new domTree.svgNode([path], attributes));
+        }
+        attributes = [["width", "100%"], ["height", height + "em"]];
+        svgNode = new domTree.svgNode(innerSVGs, attributes);
+    }
+
+    const span = buildCommon.makeSpan([], [svgNode], options);
+    // Note that we are returning span.depth = 0.
+    // Any adjustments relative to the baseline must be done in buildHTML.
     span.height = height;
-    span.depth = depth;
-    const totalHeight = height + depth;
-    span.style.height = totalHeight + "em";
+    span.style.height = height + "em";
     if (minWidth > 0) {
         span.style.minWidth = minWidth + "em";
     }
 
-    span.innerHTML =
-     `<svg width='100%' height='${totalHeight}em'${innerSVG[imageName]}</svg>`;
-
     return span;
 };
 
@@ -509,9 +260,37 @@ const encloseSpan = function(inner, label, pad, options) {
             img.style.borderColor = options.getColor();
         }
     } else {
-        img = buildCommon.makeSpan([], [], options);
-        img.innerHTML =
-         `<svg width='100%' height='${totalHeight}em'>${innerSVG[label]}</svg>`;
+        // \cancel, \bcancel, or \xcancel
+        // Since \cancel's SVG is inline and it omits the viewBox attribute,
+        // its stroke-width will not vary with span area.
+
+        let attributes = [["x1", "0"]];
+        const lines = [];
+
+        if (label !== "cancel") {
+            attributes.push(["y1", "0"]);
+            attributes.push(["x2", "100%"]);
+            attributes.push(["y2", "100%"]);
+            attributes.push(["stroke-width", "0.046em"]);
+            lines.push(new domTree.lineNode(attributes));
+        }
+
+        if (label === "xcancel") {
+            attributes = [["x1", "0"]];  // start a second line.
+        }
+
+        if (label !== "bcancel") {
+            attributes.push(["y1", "100%"]);
+            attributes.push(["x2", "100%"]);
+            attributes.push(["y2", "0"]);
+            attributes.push(["stroke-width", "0.046em"]);
+            lines.push(new domTree.lineNode(attributes));
+        }
+
+        attributes = [["width", "100%"], ["height", totalHeight + "em"]];
+        const svgNode = new domTree.svgNode(lines, attributes);
+
+        img = buildCommon.makeSpan([], [svgNode], options);
     }
 
     img.height = totalHeight;

src/svgGeometry.js

@@ -0,0 +1,266 @@
+/**
+ * This file provides support to domTree.js
+ * It's a storehouse of path geometry for SVG images.
+ */
+
+const path = {
+    // sqrtMain path geometry is from glyph U221A in the font KaTeX Main
+    sqrtMain: `M95 622c-2.667 0-7.167-2.667-13.5
+-8S72 604 72 600c0-2 .333-3.333 1-4 1.333-2.667 23.833-20.667 67.5-54s
+65.833-50.333 66.5-51c1.333-1.333 3-2 5-2 4.667 0 8.667 3.333 12 10l173
+378c.667 0 35.333-71 104-213s137.5-285 206.5-429S812 17.333 812 14c5.333
+-9.333 12-14 20-14h399166v40H845.272L620 507 385 993c-2.667 4.667-9 7-19
+7-6 0-10-1-12-3L160 575l-65 47zM834 0h399166v40H845z`,
+
+    // size1 is from glyph U221A in the font KaTeX_Size1-Regular
+    sqrtSize1: `M263 601c.667 0 18 39.667 52 119s68.167
+ 158.667 102.5 238 51.833 119.333 52.5 120C810 373.333 980.667 17.667 982 11
+c4.667-7.333 11-11 19-11h398999v40H1012.333L741 607c-38.667 80.667-84 175-136
+ 283s-89.167 185.333-111.5 232-33.833 70.333-34.5 71c-4.667 4.667-12.333 7-23
+ 7l-12-1-109-253c-72.667-168-109.333-252-110-252-10.667 8-22 16.667-34 26-22
+ 17.333-33.333 26-34 26l-26-26 76-59 76-60zM1001 0h398999v40H1012z`,
+
+    // size2 is from glyph U221A in the font KaTeX_Size2-Regular
+    sqrtSize2: `M1001 0h398999v40H1013.084S929.667 308 749
+ 880s-277 876.333-289 913c-4.667 4.667-12.667 7-24 7h-12c-1.333-3.333-3.667
+-11.667-7-25-35.333-125.333-106.667-373.333-214-744-10 12-21 25-33 39l-32 39
+c-6-5.333-15-14-27-26l25-30c26.667-32.667 52-63 76-91l52-60 208 722c56-175.333
+ 126.333-397.333 211-666s153.833-488.167 207.5-658.5C944.167 129.167 975 32.667
+ 983 10c4-6.667 10-10 18-10zm0 0h398999v40H1013z`,
+
+    // size3 is from glyph U221A in the font KaTeX_Size3-Regular
+    sqrtSize3: `M424 2398c-1.333-.667-38.5-172-111.5-514 S202.667 1370.667 202
+ 1370c0-2-10.667 14.333-32 49-4.667 7.333-9.833 15.667-15.5 25s-9.833 16-12.5
+ 20l-5 7c-4-3.333-8.333-7.667-13-13l-13-13 76-122 77-121 209 968c0-2 84.667
+-361.667 254-1079C896.333 373.667 981.667 13.333 983 10c4-6.667 10-10 18-10
+h398999v40H1014.622S927.332 418.667 742 1206c-185.333 787.333-279.333 1182.333
+-282 1185-2 6-10 9-24 9-8 0-12-.667-12-2zM1001 0h398999v40H1014z`,
+
+    // size4 is from glyph U221A in the font KaTeX_Size4-Regular
+    sqrtSize4: `M473 2713C812.333 913.667 982.333 13 983 11c3.333-7.333 9.333
+-11 18-11h399110v40H1017.698S927.168 518 741.5 1506C555.833 2494 462 2989 460
+ 2991c-2 6-10 9-24 9-8 0-12-.667-12-2s-5.333-32-16-92c-50.667-293.333-119.667
+-693.333-207-1200 0-1.333-5.333 8.667-16 30l-32 64-16 33-26-26 76-153 77-151
+c.667.667 35.667 202 105 604 67.333 400.667 102 602.667 104 606z
+M1001 0h398999v40H1017z`,
+
+    // The doubleleftarrow geometry is from glyph U+21D0 in the font KaTeX Main
+    doubleleftarrow: `M262 157
+l10-10c34-36 62.7-77 86-123 3.3-8 5-13.3 5-16 0-5.3-6.7-8-20-8-7.3
+ 0-12.2.5-14.5 1.5-2.3 1-4.8 4.5-7.5 10.5-49.3 97.3-121.7 169.3-217 216-28
+ 14-57.3 25-88 33-6.7 2-11 3.8-13 5.5-2 1.7-3 4.2-3 7.5s1 5.8 3 7.5
+c2 1.7 6.3 3.5 13 5.5 68 17.3 128.2 47.8 180.5 91.5 52.3 43.7 93.8 96.2 124.5
+ 157.5 9.3 8 15.3 12.3 18 13h6c12-.7 18-4 18-10 0-2-1.7-7-5-15-23.3-46-52-87
+-86-123l-10-10h399738v-40H218c328 0 0 0 0 0l-10-8c-26.7-20-65.7-43-117-69 2.7
+-2 6-3.7 10-5 36.7-16 72.3-37.3 107-64l10-8h399782v-40z
+m8 0v40h399730v-40zm0 194v40h399730v-40z`,
+
+    // doublerightarrow is from glyph U+21D2 in font KaTeX Main
+    doublerightarrow: `M399738 392l
+-10 10c-34 36-62.7 77-86 123-3.3 8-5 13.3-5 16 0 5.3 6.7 8 20 8 7.3 0 12.2-.5
+ 14.5-1.5 2.3-1 4.8-4.5 7.5-10.5 49.3-97.3 121.7-169.3 217-216 28-14 57.3-25 88
+-33 6.7-2 11-3.8 13-5.5 2-1.7 3-4.2 3-7.5s-1-5.8-3-7.5c-2-1.7-6.3-3.5-13-5.5-68
+-17.3-128.2-47.8-180.5-91.5-52.3-43.7-93.8-96.2-124.5-157.5-9.3-8-15.3-12.3-18
+-13h-6c-12 .7-18 4-18 10 0 2 1.7 7 5 15 23.3 46 52 87 86 123l10 10H0v40h399782
+c-328 0 0 0 0 0l10 8c26.7 20 65.7 43 117 69-2.7 2-6 3.7-10 5-36.7 16-72.3 37.3
+-107 64l-10 8H0v40zM0 157v40h399730v-40zm0 194v40h399730v-40z`,
+
+    // leftarrow is from glyph U+2190 in font KaTeX Main
+    leftarrow: `M400000 241H110l3-3c68.7-52.7 113.7-120
+ 135-202 4-14.7 6-23 6-25 0-7.3-7-11-21-11-8 0-13.2.8-15.5 2.5-2.3 1.7-4.2 5.8
+-5.5 12.5-1.3 4.7-2.7 10.3-4 17-12 48.7-34.8 92-68.5 130S65.3 228.3 18 247
+c-10 4-16 7.7-18 11 0 8.7 6 14.3 18 17 47.3 18.7 87.8 47 121.5 85S196 441.3 208
+ 490c.7 2 1.3 5 2 9s1.2 6.7 1.5 8c.3 1.3 1 3.3 2 6s2.2 4.5 3.5 5.5c1.3 1 3.3
+ 1.8 6 2.5s6 1 10 1c14 0 21-3.7 21-11 0-2-2-10.3-6-25-20-79.3-65-146.7-135-202
+ l-3-3h399890zM100 241v40h399900v-40z`,
+
+    // overbrace is from glyphs U+23A9/23A8/23A7 in font KaTeX_Size4-Regular
+    leftbrace: `M6 548l-6-6v-35l6-11c56-104 135.3-181.3 238-232 57.3-28.7 117
+-45 179-50h399577v120H403c-43.3 7-81 15-113 26-100.7 33-179.7 91-237 174-2.7
+ 5-6 9-10 13-.7 1-7.3 1-20 1H6z`,
+
+    leftbraceunder: `M0 6l6-6h17c12.688 0 19.313.3 20 1 4 4 7.313 8.3 10 13
+ 35.313 51.3 80.813 93.8 136.5 127.5 55.688 33.7 117.188 55.8 184.5 66.5.688
+ 0 2 .3 4 1 18.688 2.7 76 4.3 172 5h399450v120H429l-6-1c-124.688-8-235-61.7
+-331-161C60.687 138.7 32.312 99.3 7 54L0 41V6z`,
+
+    // overgroup is from the MnSymbol package (public domain)
+    leftgroup: `M400000 80
+H435C64 80 168.3 229.4 21 260c-5.9 1.2-18 0-18 0-2 0-3-1-3-3v-38C76 61 257 0
+ 435 0h399565z`,
+
+    leftgroupunder: `M400000 262
+H435C64 262 168.3 112.6 21 82c-5.9-1.2-18 0-18 0-2 0-3 1-3 3v38c76 158 257 219
+ 435 219h399565z`,
+
+    // Harpoons are from glyph U+21BD in font KaTeX Main
+    leftharpoon: `M0 267c.7 5.3 3 10 7 14h399993v-40H93c3.3
+-3.3 10.2-9.5 20.5-18.5s17.8-15.8 22.5-20.5c50.7-52 88-110.3 112-175 4-11.3 5
+-18.3 3-21-1.3-4-7.3-6-18-6-8 0-13 .7-15 2s-4.7 6.7-8 16c-42 98.7-107.3 174.7
+-196 228-6.7 4.7-10.7 8-12 10-1.3 2-2 5.7-2 11zm100-26v40h399900v-40z`,
+
+    leftharpoonplus: `M0 267c.7 5.3 3 10 7 14h399993v-40H93c3.3-3.3 10.2-9.5
+ 20.5-18.5s17.8-15.8 22.5-20.5c50.7-52 88-110.3 112-175 4-11.3 5-18.3 3-21-1.3
+-4-7.3-6-18-6-8 0-13 .7-15 2s-4.7 6.7-8 16c-42 98.7-107.3 174.7-196 228-6.7 4.7
+-10.7 8-12 10-1.3 2-2 5.7-2 11zm100-26v40h399900v-40zM0 435v40h400000v-40z
+m0 0v40h400000v-40z`,
+
+    leftharpoondown: `M7 241c-4 4-6.333 8.667-7 14 0 5.333.667 9 2 11s5.333
+ 5.333 12 10c90.667 54 156 130 196 228 3.333 10.667 6.333 16.333 9 17 2 .667 5
+ 1 9 1h5c10.667 0 16.667-2 18-6 2-2.667 1-9.667-3-21-32-87.333-82.667-157.667
+-152-211l-3-3h399907v-40zM93 281 H400000 v-40L7 241z`,
+
+    leftharpoondownplus: `M7 435c-4 4-6.3 8.7-7 14 0 5.3.7 9 2 11s5.3 5.3 12
+ 10c90.7 54 156 130 196 228 3.3 10.7 6.3 16.3 9 17 2 .7 5 1 9 1h5c10.7 0 16.7
+-2 18-6 2-2.7 1-9.7-3-21-32-87.3-82.7-157.7-152-211l-3-3h399907v-40H7zm93 0
+v40h399900v-40zM0 241v40h399900v-40zm0 0v40h399900v-40z`,
+
+    // hook is from glyph U+21A9 in font KaTeX Main
+    lefthook: `M400000 281 H103s-33-11.2-61-33.5S0 197.3 0 164s14.2-61.2 42.5
+-83.5C70.8 58.2 104 47 142 47 c16.7 0 25 6.7 25 20 0 12-8.7 18.7-26 20-40 3.3
+-68.7 15.7-86 37-10 12-15 25.3-15 40 0 22.7 9.8 40.7 29.5 54 19.7 13.3 43.5 21
+ 71.5 23h399859zM103 281v-40h399897v40z`,
+
+    leftlinesegment: `M40 281 V428 H0 V94 H40 V241 H400000 v40z
+M40 281 V428 H0 V94 H40 V241 H400000 v40z`,
+
+    leftmapsto: `M40 281 V448H0V74H40V241H400000v40z
+M40 281 V448H0V74H40V241H400000v40z`,
+
+    // tofrom is from glyph U+21C4 in font KaTeX AMS Regular
+    leftToFrom: `M0 147h400000v40H0zm0 214c68 40 115.7 95.7 143 167h22c15.3 0 23
+-.3 23-1 0-1.3-5.3-13.7-16-37-18-35.3-41.3-69-70-101l-7-8h399905v-40H95l7-8
+c28.7-32 52-65.7 70-101 10.7-23.3 16-35.7 16-37 0-.7-7.7-1-23-1h-22C115.7 265.3
+ 68 321 0 361zm0-174v-40h399900v40zm100 154v40h399900v-40z`,
+
+    longequal: `M0 50 h400000 v40H0z m0 194h40000v40H0z
+M0 50 h400000 v40H0z m0 194h40000v40H0z`,
+
+    midbrace: `M200428 334
+c-100.7-8.3-195.3-44-280-108-55.3-42-101.7-93-139-153l-9-14c-2.7 4-5.7 8.7-9 14
+-53.3 86.7-123.7 153-211 199-66.7 36-137.3 56.3-212 62H0V214h199568c178.3-11.7
+ 311.7-78.3 403-201 6-8 9.7-12 11-12 .7-.7 6.7-1 18-1s17.3.3 18 1c1.3 0 5 4 11
+ 12 44.7 59.3 101.3 106.3 170 141s145.3 54.3 229 60h199572v120z`,
+
+    midbraceunder: `M199572 214
+c100.7 8.3 195.3 44 280 108 55.3 42 101.7 93 139 153l9 14c2.7-4 5.7-8.7 9-14
+ 53.3-86.7 123.7-153 211-199 66.7-36 137.3-56.3 212-62h199568v120H200432c-178.3
+ 11.7-311.7 78.3-403 201-6 8-9.7 12-11 12-.7.7-6.7 1-18 1s-17.3-.3-18-1c-1.3 0
+-5-4-11-12-44.7-59.3-101.3-106.3-170-141s-145.3-54.3-229-60H0V214z`,
+
+    rightarrow: `M0 241v40h399891c-47.3 35.3-84 78-110 128
+-16.7 32-27.7 63.7-33 95 0 1.3-.2 2.7-.5 4-.3 1.3-.5 2.3-.5 3 0 7.3 6.7 11 20
+ 11 8 0 13.2-.8 15.5-2.5 2.3-1.7 4.2-5.5 5.5-11.5 2-13.3 5.7-27 11-41 14.7-44.7
+ 39-84.5 73-119.5s73.7-60.2 119-75.5c6-2 9-5.7 9-11s-3-9-9-11c-45.3-15.3-85
+-40.5-119-75.5s-58.3-74.8-73-119.5c-4.7-14-8.3-27.3-11-40-1.3-6.7-3.2-10.8-5.5
+-12.5-2.3-1.7-7.5-2.5-15.5-2.5-14 0-21 3.7-21 11 0 2 2 10.3 6 25 20.7 83.3 67
+ 151.7 139 205zm0 0v40h399900v-40z`,
+
+    rightbrace: `M400000 542l
+-6 6h-17c-12.7 0-19.3-.3-20-1-4-4-7.3-8.3-10-13-35.3-51.3-80.8-93.8-136.5-127.5
+s-117.2-55.8-184.5-66.5c-.7 0-2-.3-4-1-18.7-2.7-76-4.3-172-5H0V214h399571l6 1
+c124.7 8 235 61.7 331 161 31.3 33.3 59.7 72.7 85 118l7 13v35z`,
+
+    rightbraceunder: `M399994 0l6 6v35l-6 11c-56 104-135.3 181.3-238 232-57.3
+ 28.7-117 45-179 50H-300V214h399897c43.3-7 81-15 113-26 100.7-33 179.7-91 237
+-174 2.7-5 6-9 10-13 .7-1 7.3-1 20-1h17z`,
+
+    rightgroup: `M0 80h399565c371 0 266.7 149.4 414 180 5.9 1.2 18 0 18 0 2 0
+ 3-1 3-3v-38c-76-158-257-219-435-219H0z`,
+
+    rightgroupunder: `M0 262h399565c371 0 266.7-149.4 414-180 5.9-1.2 18 0 18
+ 0 2 0 3 1 3 3v38c-76 158-257 219-435 219H0z`,
+
+    rightharpoon: `M0 241v40h399993c4.7-4.7 7-9.3 7-14 0-9.3
+-3.7-15.3-11-18-92.7-56.7-159-133.7-199-231-3.3-9.3-6-14.7-8-16-2-1.3-7-2-15-2
+-10.7 0-16.7 2-18 6-2 2.7-1 9.7 3 21 15.3 42 36.7 81.8 64 119.5 27.3 37.7 58
+ 69.2 92 94.5zm0 0v40h399900v-40z`,
+
+    rightharpoonplus: `M0 241v40h399993c4.7-4.7 7-9.3 7-14 0-9.3-3.7-15.3-11
+-18-92.7-56.7-159-133.7-199-231-3.3-9.3-6-14.7-8-16-2-1.3-7-2-15-2-10.7 0-16.7
+ 2-18 6-2 2.7-1 9.7 3 21 15.3 42 36.7 81.8 64 119.5 27.3 37.7 58 69.2 92 94.5z
+m0 0v40h399900v-40z m100 194v40h399900v-40zm0 0v40h399900v-40z`,
+
+    rightharpoondown: `M399747 511c0 7.3 6.7 11 20 11 8 0 13-.8 15-2.5s4.7-6.8
+ 8-15.5c40-94 99.3-166.3 178-217 13.3-8 20.3-12.3 21-13 5.3-3.3 8.5-5.8 9.5
+-7.5 1-1.7 1.5-5.2 1.5-10.5s-2.3-10.3-7-15H0v40h399908c-34 25.3-64.7 57-92 95
+-27.3 38-48.7 77.7-64 119-3.3 8.7-5 14-5 16zM0 241v40h399900v-40z`,
+
+    rightharpoondownplus: `M399747 705c0 7.3 6.7 11 20 11 8 0 13-.8
+ 15-2.5s4.7-6.8 8-15.5c40-94 99.3-166.3 178-217 13.3-8 20.3-12.3 21-13 5.3-3.3
+ 8.5-5.8 9.5-7.5 1-1.7 1.5-5.2 1.5-10.5s-2.3-10.3-7-15H0v40h399908c-34 25.3
+-64.7 57-92 95-27.3 38-48.7 77.7-64 119-3.3 8.7-5 14-5 16zM0 435v40h399900v-40z
+m0-194v40h400000v-40zm0 0v40h400000v-40z`,
+
+    righthook: `M399859 241c-764 0 0 0 0 0 40-3.3 68.7-15.7 86-37 10-12 15-25.3
+ 15-40 0-22.7-9.8-40.7-29.5-54-19.7-13.3-43.5-21-71.5-23-17.3-1.3-26-8-26-20 0
+-13.3 8.7-20 26-20 38 0 71 11.2 99 33.5 0 0 7 5.6 21 16.7 14 11.2 21 33.5 21
+ 66.8s-14 61.2-42 83.5c-28 22.3-61 33.5-99 33.5L0 241z M0 281v-40h399859v40z`,
+
+    rightlinesegment: `M399960 241 V94 h40 V428 h-40 V281 H0 v-40z
+M399960 241 V94 h40 V428 h-40 V281 H0 v-40z`,
+
+    rightToFrom: `M400000 167c-70.7-42-118-97.7-142-167h-23c-15.3 0-23 .3-23
+ 1 0 1.3 5.3 13.7 16 37 18 35.3 41.3 69 70 101l7 8H0v40h399905l-7 8c-28.7 32
+-52 65.7-70 101-10.7 23.3-16 35.7-16 37 0 .7 7.7 1 23 1h23c24-69.3 71.3-125 142
+-167z M100 147v40h399900v-40zM0 341v40h399900v-40z`,
+
+    // twoheadleftarrow is from glyph U+219E in font KaTeX AMS Regular
+    twoheadleftarrow: `M0 167c68 40
+ 115.7 95.7 143 167h22c15.3 0 23-.3 23-1 0-1.3-5.3-13.7-16-37-18-35.3-41.3-69
+-70-101l-7-8h125l9 7c50.7 39.3 85 86 103 140h46c0-4.7-6.3-18.7-19-42-18-35.3
+-40-67.3-66-96l-9-9h399716v-40H284l9-9c26-28.7 48-60.7 66-96 12.7-23.333 19
+-37.333 19-42h-46c-18 54-52.3 100.7-103 140l-9 7H95l7-8c28.7-32 52-65.7 70-101
+ 10.7-23.333 16-35.7 16-37 0-.7-7.7-1-23-1h-22C115.7 71.3 68 127 0 167z`,
+
+    twoheadrightarrow: `M400000 167
+c-68-40-115.7-95.7-143-167h-22c-15.3 0-23 .3-23 1 0 1.3 5.3 13.7 16 37 18 35.3
+ 41.3 69 70 101l7 8h-125l-9-7c-50.7-39.3-85-86-103-140h-46c0 4.7 6.3 18.7 19 42
+ 18 35.3 40 67.3 66 96l9 9H0v40h399716l-9 9c-26 28.7-48 60.7-66 96-12.7 23.333
+-19 37.333-19 42h46c18-54 52.3-100.7 103-140l9-7h125l-7 8c-28.7 32-52 65.7-70
+ 101-10.7 23.333-16 35.7-16 37 0 .7 7.7 1 23 1h22c27.3-71.3 75-127 143-167z`,
+
+    // tilde1 is a modified version of a glyph from the MnSymbol package
+    tilde1: `M200 55.538c-77 0-168 73.953-177 73.953-3 0-7
+-2.175-9-5.437L2 97c-1-2-2-4-2-6 0-4 2-7 5-9l20-12C116 12 171 0 207 0c86 0
+ 114 68 191 68 78 0 168-68 177-68 4 0 7 2 9 5l12 19c1 2.175 2 4.35 2 6.525 0
+ 4.35-2 7.613-5 9.788l-19 13.05c-92 63.077-116.937 75.308-183 76.128
+-68.267.847-113-73.952-191-73.952z`,
+
+    // ditto tilde2, tilde3, & tilde4
+    tilde2: `M344 55.266c-142 0-300.638 81.316-311.5 86.418
+-8.01 3.762-22.5 10.91-23.5 5.562L1 120c-1-2-1-3-1-4 0-5 3-9 8-10l18.4-9C160.9
+ 31.9 283 0 358 0c148 0 188 122 331 122s314-97 326-97c4 0 8 2 10 7l7 21.114
+c1 2.14 1 3.21 1 4.28 0 5.347-3 9.626-7 10.696l-22.3 12.622C852.6 158.372 751
+ 181.476 676 181.476c-149 0-189-126.21-332-126.21z`,
+
+    tilde3: `M786 59C457 59 32 175.242 13 175.242c-6 0-10-3.457
+-11-10.37L.15 138c-1-7 3-12 10-13l19.2-6.4C378.4 40.7 634.3 0 804.3 0c337 0
+ 411.8 157 746.8 157 328 0 754-112 773-112 5 0 10 3 11 9l1 14.075c1 8.066-.697
+ 16.595-6.697 17.492l-21.052 7.31c-367.9 98.146-609.15 122.696-778.15 122.696
+ -338 0-409-156.573-744-156.573z`,
+
+    tilde4: `M786 58C457 58 32 177.487 13 177.487c-6 0-10-3.345
+-11-10.035L.15 143c-1-7 3-12 10-13l22-6.7C381.2 35 637.15 0 807.15 0c337 0 409
+ 177 744 177 328 0 754-127 773-127 5 0 10 3 11 9l1 14.794c1 7.805-3 13.38-9
+ 14.495l-20.7 5.574c-366.85 99.79-607.3 139.372-776.3 139.372-338 0-409
+ -175.236-744-175.236z`,
+
+    // widehat1 is a modified version of a glyph from the MnSymbol package
+    widehat1: `M529 0h5l519 115c5 1 9 5 9 10 0 1-1 2-1 3l-4 22
+c-1 5-5 9-11 9h-2L532 67 19 159h-2c-5 0-9-4-11-9l-5-22c-1-6 2-12 8-13z`,
+
+    // ditto widehat2, widehat3, & widehat4
+    widehat2: `M1181 0h2l1171 176c6 0 10 5 10 11l-2 23c-1 6-5 10
+-11 10h-1L1182 67 15 220h-1c-6 0-10-4-11-10l-2-23c-1-6 4-11 10-11z`,
+
+    widehat3: `M1181 0h2l1171 236c6 0 10 5 10 11l-2 23c-1 6-5 10
+-11 10h-1L1182 67 15 280h-1c-6 0-10-4-11-10l-2-23c-1-6 4-11 10-11z`,
+
+    widehat4: `M1181 0h2l1171 296c6 0 10 5 10 11l-2 23c-1 6-5 10
+-11 10h-1L1182 67 15 340h-1c-6 0-10-4-11-10l-2-23c-1-6 4-11 10-11z`,
+};
+
+module.exports = {
+    path: path,
+};