javascriptsvglatexmathjax

MathJax tex2svg doesn't render directly to SVG


This will probably come across as a fast question without research, but I've been off-track for hours trying to figure it out.

I lately tried MathJax for the first time and I made a textarea that converted the text to an svg dynamically. Then I would save the svg and use it in other places. I used tex2svg. I remember it well. Now I tried to reuse it to render the svg to a canvas, which itself is easy, but now all I can get is a weird <mjx-container> element instead of paths. Documentation is much less than enough to cover this library and I can't find any way to get back a pure <svg> element. Please help me.

I know that you can still render the image from the <math> element under <mjx-container>><mjx-assistive-mml>, but in my case, loading into an HTMLImageElement with data:image/svg+xml will put the image in a broken state, so that's a last resort.


Solution

  • The <svg> element is inside the <mjx-container>. You can obtain it using node.getElementsByTagName("svg")[0] where node is the <mjx-container> element.

    On the other hand, you may want to look at the command-line programs in the MathJax node demos repository, as these don't require you to use the browser at all, and can save directly to a file. They remove the <mjx-container> and include some needed CSS styles in the result, which you won't get from the approach you are currently using.