Use inline SVG for stretchy elements (#807)

* Use inline SVG for stretchy elements Replace all background-images with inline SVG code. Pros: * `\color` works in all browsers, even IE/Edge * Better printing * Much simpler CSS * No links to background-images * No `mask` * No browser-detection * No external SVG files * Faster first rendering Cons * No image caching * Heavier HTML load * Larger JavaScript file * `\cancel` line is in `px` units, not `em` units * Remove static/images from make file * Change \cancel from px to em * regenerate screenshots for functions using inline svg
2025-10-05 11:18:39 +00:00 · 2017-08-19 18:51:16 -07:00
parent 81037e5d10
commit a4b1bf01be
56 changed files with 534 additions and 823 deletions
--- a/8
+++ b/8
@@ -74,14 +74,8 @@ build/contrib:
 	rm -rf build/contrib/*
 	$(MAKE) -C contrib/auto-render

-.PHONY: build/images
-build/images:
-	rm -rf $@
-	mkdir -p build
-	cp -r static/images $@
-
 .PHONY: build/katex
-build/katex: build/katex.js build/katex.min.js build/katex.css build/katex.min.css build/fonts build/images README.md build/contrib
+build/katex: build/katex.js build/katex.min.js build/katex.css build/katex.min.css build/fonts README.md build/contrib
 	mkdir -p build/katex
 	rm -rf build/katex/*
 	cp -r $^ build/katex
--- a/src/buildHTML.js
+++ b/src/buildHTML.js
@@ -1420,16 +1420,18 @@ groupTypes.accent = function(group, options) {
    } else {
        accentBody = stretchy.svgSpan(group, options);

-        if (skew > 0) {
-            // Shorten the accent. That will nudge it to the right.
-            const adjSize = "calc(100% - " + (2 * skew) + "em) 100%";
-            accentBody.style.backgroundSize = adjSize;
-        }
-
        accentBody = buildCommon.makeVList([
            {type: "elem", elem: body},
            {type: "elem", elem: accentBody},
        ], "firstBaseline", null, options);
+
+        const styleSpan = accentBody.children[0].children[0].children[1];
+        styleSpan.classes.push("svg-align");  // text-align: left;
+        if (skew > 0) {
+            // Shorten the accent and nudge it to the right.
+            styleSpan.style.width = `calc(100% - ${2 * skew}em)`;
+            styleSpan.style.marginLeft = (2 * skew) + "em";
+        }
    }

    const accentWrap = makeSpan(["mord", "accent"], [accentBody], options);
@@ -1488,12 +1490,14 @@ groupTypes.horizBrace = function(group, options) {
            {type: "kern", size: 0.1},
            {type: "elem", elem: braceBody},
        ], "firstBaseline", null, options);
+        vlist.children[0].children[0].children[1].classes.push("svg-align");
    } else {
        vlist = buildCommon.makeVList([
            {type: "elem", elem: braceBody},
            {type: "kern", size: 0.1},
            {type: "elem", elem: body},
        ], "bottom", body.depth + 0.1 + braceBody.height, options);
+        vlist.children[0].children[0].children[0].classes.push("svg-align");
    }

    if (hasSupSub) {
@@ -1543,6 +1547,8 @@ groupTypes.accentUnder = function(group, options) {
        {type: "elem", elem: innerGroup},
    ], "bottom", accentBody.height + kern, options);

+    vlist.children[0].children[0].children[0].classes.push("svg-align");
+
    return makeSpan(["mord", "accentunder"], [vlist], options);
 };

@@ -1559,7 +1565,6 @@ groupTypes.enclose = function(group, options) {
    if (label === "sout") {
        img = makeSpan(["stretchy", "sout"]);
        img.height = options.fontMetrics().defaultRuleThickness / scale;
-        img.maxFontSize = 1.0;
        imgShift = -0.5 * options.fontMetrics().xHeight;
    } else {
        // Add horizontal padding
@@ -1572,7 +1577,7 @@ groupTypes.enclose = function(group, options) {
        pad = (label === "fbox" ? 0.34 : (isCharBox ? 0.2 : 0));
        imgShift = inner.depth + pad;

-        img = stretchy.encloseSpan(inner, isCharBox, label, pad, options);
+        img = stretchy.encloseSpan(inner, label, pad, options);
    }

    const vlist = buildCommon.makeVList([
@@ -1580,6 +1585,10 @@ groupTypes.enclose = function(group, options) {
        {type: "elem", elem: img, shift: imgShift},
    ], "individualShift", null, options);

+    if (label !== "fbox") {
+        vlist.children[0].children[0].children[1].classes.push("svg-align");
+    }
+
    if (/cancel/.test(label)) {
        // cancel does not create horiz space for its line extension.
        // That is, not when adjacent to a mord.
@@ -1631,6 +1640,8 @@ groupTypes.xArrow = function(group, options) {
        ], "individualShift", null, options);
    }

+    vlist.children[0].children[0].children[1].classes.push("svg-align");
+
    return makeSpan(["mrel", "x-arrow"], [vlist], options);
 };

--- a/src/domTree.js
+++ b/src/domTree.js
@@ -39,6 +39,7 @@ 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");
@@ -85,6 +86,10 @@ 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());
@@ -130,6 +135,10 @@ 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();
--- a/src/stretchy.js
+++ b/src/stretchy.js
@@ -1,6 +1,6 @@
 /**
 * This file provides support to buildMathML.js and buildHTML.js
- * for stretchy wide elements rendered from background-image SVG files
+ * for stretchy wide elements rendered from SVG files
 * and other CSS trickery.
 */

@@ -52,7 +52,7 @@ const mathMLnode = function(label) {
 };

 // In the katexImagesData object just below, the dimensions all
-// correspond to path geometry inside the relevant SVG file.
+// 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
@@ -60,51 +60,444 @@ const mathMLnode = function(label) {
 // And for extensible arrows, we split that distance around the math axis.

 const katexImagesData = {
-                 // height, depth, fileName
-    overleftarrow : [0.522, 0, "leftarrow"],
-    underleftarrow : [0.522, 0, "leftarrow"],
-    xleftarrow : [0.261, 0.261, "leftarrow"],
-    overrightarrow : [0.522, 0, "rightarrow"],
-    underrightarrow : [0.522, 0, "rightarrow"],
-    xrightarrow : [0.261, 0.261, "rightarrow"],
-    overbrace : [0.548, 0, "overbrace"],
-    underbrace : [0.548, 0, "underbrace"],
-    overleftrightarrow : [0.522, 0, "leftrightarrow"],
-    underleftrightarrow : [0.522, 0, "leftrightarrow"],
-    xleftrightarrow : [0.261, 0.261, "leftrightarrow"],
-    Overrightarrow : [0.56, 0, "doublerightarrow"],
-    xLeftarrow : [0.28, 0.28, "doubleleftarrow"],
-    xRightarrow : [0.28, 0.28, "doublerightarrow"],
-    xLeftrightarrow : [0.28, 0.28, "doubleleftrightarrow"],
-    overleftharpoon : [0.522, 0, "leftharpoon"],
-    overrightharpoon : [0.522, 0, "rightharpoon"],
-    xleftharpoonup : [0.261, 0.261, "leftharpoon"],
-    xrightharpoonup : [0.261, 0.261, "rightharpoon"],
-    xhookleftarrow : [0.261, 0.261, "hookleftarrow"],
-    xhookrightarrow : [0.261, 0.261, "hookrightarrow"],
-    overlinesegment : [0.414, 0, "linesegment"],
-    underlinesegment : [0.414, 0, "linesegment"],
-    xmapsto : [0.261, 0.261, "mapsto"],
-    xrightharpoondown : [0.261, 0.261, "rightharpoondown"],
-    xleftharpoondown : [0.261, 0.261, "leftharpoondown"],
-    xrightleftharpoons : [0.358, 0.358, "rightleftharpoons"],
-    xleftrightharpoons : [0.358, 0.358, "leftrightharpoons"],
-    overgroup : [0.342, 0, "overgroup"],
-    undergroup : [0.342, 0, "undergroup"],
-    xtwoheadleftarrow : [0.167, 0.167, "twoheadleftarrow"],
-    xtwoheadrightarrow : [0.167, 0.167, "twoheadrightarrow"],
-    xLongequal : [0.167, 0.167, "longequal"],
-    xtofrom : [0.264, 0.264, "tofrom"],
+                 // 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>)
+// Licensed under the SIL Open Font License, Version 1.1.
+// See \nhttp://scripts.sil.org/OFL
+
+// Nested SVGs
+//    Many of the KaTeX SVG images contain a nested SVG. This is done to
+//    achieve a stretchy image while avoiding distortion of arrowheads or
+//    brace corners.
+
+//    The inner SVG typically contains a very long (400 em) arrow.
+
+//    The outer SVG acts like a window that exposes only part of the inner SVG.
+//    The outer SVG will grow or shrink to match the dimensions set by CSS.
+
+//    The inner SVG always has a longer, thinner aspect ratio than the outer
+//    SVG. After the inner SVG fills 100% of the height of the outer SVG,
+//    there is a long arrow shaft left over. That left-over shaft is not shown.
+//    Instead, it is sliced off because the inner SVG is set to
+//    "preserveAspectRatio='... slice'".
+
+//    Thus, the reader sees an arrow that matches the subject matter width
+//    without distortion.
+
+//    Some functions, such as \cancel, need to vary their aspect ratio. These
+//    functions do not get the nested SVG treatment.
+
+// Second Brush Stroke
+//    Low resolution monitors struggle to display images in fine detail.
+//    So browsers apply anti-aliasing. A long straight arrow shaft therefore
+//    will sometimes appear as if it has a blurred edge.
+
+//    To mitigate this, these SVG files contain a second "brush-stroke" on the
+//    arrow shafts. That is, a second long thin rectangular SVG path has been
+//    written directly on top of each arrow shaft. This reinforcement causes
+//    some of the screen pixels to display as black instead of the anti-aliased
+//    gray pixel that a  single path would generate. So we get arrow shafts
+//    whose edges appear to be sharper.
+
+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'
+stroke='currentcolor'/>`,
+
+    cancel: `<line x1='0' y1='100%' x2='100%' y2='0' stroke-width='0.046em'
+stroke='currentcolor'/>`,
+
+    // The doubleleftarrow geometry is from glyph U+21D0 in the font KaTeX Main
+    doubleleftarrow: `><svg viewBox='0 0 400000 549'
+preserveAspectRatio='xMinYMin slice'><path fill='currentcolor' 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'/></svg>`,
+
+    // doubleleftrightarrow is from glyph U+21D4 in font KaTeX Main
+    doubleleftrightarrow: `><svg width='50.1%' viewBox='0 0 400000 549'
+preserveAspectRatio='xMinYMin slice'><path fill='currentcolor' d='M262
+ 157l10-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.5c2 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-40
+H218c328 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-40zm8 0v40h399730v-40zm0 194v40h399730v-40z'/></svg>
+<svg x='50%' width='50%' viewBox='0 0 400000 549' preserveAspectRatio='xMaxYMin
+ slice'><path fill='currentcolor' 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 10H0v40h399782c-328 0 0 0 0 0l10 8
+c26.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 8H0v40z
+M0 157v40h399730v-40zm0 194v40h399730v-40z'/></svg>`,
+
+    // doublerightarrow is from glyph U+21D2 in font KaTeX Main
+    doublerightarrow: `><svg viewBox='0 0 400000 549'
+preserveAspectRatio='xMaxYMin slice'><path fill='currentcolor' 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'/></svg>`,
+
+    // hookleftarrow is from glyph U+21A9 in font KaTeX Main
+    hookleftarrow: `><svg width='50.1%' viewBox='0 0 400000 522'
+preserveAspectRatio='xMinYMin slice'><path fill='currentcolor' d='M400000 241
+H110l3-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 247c-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-202l-3-3h399890zM100 241v40h399900v-40z'/></svg>
+<svg x='50%' width='50%' viewBox='0 0 400000 522' preserveAspectRatio='xMaxYMin
+ slice'><path fill='currentcolor' 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 fill='currentcolor' 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'><path fill='currentcolor' d='M0 241v40
+h399891c-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'/></svg>`,
+
+    // leftarrow is from glyph U+2190 in font KaTeX Main
+    leftarrow: `><svg viewBox='0 0 400000 522' preserveAspectRatio='xMinYMin
+ slice'><path fill='currentcolor' 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'/></svg>`,
+
+    // leftdoublearrow is from glyph U+21D0 in font KaTeX Main
+    leftdoublearrow: `><svg viewBox='0 0 400000 549'
+preserveAspectRatio='xMinYMin slice'><path fill='currentcolor' d='M262 157l10
+-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.5c2 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 13h6
+c12-.7 18-4 18-10 0-2-1.7-7-5-15-23.3-46-52-87-86-123l-10-10h399738v-40H218
+c328 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'/></svg>`,
+
+    // leftharpoon is from glyph U+21BD in font KaTeX Main
+    leftharpoon: `><svg viewBox='0 0 400000 522' preserveAspectRatio='xMinYMin
+ slice'><path fill='currentcolor' 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='xMaxYMin slice'><path fill='currentcolor' 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>`,
+
+    // leftrightarrow is from glyph U+2194 in font KaTeX Main
+    leftrightarrow: `><svg width='50.1%' viewBox='0 0 400000 522'
+preserveAspectRatio='xMinYMin slice'><path fill='currentcolor' d='M400000 241
+H110l3-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 247c-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-202l-3-3h399890zM100 241v40h399900v-40z'/></svg>
+<svg x='50%' width='50%' viewBox='0 0 400000 522' preserveAspectRatio='xMaxYMin
+ slice'><path fill='currentcolor' 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'/></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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' d='M40 187V40H0
+v334h40V227h399960v-40zm0 0V40H0v334h40V227h399960v-40z'/></svg><svg x='50%'
+width='50%' viewBox='0 0 400000 414' preserveAspectRatio='xMaxYMin slice'>
+<path fill='currentcolor' d='M0 187v40h399960v147h40V40h-40v147zm0
+ 0v40h399960v147h40V40h-40v147z'/></svg>`,
+
+    longequal: ` viewBox='0 0 100 334' preserveAspectRatio='none'>
+<path fill='currentcolor' 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 fill='currentcolor' 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'><path fill='currentcolor'
+d='M0 241l399891 40c-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.5
+c-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 205z
+m0 0v40h399900v-40z'/></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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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'><path fill='currentcolor' 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'/></svg>`,
+
+    // rightharpoon is from glyph U+21C0 in font KaTeX Main
+    rightharpoon: `><svg viewBox='0 0 400000 522' preserveAspectRatio='xMaxYMin
+ slice'><path fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor'
+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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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 fill='currentcolor' 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'
+stroke='currentcolor'/><line x1='0' y1='100%' x2='100%' y2='0'
+stroke-width='0.046em' stroke='currentcolor'/>`,
 };

 const svgSpan = function(group, options) {
-    // Create a span with class(es) that refer to the background-image
-    // and/or the mask-image.
+    // Create a span with inline SVG for the element.
    const label = group.value.label.substr(1);
    let height = 0;
    let depth = 0;
-    const classArray = ["stretchy"];
-    let fileName = "";
+    let imageName = "";
+    let minWidth = 0;

    if (utils.contains(["widehat", "widetilde", "undertilde"], label)) {
        // There are four SVG images available for each function.
@@ -112,70 +505,59 @@ const svgSpan = function(group, options) {
        const numChars = group.value.value.length;
        if (numChars > 5) {
            height = 0.312;
-            fileName = (label === "widehat" ? "widehat" : "tilde") + "4";
+            imageName = (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];
-                fileName = "widehat" + imgIndex;
+                imageName = "widehat" + imgIndex;
            } else {
                height = [0, 0.26, 0.30, 0.30, 0.34, 0.34][numChars];
-                fileName = "tilde" + imgIndex;
+                imageName = "tilde" + imgIndex;
            }
        }
    } else {
        const imgData = katexImagesData[label];
        height = imgData[0];
        depth = imgData[1];
-        fileName = imgData[2];
-        if (label.substr(0, 1) === "x") {
-            classArray.push("x-arrow");     // Lengthen the arrow via padding.
-        }
+        imageName = imgData[2];
+        minWidth = imgData[3];
    }

-    let node;
-    if (options.color) {
-        classArray.push(fileName);         // Set span height and IE image.
-        // The next two lines each add a class that CSS will apply
-        // only to browsers that support CSS mask.
-        // IE will not recognize that CSS, so it will fall back to
-        // the background-image set in the previous line of code.
-        classArray.push("mask");             // Over-ride image.
-        classArray.push(fileName + "-mask"); // Set mask-image.
-        node = buildCommon.makeSpan(classArray, [], options);
-        node.style.backgroundColor = options.getColor();
-    } else {
-        classArray.push(fileName);             // Set image and span height.
-        node = buildCommon.makeSpan(classArray, [], options);
+    const span = buildCommon.makeSpan([], [], options);
+    span.height = height;
+    span.depth = depth;
+    const totalHeight = height + depth;
+    span.style.height = totalHeight + "em";
+    if (minWidth > 0) {
+        span.style.minWidth = minWidth + "em";
    }

-    node.height = height;
-    node.depth = depth;
-    node.maxFontSize = 1;
-    return node;
+    span.innerHTML =
+     `<svg width='100%' height='${totalHeight}em'${innerSVG[imageName]}</svg>`;
+
+    return span;
 };

-const encloseSpan = function(inner, isCharBox, label, pad, options) {
+const encloseSpan = function(inner, label, pad, options) {
    // Return an image span for \cancel, \bcancel, \xcancel, or \fbox
-    const img = buildCommon.makeSpan(["stretchy", label], [], options);
+    let img;
+    const totalHeight = inner.height + inner.depth + 2 * pad;

-    if (options.color) {
    if (label === "fbox") {
+        img = buildCommon.makeSpan(["stretchy", label], [], options);
+        if (options.color) {
            img.style.borderColor = options.getColor();
-        } else {
-            img.classes[2] = label + "-mask";
-            img.style.backgroundColor = options.getColor();
        }
+    } else {
+        img = buildCommon.makeSpan([], [], options);
+        img.innerHTML =
+         `<svg width='100%' height='${totalHeight}em'>${innerSVG[label]}</svg>`;
    }

-    img.height = inner.height + inner.depth + 2 * pad;
-    img.style.height = img.height + "em";
+    img.height = totalHeight;
+    img.style.height = totalHeight + "em";

-    if (/cancel/.test(label) && isCharBox) {
-        img.maxFontSize = 1.2; // Make line box tall enough for image to fit.
-    } else {
-        img.maxFontSize = 1;
-    }
    return img;
 };

--- a/static/images/Image-Licensing-and-Technical-Notes.txt
+++ b/static/images/Image-Licensing-and-Technical-Notes.txt
@@ -1,70 +0,0 @@
-Copyright and Licensing
-=======================
-
-Many KaTeX SVG images have been adapted from glyphs in the KaTeX fonts.
-Copyright (c) 2009-2010, Design Science, Inc. (<www.mathjax.org>)
-Copyright (c) 2014-2017 Khan Academy (<www.khanacademy.org>)
-Licensed under the SIL Open Font License, Version 1.1. See \nhttp://scripts.sil.org/OFL
-
-The license terms above apply to the following images:
-          FILENAME         ORIGINAL GLYPH     ORIGINAL FONT FILE
-    =====================  ==============     ==================
-    doubleleftarrow.svg       U+21D0             KaTeX Main
-    doubleleftrightarrow.svg  U+21D4             KaTeX Main
-    doublerightarrow.svg      U+21D2             KaTeX Main
-    hookleftarrow.svg         U+21A9             KaTeX Main
-    hookrightarrow.svg        U+21AA             KaTeX Main
-    leftarrow.svg             U+2190             KaTeX Main
-    leftharpoon.svg           U+21BD             KaTeX Main
-    leftrightarrow.svg        U+2194             KaTeX Main
-    leftrightharpoons.svg     U+21BC/21B1        KaTeX Main
-    mapsto.svg                U+21A6             KaTeX Main
-    overbrace.svg             U+23A9/23A8/23A7   KaTeX Size 4 Regular
-    rightarrow.svg            U+2192             KaTeX Main
-    rightharpoon.svg          U+21C0             KaTeX Main
-    rightharpoondown.svg      U+21C1             KaTeX Main
-    rightleftharpoons.svg     U+21CC             KaTeX Main
-    tofrom.svg                U+21C4             KaTeX AMS Regular
-    twoheadleftarrow.svg      U+219E             KaTeX AMS Regular
-    twoheadrightarrow.svg     U+21A0             KaTeX AMS Regular
-    underbrace.svg            U+23A9/23A8/23A7   KaTeX Size 4 Regular
-
-Images for \widehat, \widetilde, \overgroup, and \undergroup have been adapted (and modified)
-from font glyphs in the MnSymbol package. These fonts are in the public domain.
-
-
-Technical Comments
-==================
-
-Nested SVGs
-    Many of the KaTeX SVG images contain a nested SVG. This is done to achieve a
-    stretchy image while avoiding distortion of arrowheads or brace corners.
-
-    The inner SVG typically contains a very long (400 em) arrow.
-
-    The outer SVG acts like a window that exposes only part of the inner SVG. The
-    outer SVG will grow or shrink to match the dimensions set for it by CSS.
-
-    The inner SVG always has a longer, thinner aspect ratio than the outer SVG.
-    After the inner SVG fills 100% of the height of the outer SVG, there is a long
-    arrow shaft left over. That left-over shaft is not shown. Instead, it is
-    sliced off because the inner SVG is set to "preserveAspectRatio='... slice'".
-
-    Thus, the reader sees an arrow that matches the subject matter width without
-    distortion.
-
-    Some functions, such as \cancel, need to vary their aspect ratio. These functions
-    do not get the nested SVG treatment.
-
-Second Brush Stroke
-    Low resolution monitors struggle to display images in fine detail.
-    So browsers apply anti-aliasing as described at http://www.rastertragedy.com/.
-    A long straight arrow shaft therefore will sometimes appear as if it has a
-    blurred edge.
-
-    To mitigate this, these SVG files contain a second "brush-stroke" on the
-    arrow shafts. That is, a second long thin rectangular SVG path has been
-    written directly on top of each arrow shaft. This reinforcement causes some
-    of the screen pixels to display as black instead of the anti-aliased gray
-    pixel that a  single path would generate. So we get arrow shafts whose
-    edges appear to be sharper.
--- a/static/images/bcancel.svg
+++ b/static/images/bcancel.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" preserveAspectRatio="none"><path stroke="#000" d="M0 0l12 12"/></svg>
--- a/static/images/cancel.svg
+++ b/static/images/cancel.svg
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' preserveAspectRatio='none'><path stroke="#000" d="M0 12L12 0"/></svg>
--- a/static/images/doubleleftarrow.svg
+++ b/static/images/doubleleftarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 549" preserveAspectRatio="xMinYMin slice"><path d="M262 157l10-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.5c2 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-40zm8 0v40h399730v-40zm0 194v40h399730v-40z"/></svg></svg>
--- a/static/images/doubleleftrightarrow.svg
+++ b/static/images/doubleleftrightarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 549" preserveAspectRatio="xMinYMin slice"><path d="M262 157l10-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.5c2 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-40zm8 0v40h399730v-40zm0 194v40h399730v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 549" preserveAspectRatio="xMaxYMin slice"><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 10H0v40h399782c-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"/></svg></svg>
--- a/static/images/doublerightarrow.svg
+++ b/static/images/doublerightarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 549" preserveAspectRatio="xMaxYMin slice"><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 10H0v40h399782c-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"/></svg></svg>
--- a/static/images/hookleftarrow.svg
+++ b/static/images/hookleftarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><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 247c-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-202l-3-3h399890zM100 241v40h399900v-40z"/></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 241zM0 281v-40h399859v40z"/></svg></svg>
--- a/static/images/hookrightarrow.svg
+++ b/static/images/hookrightarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><path d="M400000 281H103s-33-11.2-61-33.5S0 197.3 0 164s14.2-61.2 42.5-83.5C70.8 58.2 104 47 142 47c16.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"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><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"/></svg></svg>
--- a/static/images/leftarrow.svg
+++ b/static/images/leftarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><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 247c-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-202l-3-3h399890zM100 241v40h399900v-40z"/></svg></svg>
--- a/static/images/leftdoublearrow.svg
+++ b/static/images/leftdoublearrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 549" preserveAspectRatio="xMinYMin slice"><path d="M262 157l10-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.5c2 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"/></svg></svg>
--- a/static/images/leftharpoon.svg
+++ b/static/images/leftharpoon.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><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></svg>
--- a/static/images/leftharpoondown.svg
+++ b/static/images/leftharpoondown.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="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"/></svg></svg>
--- a/static/images/leftrightarrow.svg
+++ b/static/images/leftrightarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 522" preserveAspectRatio="xMinYMin slice"><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 247c-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-202l-3-3h399890zM100 241v40h399900v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><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"/></svg></svg>
--- a/static/images/leftrightharpoons.svg
+++ b/static/images/leftrightharpoons.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><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-26v40h399900v-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-40zm0-194v40h400000v-40zm0 0v40h400000v-40z"/></svg></svg>
--- a/static/images/linesegment.svg
+++ b/static/images/linesegment.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 414" preserveAspectRatio="xMinYMin slice"><path d="M40 187V40H0v334h40V227h399960v-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></svg>
--- a/static/images/longequal.svg
+++ b/static/images/longequal.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 334" preserveAspectRatio="none"><path d="M0 50h100v40H0zm0 194h100v40H0z"/></svg>
--- a/static/images/mapsto.svg
+++ b/static/images/mapsto.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><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-75h399960zm0 0v40h399960v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="M0 241l399891 40c-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"/></svg></svg>
--- a/static/images/overbrace.svg
+++ b/static/images/overbrace.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg width="25.5%" viewBox="0 0 400000 548" preserveAspectRatio="xMinYMin slice"><path d="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"/></svg><svg x="25%" width="50%" viewBox="0 0 400000 548" preserveAspectRatio="xMidYMin slice"><path d="M200428 334c-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.5s-117.2-55.8-184.5-66.5c-.7 0-2-.3-4-1-18.7-2.7-76-4.3-172-5H0V214h399571l6 1c124.7 8 235 61.7 331 161 31.3 33.3 59.7 72.7 85 118l7 13v35z"/></svg></svg>
--- a/static/images/overgroup.svg
+++ b/static/images/overgroup.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 342" preserveAspectRatio="xMinYMin slice"><path d="M400000 80H435C64 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 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"/></svg></svg>
--- a/static/images/rightarrow.svg
+++ b/static/images/rightarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><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"/></svg></svg>
--- a/static/images/rightharpoon.svg
+++ b/static/images/rightharpoon.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><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></svg>
--- a/static/images/rightharpoondown.svg
+++ b/static/images/rightharpoondown.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 522" preserveAspectRatio="xMaxYMin slice"><path d="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"/></svg></svg>
--- a/static/images/rightleftharpoons.svg
+++ b/static/images/rightleftharpoons.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><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-40zm0 0v40h399900v-40z"/></svg><svg x="50%" width="50%" viewBox="0 0 400000 716" 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-40zm100 194v40h399900v-40zm0 0v40h399900v-40z"/></svg></svg>
--- a/static/images/tilde1.svg
+++ b/static/images/tilde1.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" 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"/></svg>
--- a/static/images/tilde2.svg
+++ b/static/images/tilde2.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" 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.114c1 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"/></svg>
--- a/static/images/tilde3.svg
+++ b/static/images/tilde3.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" 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"/></svg>
--- a/static/images/tilde4.svg
+++ b/static/images/tilde4.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" 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"/></svg>
--- a/static/images/tofrom.svg
+++ b/static/images/tofrom.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg width="50.1%" viewBox="0 0 400000 528" preserveAspectRatio="xMinYMin slice"><path d="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-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-40h399900v40zm100 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-167zM100 147v40h399900v-40zM0 341v40h399900v-40z"/></svg></svg>
--- a/static/images/twoheadleftarrow.svg
+++ b/static/images/twoheadleftarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><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></svg>
--- a/static/images/twoheadrightarrow.svg
+++ b/static/images/twoheadrightarrow.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 334" preserveAspectRatio="xMaxYMin slice"><path d="M400000 167c-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></svg>
--- a/static/images/underbrace.svg
+++ b/static/images/underbrace.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><svg width="25.1%" viewBox="0 0 400000 548" preserveAspectRatio="xMinYMin slice"><path d="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"/></svg><svg x="25%" width="50%" viewBox="0 0 400000 548" preserveAspectRatio="xMidYMin slice"><path d="M199572 214c100.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 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"/></svg></svg>
--- a/static/images/undergroup.svg
+++ b/static/images/undergroup.svg
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-<svg width="50.1%" viewBox="0 0 400000 342" preserveAspectRatio="xMinYMin slice">
-<path fill="black"
-d="M 400000,262 435,262 C 64,262 168.3,112.6 21,82 15.1,80.8 3,82 3,82 1,82 0,83 0,85 l 0,38 c 76,158 257,219 435,219 l 399565,0 z"/>
-</svg>
-
-<svg x="50%" width="50%" viewBox="0 0 400000 342" preserveAspectRatio="xMaxYMin slice">
-<path fill="black"
-d="M0,262l399565,0c371,0,266.7,-149.4,414,-180c5.9,-1.2,18,0,18,0c2,0,3,1,3,3l0,38c-76,158,-257,219,-435,219l-399565,0z"/>
-</svg>
-</svg>
--- a/static/images/widehat1.svg
+++ b/static/images/widehat1.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1062 239" preserveAspectRatio="none"><path d="M529 0h5l519 115c5 1 9 5 9 10 0 1-1 2-1 3l-4 22c-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"/></svg>
--- a/static/images/widehat2.svg
+++ b/static/images/widehat2.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" 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"/></svg>
--- a/static/images/widehat3.svg
+++ b/static/images/widehat3.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" 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"/></svg>
--- a/static/images/widehat4.svg
+++ b/static/images/widehat4.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" 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"/></svg>
--- a/static/images/xcancel.svg
+++ b/static/images/xcancel.svg
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' preserveAspectRatio='none'><path stroke="#000" d="M0 0l12 12M0 12L12 0"/></svg>
--- a/static/katex.less
+++ b/static/katex.less
@@ -539,13 +539,20 @@
        }
    }

-    // Define CSS for background-image whose width will match its span width.
+    .svg-align {
+        text-align: left;
+    }
+
+    svg {
+        display: block;
+        position: absolute; // absolute relative to parent
+        width: 100%;
+    }
+
+    // Define CSS for image whose width will match its span width.
    .stretchy {
        width: 100%;
        display: block;
-        background-repeat: no-repeat;
-        background-position: right center;  //right, so that \widehat will shift right when it is shortened
-        background-size: 100% 100%;

        &:before,
        &:after {
@@ -588,580 +595,4 @@
        border-bottom-width: 0.08em;
    }

-    .widehat1 {
-        height: 0.24em;
-        background-image: url(images/widehat1.svg);
-    }
-    .widehat2 {
-        height: 0.30em;
-        background-image: url(images/widehat2.svg);
-    }
-    .widehat3 {
-        height: 0.36em;
-        background-image: url(images/widehat3.svg);
-    }
-    .widehat4 {
-        height: 0.42em;
-        background-image: url(images/widehat4.svg);
-    }
-    .tilde1 {
-        height: 0.26em;
-        background-image: url(images/tilde1.svg);
-    }
-    .tilde2 {
-        height: 0.29em;
-        background-image: url(images/tilde2.svg);
-    }
-    .tilde3 {
-        height: 0.306em;
-        background-image: url(images/tilde3.svg);
-    }
-    .tilde4 {
-        height: 0.312em;
-        background-image: url(images/tilde4.svg);
-    }
-    .rightarrow {
-        height: 0.522em;
-        min-width: 0.5em;
-        background-image: url(images/rightarrow.svg);
-    }
-    .xrightarrow {
-        height: 0.522em;
-        min-width: 0.783em;
-        background-image: url(images/rightarrow.svg);
-    }
-    .leftarrow {
-        height: 0.522em;
-        min-width: 0.5em;
-        background-image: url(images/leftarrow.svg);
-    }
-    .xleftarrow {
-        height: 0.522em;
-        min-width: 0.783em;
-        background-image: url(images/leftarrow.svg);
-    }
-    .overbrace {
-        height: 0.548em;
-        min-width: 1.6em;
-        background-image: url(images/overbrace.svg);
-    }
-    .underbrace {
-        height: 0.548em;
-        min-width: 1.6em;
-        background-image: url(images/underbrace.svg);
-    }
-    .leftrightarrow {
-        height: 0.522em;
-        min-width: 0.5em;
-        background-image: url(images/leftrightarrow.svg);
-    }
-    .xleftrightarrow {
-        height: 0.522em;
-        min-width: 0.783em;
-        background-image: url(images/leftrightarrow.svg);
-    }
-    .doublerightarrow {
-        height: 0.56em;
-        min-width: 0.783em;
-        background-image: url(images/doublerightarrow.svg);
-    }
-    .doubleleftarrow {
-        height: 0.56em;
-        min-width: 0.783em;
-        background-image: url(images/doubleleftarrow.svg);
-    }
-    .doubleleftrightarrow {
-        height: 0.56em;
-        min-width: 0.955em;
-        background-image: url(images/doubleleftrightarrow.svg);
-    }
-    .leftharpoon {
-        height: 0.522em;
-        min-width: 0.5em;
-        background-image: url(images/leftharpoon.svg);
-    }
-    .leftharpoon {
-        height: 0.522em;
-        min-width: 0.783em;
-        background-image: url(images/leftharpoon.svg);
-    }
-    .rightharpoon {
-        height: 0.522em;
-        min-width: 0.5em;
-        background-image: url(images/rightharpoon.svg);
-    }
-    .xrightharpoon {
-        height: 0.522em;
-        min-width: 0.783em;
-        background-image: url(images/rightharpoon.svg);
-    }
-    .hookleftarrow {
-        height: 0.522em;
-        min-width: 0.87em;
-        background-image: url(images/hookleftarrow.svg);
-    }
-    .hookrightarrow {
-        min-width: 0.87em;
-        height: 0.522em;
-        background-image: url(images/hookrightarrow.svg);
-    }
-    .mapsto {
-        height: 0.522em;
-        min-width: 0.783em;
-        background-image: url(images/mapsto.svg);
-    }
-    .leftharpoondown {
-        height: 0.522em;
-        min-width: 0.5em;
-        background-image: url(images/leftharpoondown.svg);
-    }
-    .leftharpoondown {
-        height: 0.522em;
-        min-width: 0.783em;
-        background-image: url(images/leftharpoondown.svg);
-    }
-    .rightharpoondown {
-        height: 0.522em;
-        min-width: 0.5em;
-        background-image: url(images/rightharpoondown.svg);
-    }
-    .xrightharpoondown {
-        height: 0.522em;
-        min-width: 0.783em;
-        background-image: url(images/rightharpoondown.svg);
-    }
-    .rightleftharpoons {
-        height: 0.716em;
-        min-width: 0.783em;
-        background-image: url(images/rightleftharpoons.svg);
-    }
-    .leftrightharpoons {
-        height: 0.716em;
-        min-width: 0.783em;
-        background-image: url(images/leftrightharpoons.svg);
-    }
-    .overgroup {
-        height: 0.342em;
-        min-width: 0.87em;
-        background-image: url(images/overgroup.svg);
-    }
-    .undergroup {
-        height: 0.342em;
-        min-width: 0.87em;
-        background-image: url(images/undergroup.svg);
-    }
-    .twoheadleftarrow {
-        height: 0.334em;
-        min-width: 0.86em;
-        background-image: url(images/twoheadleftarrow.svg);
-    }
-    .twoheadrightarrow {
-        height: 0.334em;
-        min-width: 0.86em;
-        background-image: url(images/twoheadrightarrow.svg);
-    }
-    .linesegment {
-        height: 0.414em;
-        min-width: 0.5em;
-        background-image: url(images/linesegment.svg);
-    }
-    .longequal {
-        height: 0.334em;
-        min-width: 0.5em;
-        background-image: url(images/longequal.svg);
-    }
-    .tofrom {
-        height: 0.528em;
-        min-width: 0.86em;
-        background-image: url(images/tofrom.svg);
-    }
-
-    // \cancel, \bcancel, and \xcancel again.
-    // Define the detailed background-image for the span.
-    // Use a linear-gradient to draw a diagonal line that is 0.08 ems wide,
-    // that is, 0.04 ems on each side of the line on the diagonal of the span.
-    .cancel {
-        background:
-           linear-gradient(to top left,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%);
-    }
-
-    .bcancel {
-        background:
-           linear-gradient(to top right,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%);
-    }
-
-    .xcancel {
-        background:
-           linear-gradient(to top left,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%),
-           linear-gradient(to top right,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%);
-    }
-
-    @media screen and (min-width:~"0\0") {
-        // CSS hack for IE 9, 10, & 11.
-        // IE doesn't recognize @supports. Hence the media screen hack.
-
-        .mask {
-            background-color: transparent !important;
-        }
-
-        // Instead of a linear gradient, use an SVG to draw the diagonal line for \cancel.
-        // This line unfortunately has a width that varies with the size of the span.
-        .bcancel,
-        .bcancel-mask {
-            background-color: transparent !important;    // Prevent a blob of color.
-            background-image: url(images/bcancel.svg);
-        }
-        .cancel,
-        .cancel-mask {
-            background-color: transparent !important;
-            background-image: url(images/cancel.svg);
-        }
-        .xcancel,
-        .xcancel-mask {
-            background-color: transparent !important;
-            background-image: url(images/xcancel.svg);
-        }
-    }
-
-    @supports ((mask-image:none) or (-webkit-mask:none)) {
-        // This section is part of the KaTeX support for \color of stretchy elements.
-        // In up-to-date browsers, over-ride the background-image set above.
-        // This section won't be applied by some older browsers, so they will instead
-        // render the black background-image defined above.
-
-        .mask,
-        .bcancel-mask,
-        .cancel-mask,
-        .xcancel-mask {
-            background-image: none;
-        }
-    }
-
-    @supports not ((mask-image:none) or (-webkit-mask:none)) {
-        //  Fall back for older browswers that do not support CSS mask.
-
-        .mask {
-            background-color: transparent !important;
-        }
-
-        // For \cancel, use a background:linear-gradient, not a mask-image:linear-gradient.
-        .cancel-mask {
-            background-color: transparent !important;
-            background:
-               linear-gradient(to top left,
-                   rgba(0,0,0,0) 0%,
-                   rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-                   rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-                   rgba(0,0,0,0) 100%);
-        }
-
-        .bcancel-mask {
-            background-color: transparent !important;
-            background:
-               linear-gradient(to top right,
-                   rgba(0,0,0,0) 0%,
-                   rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-                   rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-                   rgba(0,0,0,0) 100%);
-        }
-
-        .xcancel-mask {
-            background-color: transparent !important;
-            background:
-               linear-gradient(to top left,
-                   rgba(0,0,0,0) 0%,
-                   rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-                   rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-                   rgba(0,0,0,0) 100%),
-               linear-gradient(to top right,
-                   rgba(0,0,0,0) 0%,
-                   rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-                   rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-                   rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-                   rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-                   rgba(0,0,0,0) 100%);
-        }
-    }
-
-    .cancel-mask {
-        mask-image:
-           linear-gradient(to top left,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%);
-        -webkit-mask-image:
-           linear-gradient(to top left,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%);
-    }
-
-    .bcancel-mask {
-        mask-image:
-           linear-gradient(to top right,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%);
-        -webkit-mask-image:
-           linear-gradient(to top right,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%);
-    }
-
-    .xcancel-mask {
-        mask-image:
-           linear-gradient(to top left,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%),
-           linear-gradient(to top right,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%);
-        -webkit-mask-image:
-           linear-gradient(to top left,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%),
-           linear-gradient(to top right,
-               rgba(0,0,0,0) 0%,
-               rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
-               rgba(0,0,0,1) ~"calc(50% - 0.04em)",
-               rgba(0,0,0,1) ~"calc(50% + 0.04em)",
-               rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
-               rgba(0,0,0,0) 100%);
-    }
-
-    @supports (-ms-touch-action: none) {
-        // CSS hack for Edge
-        // TODO(ron): If/When Edge fixes its CSS calc() bug, delete the next few lines and use gradients for \cancel.
-        .bcancel,
-        .bcancel-mask {
-            background-color: transparent !important;
-            background-image: url(images/bcancel.svg);
-        }
-        .cancel,
-        .cancel-mask {
-            background-color: transparent !important;
-            background-image: url(images/cancel.svg);
-        }
-        .xcancel,
-        .xcancel-mask {
-            background-color: transparent !important;
-            background-image: url(images/xcancel.svg);
-        }
-    }
-
-    // Next, define the CSS masks used for \color on stretchy wide elements.
-    .widehat1-mask {
-        -webkit-mask: url(images/widehat1.svg);
-        mask: url(images/widehat1.svg) no-repeat;
-    }
-    .widehat2-mask {
-        -webkit-mask: url(images/widehat2.svg);
-        mask: url(images/widehat2.svg) no-repeat;
-    }
-    .widehat3-mask {
-        -webkit-mask: url(images/widehat3.svg);
-        mask: url(images/widehat3.svg) no-repeat;
-    }
-    .widehat4-mask {
-        -webkit-mask: url(images/widehat4.svg);
-        mask: url(images/widehat4.svg) no-repeat;
-    }
-    .tilde1-mask {
-        -webkit-mask: url(images/tilde1.svg);
-        mask: url(images/tilde1.svg) no-repeat;
-    }
-    .tilde2-mask {
-        -webkit-mask: url(images/tilde2.svg);
-        mask: url(images/tilde2.svg) no-repeat;
-    }
-    .tilde3-mask {
-        -webkit-mask: url(images/tilde3.svg);
-        mask: url(images/tilde3.svg) no-repeat;
-    }
-    .tilde4-mask {
-        -webkit-mask: url(images/tilde4.svg);
-        mask: url(images/tilde4.svg) no-repeat;
-    }
-    .rightarrow-mask {
-        mask: url(images/rightarrow.svg);
-        -webkit-mask: url(images/rightarrow.svg);
-    }
-    .xrightarrow-mask {
-        mask: url(images/rightarrow.svg);
-        -webkit-mask: url(images/rightarrow.svg);
-    }
-    .leftarrow-mask {
-        mask: url(images/leftarrow.svg);
-        -webkit-mask: url(images/leftarrow.svg);
-    }
-    .xleftarrow-mask {
-        mask: url(images/leftarrow.svg);
-        -webkit-mask: url(images/leftarrow.svg);
-    }
-    .overbrace-mask {
-        min-width: 1.6em;
-        mask: url(images/overbrace.svg);
-        -webkit-mask: url(images/overbrace.svg);
-    }
-    .underbrace-mask {
-        min-width: 1.6em;
-        mask: url(images/underbrace.svg);
-        -webkit-mask: url(images/underbrace.svg);
-    }
-    .leftrightarrow-mask {
-        mask: url(images/leftrightarrow.svg);
-        -webkit-mask: url(images/leftrightarrow.svg);
-    }
-    .xleftrightarrow-mask {
-        mask: url(images/leftrightarrow.svg);
-        -webkit-mask: url(images/leftrightarrow.svg);
-    }
-    .doublerightarrow-mask {
-        mask: url(images/doublerightarrow.svg);
-        -webkit-mask: url(images/doublerightarrow.svg);
-    }
-    .doubleleftarrow-mask {
-        mask: url(images/doubleleftarrow.svg);
-        -webkit-mask: url(images/doubleleftarrow.svg);
-    }
-    .doubleleftrightarrow-mask {
-        mask: url(images/doubleleftrightarrow.svg);
-        -webkit-mask: url(images/doubleleftrightarrow.svg);
-    }
-    .leftharpoon-mask {
-        mask: url(images/leftharpoon.svg);
-        -webkit-mask: url(images/leftharpoon.svg);
-    }
-    .xleftharpoon-mask {
-        mask: url(images/leftharpoon.svg);
-        -webkit-mask: url(images/leftharpoon.svg);
-    }
-    .rightharpoon-mask {
-        mask: url(images/rightharpoon.svg);
-        -webkit-mask: url(images/rightharpoon.svg);
-    }
-    .xrightharpoon-mask {
-        mask: url(images/rightharpoon.svg);
-        -webkit-mask: url(images/rightharpoon.svg);
-    }
-    .hookleftarrow-mask {
-        mask: url(images/hookleftarrow.svg);
-        -webkit-mask: url(images/hookleftarrow.svg);
-    }
-    .hookrightarrow-mask {
-        mask: url(images/hookrightarrow.svg);
-        -webkit-mask: url(images/hookrightarrow.svg);
-    }
-    .mapsto-mask {
-        mask: url(images/mapsto.svg);
-        -webkit-mask: url(images/mapsto.svg);
-    }
-    .leftharpoondown-mask {
-        mask: url(images/leftharpoondown.svg);
-        -webkit-mask: url(images/leftharpoondown.svg);
-    }
-    .xleftharpoondown-mask {
-        mask: url(images/leftharpoondown.svg);
-        -webkit-mask: url(images/leftharpoondown.svg);
-    }
-    .rightharpoondown-mask {
-        mask: url(images/rightharpoondown.svg);
-        -webkit-mask: url(images/rightharpoondown.svg);
-    }
-    .xrightharpoondown-mask {
-        mask: url(images/rightharpoondown.svg);
-        -webkit-mask: url(images/rightharpoondown.svg);
-    }
-    .rightleftharpoons-mask {
-        mask: url(images/rightleftharpoons.svg);
-        -webkit-mask: url(images/rightleftharpoons.svg);
-    }
-    .leftrightharpoons-mask {
-        mask: url(images/leftrightharpoons.svg);
-        -webkit-mask: url(images/leftrightharpoons.svg);
-    }
-    .overgroup-mask {
-        mask: url(images/overgroup.svg);
-        -webkit-mask: url(images/overgroup.svg);
-    }
-    .undergroup-mask {
-        mask: url(images/undergroup.svg);
-        -webkit-mask: url(images/undergroup.svg);
-    }
-    .twoheadleftarrow-mask {
-        mask: url(images/twoheadleftarrow.svg);
-        -webkit-mask: url(images/twoheadleftarrow.svg);
-    }
-    .twoheadrightarrow-mask {
-        mask: url(images/twoheadrightarrow.svg);
-        -webkit-mask: url(images/twoheadrightarrow.svg);
-    }
-    .linesegment-mask {
-        mask: url(images/linesegment.svg);
-        -webkit-mask: url(images/linesegment.svg);
-    }
-    .longequal-mask {
-        mask: url(images/longequal.svg);
-        -webkit-mask: url(images/longequal.svg);
-    }
-    .tofrom-mask {
-        mask: url(images/tofrom.svg);
-        -webkit-mask: url(images/tofrom.svg);
-    }
-
 }
--- a/test/screenshotter/images/ExtensibleArrows-chrome.png
+++ b/test/screenshotter/images/ExtensibleArrows-chrome.png
--- a/test/screenshotter/images/ExtensibleArrows-firefox.png
+++ b/test/screenshotter/images/ExtensibleArrows-firefox.png
--- a/test/screenshotter/images/HorizontalBraces-chrome.png
+++ b/test/screenshotter/images/HorizontalBraces-chrome.png
--- a/test/screenshotter/images/HorizontalBraces-firefox.png
+++ b/test/screenshotter/images/HorizontalBraces-firefox.png
--- a/test/screenshotter/images/LowerAccent-chrome.png
+++ b/test/screenshotter/images/LowerAccent-chrome.png
--- a/test/screenshotter/images/LowerAccent-firefox.png
+++ b/test/screenshotter/images/LowerAccent-firefox.png
--- a/test/screenshotter/images/StretchyAccent-chrome.png
+++ b/test/screenshotter/images/StretchyAccent-chrome.png
--- a/test/screenshotter/images/StretchyAccent-firefox.png
+++ b/test/screenshotter/images/StretchyAccent-firefox.png
--- a/test/screenshotter/images/StretchyAccentColor-chrome.png
+++ b/test/screenshotter/images/StretchyAccentColor-chrome.png
--- a/test/screenshotter/images/StretchyAccentColor-firefox.png
+++ b/test/screenshotter/images/StretchyAccentColor-firefox.png
--- a/test/screenshotter/images/StrikeThrough-chrome.png
+++ b/test/screenshotter/images/StrikeThrough-chrome.png
--- a/test/screenshotter/images/StrikeThrough-firefox.png
+++ b/test/screenshotter/images/StrikeThrough-firefox.png
--- a/test/screenshotter/images/StrikeThroughColor-chrome.png
+++ b/test/screenshotter/images/StrikeThroughColor-chrome.png
--- a/test/screenshotter/images/StrikeThroughColor-firefox.png
+++ b/test/screenshotter/images/StrikeThroughColor-firefox.png
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" preserveAspectRatio="none"><path stroke="#000" d="M0 0l12 12"/></svg>`
				`@@ -1 +0,0 @@`
				`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' preserveAspectRatio='none'><path stroke="#000" d="M0 12L12 0"/></svg>`
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="0 0 400000 549" preserveAspectRatio="xMinYMin slice"><path d="M262 157l10-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.5c2 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-40zm8 0v40h399730v-40zm0 194v40h399730v-40z"/></svg></svg>