How can I save mathjax locally as .svg (or get dvisvgm working alternatively)?

Anki Card Design
3

A couple of approaches. I’m in favor of just using mathjax. my equations doesn’t take even 1 second to render after my normal text, so that’s something you should investigate. because I know not to abuse it lol.

Custom MathJax size following parent element’s font size

mjx-container {
  font-size: 1em !important;
}

SVG for [latex] in Anki

I’m basing off my memory of my old system, because i no longer have latex. I apologize if I can’t help you further. First, you should check the box accessed from Tools > Manage Note Types > Options:

image
image799×439 19.7 KB

Then, make a new latex equation. The latex output in webview inspector should be SVG now. You should also check for the SVG file in your profile’s media.collection folder.

Making the SVGs look nice

I hope you know enough HTML, CSS and JS to use and adapt my suggestions. (ChatGPT can help you)

First, we want a way to rescale the SVGs after the “browser” knows its intrinsic size. Such thing is not possible to do merely with CSS, because it doesn’t know how to calculate stuff from an image’s intrinsic size. My approach is to allow you configure this in CSS via --latex-scale custom property/variable.

Use this script and make sure it’s loaded only once when rendering front and back side of your card. (otherwise, it just makes rendering a bit slower than necessary).

function scaleImage(elm, scale) {
    elm.style.width = `${elm.naturalWidth * scale}px`;
    elm.style.height = `${elm.naturalHeight * scale}px`;
}

queueMicrotask(() => {
    document.querySelectorAll('.latex').forEach((elm) => {
        const scale = parseFloat(getComputedStyle(elm).getPropertyValue('--latex-scale').trim());
        if (elm.complete) {
            scaleImage(elm, scale);
        } else {
            elm.addEventListener('load', () => scaleImage(elm, scale));
        }
    });
});

To also get proper dark mode colors right, i’m going to cheat and use CSS filters. There’s a proper way of recoloring SVGs on the fly but that’s even more work than I care to put in. Lastly, align vertically for inline latex.

.latex {
    vertical-align: middle;
    --latex-scale: 1.5; /* Eyeball the best value */
}
.nightMode .latex {
    filter: invert(100%);
}

There’s a different post talking about specific ways to style block latex: Horizontally center align block latex - #2 by jcznk. You can adapt that, if you’d like.

Configure Latex in Anki

I’m not a big fan of latex’s configuring and very uninformed, but that’s another thing to look into. i’m pretty sure you can do something with that Note Type Options above.

1 Like