# Typeset math in SVG via MathJax 3

**URL:** <https://talk.observablehq.com/t/typeset-math-in-svg-via-mathjax-3/3437>\
**Category:** Show and tell\
**Created:** [June 10, 2020, 8:21pm UTC](https://talk.observablehq.com/t/typeset-math-in-svg-via-mathjax-3/3437 "2020-06-10T20:21:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [June 10, 2020, 8:21pm UTC](https://talk.observablehq.com/t/typeset-math-in-svg-via-mathjax-3/3437/1 "2020-06-10T20:21:26Z")

</div>

MathJax 3 has the ability to convert TeX directly to SVG. This is handy when embedding embedding typescript expressions into SVG, as you can simply insert the output from `MathJax.tex2svg` directly into your larger SVG document. As a result, if you use Observable’s “Download SVG” facility or [SVG Crowbar](https://nytimes.github.io/svg-crowbar/) on an HTML page, the typeset mathematics should be included correctly. Here’s an example:

> **[SVG and MathJax 3](https://observablehq.com/@mcmcclur/svg-and-mathjax-3)**
>
> An Observable notebook by Mark McClure.

Note that MathJax was long by far the best option to place typeset mathematics in web pages but has recently been challenged by KaTeX - largely due to the speed difference. I also like KaTeX’s API compared to MathJax 2. MathJax 3 is a big step forward on both those issues and still maintain’s a strong lead in feature implementation. One major issue with MathJax 3 is that the documentation is currently way behind the capabilities.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [June 10, 2020, 9:08pm UTC](https://talk.observablehq.com/t/typeset-math-in-svg-via-mathjax-3/3437/2 "2020-06-10T21:08:31Z")

</div>

Cool! I didn’t realize that you could `require` MathJax 3. You can see the ugly thing I did in this notebook:

> **[GitHub Lean doc preview](https://observablehq.com/@bryangingechen/github-lean-doc-preview?url=%221952%22)**
>
> An Observable notebook by Bryan Gin-ge Chen.

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [June 10, 2020, 9:42pm UTC](https://talk.observablehq.com/t/typeset-math-in-svg-via-mathjax-3/3437/3 "2020-06-10T21:42:29Z")

</div>

> [@bgchen](#):
>
> Cool! I didn’t realize that you could `require` MathJax 3.

Thanks. The require is a bit awkward; Tom calls it “The ‘global leak’ pattern.” in his [Module require debugger](https://observablehq.com/@observablehq/module-require-debugger). I guess the idea is that MathJax adds a property to `document.window` which we then return via `catch`.