Convert Tex Equation to Image

[Christos Christodoulou]

Hello -

I'm using MathJax and would like to convert the Tex equation to an svg image. Right now it converts it to SVG source code but that is not useful. How can I covert it to SVG image programmatically?

Similar to here: 
https://www.bruot.org/tex2img/
https://viereck.ch/latex-to-svg/

Thanks.

[Murray]

Hello Christos

Your request is not overly clear since any SVG just consists of "source code". Even if you use <img> tag and the src is an SVG, that SVG is still just "source code".

Each of the cases you mention (MathJax, and the 2 online "image output" examples) produces output in the following format:

<svg ...>

  <defs>

    <path ...></path>

    <path ...></path>

  </defs>

  <g>

    <use ... ></use>

    <use ... ></use>

  </g>

</svg>

The only difference with the 2 online "image" generators is they do not include MathJax's accessibility extras, nor any MathML output - just the SVG.

Both of those 2 sites are just extracting the SVG produced by MathJax.

We don't know your experience or programming level, but the following methods can extract the SVG. (There's no "Save as... option with MathJax that will do this for you.)

I'm assuming you are using the "tex-svg.js", not the "tex-chtml.js" version and NOT using the "fontCache: 'global'" option.

(1) Go to one of your pages containing MathJax and open the developer console. In the "Elements" area, find the first <mjx-container>. Inside that, you'll find one level down the <svg>. 

Right click on the <svg> and choose "Copy -> Copy outerHTML". You can then paste that wherever you need it.

(2) Or, some simple javascript can extract the SVG.

Once again, in the developer console, paste the following where the ">" is and hit Enter on your keyboard.

document.querySelector('p').appendChild(document.querySelector('mjx-container svg').cloneNode(true))

This will clone the SVG from your first MathJax on the page to the first <p> tag on your page.

You could write a script to do something similar and produce output which is easy to copy and paste to elsewhere.

If you have many equations you want as standalone SVGs, you can make use of AJAX to write the SVGs to your server (or local HDD).

You may be interested in my "SVGMath" where I do what I describe above: https://bourne2learn.com/math/svgmath/svgmath-demo.php

There is both inline SVG and use of <img> tag versions.

Hope it makes sense

Regards

Murray

[Davide Cervone]

As Murray points out, SVG is an XML-based format, which means it is a text file, not a binary one, so you certainly will be able to read the "source code".

He gave you several approaches to your question, but you may also be interested in the command-line tools at

https://github.com/mathjax/MathJax-demos-node

that can be used to convert a TeX or MathML (or AsciiMath) string to SVG outside of a browsers.  That means you can control the conversion programmatically more easily.

If you are having trouble using the SVG text that you are getting from MathJax, you may need to add the line

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

at the top of the .svg file.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/fc5b3eab-e4c9-4c83-aa5d-cf6235d2146dn%40googlegroups.com.