An example of rendering latex-like equations to svg

[michalsustr]

It is using typst which writes equations similarly to latex, but without the historical baggage of compliling latex stack.

The idea is that we could support rendering nice labels for legends etc.

[michalsustr]

This is the output image

and svg:

<svg class="typst-doc" viewBox="0 0 47.188411111111115 11.8338" width="47.188411111111115pt" height="11.8338pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
    <g>
        <g class="typst-group">
            <g>
                <g class="typst-text" transform="matrix(1 0 0 -1 0 9.1058)">
                    <use xlink:href="#gAF45B4830F43F3CC174FD2A2B7FB8EAB" x="0" y="0" fill="#000000" fill-rule="nonzero"/>
                </g>
                <g class="typst-text" transform="matrix(1 0 0 -1 6.38 9.1058)">
                    <use xlink:href="#gD0CF59C0BA60207BB57E520560C047A7" x="0" y="0" fill="#000000" fill-rule="nonzero"/>
                </g>
                <g class="typst-text" transform="matrix(1 0 0 -1 10.659 9.1058)">
                    <use xlink:href="#gB11D4FBFDD6A8DB034C740FF91ACF670" x="0" y="0" fill="#000000" fill-rule="nonzero"/>
                </g>
                <g class="typst-text" transform="matrix(1 0 0 -1 16.951 9.1058)">
                    <use xlink:href="#g44D1BDFB445AC82EB03971723D0B4666" x="0" y="0" fill="#000000" fill-rule="nonzero"/>
                </g>
                <g class="typst-text" transform="matrix(1 0 0 -1 24.285555555555558 9.1058)">
                    <use xlink:href="#gB92D1E6C6A940F2A552FA1C26483FAEB" x="0" y="0" fill="#000000" fill-rule="nonzero"/>
                </g>
                <g class="typst-text" transform="matrix(1 0 0 -1 35.89911111111111 9.1058)">
                    <use xlink:href="#gB11D4FBFDD6A8DB034C740FF91ACF670" x="0" y="0" fill="#000000" fill-rule="nonzero"/>
                </g>
                <g class="typst-text" transform="matrix(1 0 0 -1 42.19111111111111 5.1128)">
                    <use xlink:href="#g54777AFDD110EC4A72036DA16342196F" x="0" y="0" fill="#000000" fill-rule="nonzero"/>
                </g>
            </g>
        </g>
    </g>
    <defs id="glyph">
        <symbol id="gAF45B4830F43F3CC174FD2A2B7FB8EAB" overflow="visible">
            <path d="M 0 0m 6.072 6.963 c 0 0.4840002 -0.47300005 0.7920003 -0.99000025 0.7920003 c -0.6819997 0 -1.1549997 -0.44000006 -1.4079998 -1.309 c -0.055000067 -0.19799995 -0.17600012 -0.7590003 -0.352 -1.6830001 h -0.71500015 c -0.24199986 0 -0.36299992 -0.011000156 -0.36299992 -0.2420001 c 0 -0.12099981 0.11000013 -0.17600012 0.34100008 -0.17600012 h 0.65999985 l -0.803 -4.257 c -0.12099981 -0.627 -0.23099995 -1.089 -0.32999992 -1.3970001 c -0.13199997 -0.40699995 -0.319 -0.61599994 -0.561 -0.61599994 c -0.16499996 0 -0.29700005 0.04399991 -0.41799998 0.12099993 c 0.352 0.055000067 0.528 0.26400006 0.528 0.61600006 c 0 0.28599995 -0.143 0.42899996 -0.44000006 0.42899996 c -0.37399995 0 -0.63799995 -0.32999998 -0.63799995 -0.70399994 c 0 -0.4840001 0.45100003 -0.79199994 0.968 -0.79199994 c 0.27499998 0 0.528 0.109999895 0.7370001 0.34099984 c 0.35199976 0.36300004 0.62699986 0.88 0.8249998 1.5730001 c 0.12100005 0.429 0.23099995 0.847 0.3080001 1.265 l 0.638 3.4209998 h 0.90199995 c 0.25299978 0 0.36299992 0.011000156 0.36299992 0.26400042 c 0 0.09899998 -0.11000013 0.1539998 -0.32999992 0.1539998 h -0.8470001 c 0.065999985 0.45099974 0.37400007 2.112 0.47300005 2.321 c 0.11000013 0.23099995 0.26399994 0.34100008 0.4619999 0.34100008 c 0.16499996 0 0.3080001 -0.04400015 0.42900038 -0.12100029 c -0.34100008 -0.07700014 -0.5170002 -0.2750001 -0.5170002 -0.6160002 c 0 -0.28599977 0.14300013 -0.4289999 0.44000006 -0.4289999 c 0.37400007 0 0.638 0.32999992 0.638 0.704 Z "/>
        </symbol>
        <symbol id="gD0CF59C0BA60207BB57E520560C047A7" overflow="visible">
            <path d="M 0 0m 3.498 -2.728 c 0.09899998 0 0.15400004 0.05499983 0.15400004 0.15400004 c 0 0.032999992 -0.022000074 0.0769999 -0.055000067 0.12099981 c -0.5719998 0.44000006 -1.0339999 1.1660001 -1.375 2.167 c -0.29699993 0.869 -0.45099986 1.727 -0.45099986 2.5740001 v 0.9239998 c 0 0.8470001 0.15399992 1.7049999 0.45099986 2.574 c 0.34100008 1.0010004 0.8030002 1.7270002 1.375 2.1670003 c 0.032999992 0.032999992 0.055000067 0.076999664 0.055000067 0.12100029 c 0 0.09899998 -0.055000067 0.15399933 -0.15400004 0.15399933 c -0.010999918 0 -0.04399991 -0.01099968 -0.0769999 -0.032999992 c -0.6600001 -0.50599957 -1.21 -1.2539997 -1.661 -2.2549996 c -0.42900002 -0.95700026 -0.64900005 -1.8590002 -0.64900005 -2.7280002 v -0.9239998 c 0 -0.8690001 0.22000003 -1.7710001 0.64900005 -2.7280002 c 0.45099998 -1.0009999 1.0009999 -1.7489998 1.661 -2.2549999 c 0.032999992 -0.022000074 0.065999985 -0.032999992 0.0769999 -0.032999992 Z "/>
        </symbol>
        <symbol id="gB11D4FBFDD6A8DB034C740FF91ACF670" overflow="visible">
            <path d="M 0 0m 5.797 4.103 c 0 0.50600004 -0.4949999 0.7589998 -1.0450001 0.7589998 c -0.47300005 0 -0.8469999 -0.25299978 -1.1329999 -0.7589998 c -0.23099995 0.50600004 -0.61599994 0.7589998 -1.177 0.7589998 c -0.5389999 0 -0.979 -0.25299978 -1.331 -0.74800014 c -0.29699993 -0.4289999 -0.45099998 -0.7479999 -0.45099998 -0.9569998 c 0 -0.09899998 0.055000007 -0.15400004 0.16500002 -0.15400004 c 0.09900004 0 0.16500002 0.055000067 0.18699998 0.15400004 c 0.20899999 0.638 0.671 1.3859997 1.4080001 1.3859997 c 0.36299992 0 0.5389998 -0.23099995 0.5389998 -0.6819997 c 0 -0.23100019 -0.19799995 -1.089 -0.58299994 -2.5630002 c -0.18700004 -0.737 -0.51699996 -1.1 -0.9899999 -1.1 c -0.15400004 0 -0.29700005 0.033000007 -0.41800004 0.088000014 c 0.28599995 0.109999985 0.42899996 0.30799997 0.42899996 0.594 c 0 0.286 -0.143 0.42900002 -0.43999994 0.42900002 c -0.36300004 0 -0.638 -0.30799997 -0.638 -0.671 c 0 -0.50600004 0.51699996 -0.759 1.056 -0.759 c 0.462 0 0.83599997 0.253 1.1329999 0.759 c 0.20900011 -0.50600004 0.605 -0.759 1.177 -0.759 c 0.5279999 0 0.96799994 0.253 1.3200002 0.74799997 c 0.29699993 0.42900002 0.45099974 0.748 0.45099974 0.957 c 0 0.09899998 -0.05499983 0.15400004 -0.16499996 0.15400004 c -0.09899998 0 -0.1539998 -0.055000067 -0.1869998 -0.15400004 c -0.18700027 -0.627 -0.68200016 -1.386 -1.3970001 -1.386 c -0.36300015 0 -0.54999995 0.21999998 -0.54999995 0.671 c 0 0.14299995 0.05499983 0.45099992 0.17599988 0.9459999 l 0.37400007 1.485 c 0.20899987 0.82500005 0.54999995 1.2429998 1.0340002 1.2429998 c 0.1539998 0 0.29699993 -0.032999992 0.41799974 -0.08799982 c -0.29699993 -0.09899998 -0.44000006 -0.29699993 -0.44000006 -0.59399986 c 0 -0.286 0.15400028 -0.42900014 0.4510002 -0.42900014 c 0.35199976 0 0.62699986 0.319 0.62699986 0.67100024 Z "/>
        </symbol>
        <symbol id="g44D1BDFB445AC82EB03971723D0B4666" overflow="visible">
            <path d="M 0 0m 0.858 -2.695 c 0.66 0.50600004 1.21 1.254 1.661 2.2549999 c 0.4289999 0.957 0.6489999 1.859 0.6489999 2.7280002 v 0.9239998 c 0 0.86899996 -0.22000003 1.7709999 -0.6489999 2.7280002 c -0.45099998 1.0009999 -1.001 1.7490001 -1.661 2.2549996 c -0.032999992 0.022000313 -0.065999985 0.032999992 -0.07699996 0.032999992 c -0.09900004 0 -0.15400004 -0.05499935 -0.15400004 -0.15399933 c 0 -0.044000626 0.022000015 -0.0880003 0.055000007 -0.12100029 c 0.57199997 -0.44000006 1.0339999 -1.1659999 1.375 -2.1670003 c 0.29700017 -0.86899996 0.45099998 -1.7269998 0.45099998 -2.574 v -0.9239998 c 0 -0.8470001 -0.1539998 -1.7050002 -0.45099998 -2.5740001 c -0.34099996 -1.0009999 -0.803 -1.727 -1.375 -2.167 c -0.032999992 -0.04399991 -0.055000007 -0.08799982 -0.055000007 -0.12099981 c 0 -0.099000216 0.055000007 -0.15400004 0.15400004 -0.15400004 c 0.010999978 0 0.04399997 0.010999918 0.07699996 0.032999992 Z "/>
        </symbol>
        <symbol id="gB92D1E6C6A940F2A552FA1C26483FAEB" overflow="visible">
            <path d="M 0 0m 7.678 4.037 h -6.798 c -0.176 0 -0.264 -0.0880003 -0.264 -0.25300026 c 0 -0.16499996 0.088 -0.25300002 0.264 -0.25300002 h 6.798 c 0.17600012 0 0.26399994 0.08800006 0.26399994 0.25300002 c 0 0.13199997 -0.12099981 0.25300026 -0.26399994 0.25300026 Z m 0 -2.0680003 h -6.798 c -0.176 0 -0.264 -0.08799994 -0.264 -0.25300002 c 0 -0.16499996 0.088 -0.25300002 0.264 -0.25300002 h 6.798 c 0.17600012 0 0.26399994 0.08800006 0.26399994 0.25300002 c 0 0.143 -0.12099981 0.25300002 -0.26399994 0.25300002 Z "/>
        </symbol>
        <symbol id="g54777AFDD110EC4A72036DA16342196F" overflow="visible">
            <path d="M 0 0m 0.9163 3.2648 c 0.24639994 0 0.43119997 0.18479991 0.43119997 0.43120003 c 0 0.27719998 -0.14629996 0.42350006 -0.43119997 0.43120003 c 0.16940004 0.36189985 0.5544 0.6545 1.0548999 0.6545 c 0.6775999 0 1.1242001 -0.50820017 1.1242001 -1.1858001 c 0 -0.36960006 -0.13090014 -0.7238002 -0.40040016 -1.0703001 c -0.1308999 -0.17709994 -0.23099995 -0.30029988 -0.30029988 -0.36960006 l -1.8249 -1.8094999 c -0.10010001 -0.092400014 -0.08470002 -0.1155 -0.08470002 -0.3465 h 3.1724 l 0.23869991 1.4476 h -0.32340002 c -0.053900003 -0.4081 -0.11549997 -0.64680004 -0.18479991 -0.7007 c -0.03850007 -0.023100019 -0.27719998 -0.03850001 -0.7314999 -0.03850001 h -1.3090001 c 0.5159 0.45429993 0.9933001 0.86239994 1.4476 1.2243 c 0.34649992 0.2694999 0.59290004 0.50820005 0.7469001 0.71609986 c 0.23099995 0.30030012 0.34649992 0.6160002 0.34649992 0.94710016 c 0 0.47739983 -0.18479991 0.8547001 -0.56209993 1.1318998 c -0.3311 0.25409985 -0.7469001 0.38500023 -1.2397001 0.38500023 c -0.42349994 0 -0.7853999 -0.12319994 -1.1011 -0.3696003 c -0.3311 -0.26949978 -0.50049996 -0.60829973 -0.50049996 -1.0240998 c 0 -0.26180005 0.19250003 -0.45429993 0.4312 -0.45429993 Z "/>
        </symbol>
    </defs>
</svg>

[michalsustr]

@valadaptive I saw you did work in egui for font rendering. Can I ask you for advice? I would like to create a egui_typst crate that would support subset of typst, specifically for math equations rendering. This should be possible even today, with an SVG-representation back and forth, which involves String (de)serialization. I'd like to avoid that, to improve performance. What would be good low-level representations to use from typst in egui to render math equations? I am not an expert on fonts rendering, but something like a Vec of bezier curves should be good enough? Thank you so much for your advice!