Converting MathJax svg to base64 image string.

[m.um...@gmail.com]

Hi,

    I can render mathml to equations as svg paths. I want the svg path to be converted to the image(
png or jpg) which can then be sent to webgl to render as a image. Can you guys point me in the right direction? I tried saving the inline svg and its empty. And I found out that paths have references to mathjax style files.

so the image convert was empty(transparent). 

[Davide Cervone]

You might consider using mathjax-node, which is a command-line version of MathJax, rather than trying to use MathJax in browser:

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

or more specifically, the mathjax-node-svg2png extension at

https://github.com/pkra/mathjax-node-svg2png

These are command-line tools for working with MathJax.

Just FYI, the issue you are probably running into is the fact that the SVG output uses a shared cache for the paths that it uses within the expressions on the page.  The individual equations have <use> elements that refer to the paths in that cache.  If you are using an individual SVG from the page without also including that global cache, your SVG's will not have the paths to refer to, and you will have blank images, as you are seeing.

You can configure MathJax to not use a cache (i.e., use <path> elements directly), or use a cache that is local to each expression rather than a global cache.  For example

<script type="text/x-mathjax-config">

MathJax.Hub.Config({

  SVG: {

    useGlobalCache: false

  }

});

</script>

placed just BEFORE the script that loads MathJax.js itself would tell the SVG output to use font caches that are local to each expression.  That should make the SVG elements self contained so they can be saved and processed outside the browser.

Hope that does the trick fo you.

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/09bae703-9b9f-438b-b22b-5987a68e9027%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Umresh M]

Hi,

    My requirement is to get the image of the rendered equation(image) from MathML using mathjax and I can use that image to display and I need to do it on client side. I'm using using Unity3d to build a WebGL build and I need to display the MathML inside unity and we want to do it on the client side. 

I'll try the cache method.

Thanks. 

On Tuesday, June 18, 2019 at 10:03:13 PM UTC+5:30, Davide Cervone wrote:

You might consider using mathjax-node, which is a command-line version of MathJax, rather than trying to use MathJax in browser:

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

or more specifically, the mathjax-node-svg2png extension at

https://github.com/pkra/mathjax-node-svg2png

These are command-line tools for working with MathJax.

Just FYI, the issue you are probably running into is the fact that the SVG output uses a shared cache for the paths that it uses within the expressions on the page.  The individual equations have <use> elements that refer to the paths in that cache.  If you are using an individual SVG from the page without also including that global cache, your SVG's will not have the paths to refer to, and you will have blank images, as you are seeing.

You can configure MathJax to not use a cache (i.e., use <path> elements directly), or use a cache that is local to each expression rather than a global cache.  For example

<script type="text/x-mathjax-config">

MathJax.Hub.Config({

  SVG: {

    useGlobalCache: false

  }

});

</script>

placed just BEFORE the script that loads MathJax.js itself would tell the SVG output to use font caches that are local to each expression.  That should make the SVG elements self contained so they can be saved and processed outside the browser.

Hope that does the trick fo you.

Davide

On Jun 18, 2019, at 10:33 AM, m.u...@gmail.com wrote:

Hi,

    I can render mathml to equations as svg paths. I want the svg path to be converted to the image(
png or jpg) which can then be sent to webgl to render as a image. Can you guys point me in the right direction? I tried saving the inline svg and its empty. And I found out that paths have references to mathjax style files.

so the image convert was empty(transparent). 

--
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 mathja...@googlegroups.com.

[Umresh M]

I tried the useGlobalCache : false still i get blank svg on save. I copied the element 

<use transform="scale(0.707)" xlink:href="#E1-MJMAIN-31" x="1803" y="0"></use>

When I remove the xlink:href="#E1-MJMAIN-31". Its not rendered.

On Tuesday, June 18, 2019 at 10:03:13 PM UTC+5:30, Davide Cervone wrote:

You might consider using mathjax-node, which is a command-line version of MathJax, rather than trying to use MathJax in browser:

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

or more specifically, the mathjax-node-svg2png extension at

https://github.com/pkra/mathjax-node-svg2png

These are command-line tools for working with MathJax.

Just FYI, the issue you are probably running into is the fact that the SVG output uses a shared cache for the paths that it uses within the expressions on the page.  The individual equations have <use> elements that refer to the paths in that cache.  If you are using an individual SVG from the page without also including that global cache, your SVG's will not have the paths to refer to, and you will have blank images, as you are seeing.

You can configure MathJax to not use a cache (i.e., use <path> elements directly), or use a cache that is local to each expression rather than a global cache.  For example

<script type="text/x-mathjax-config">

MathJax.Hub.Config({

  SVG: {

    useGlobalCache: false

  }

});

</script>

placed just BEFORE the script that loads MathJax.js itself would tell the SVG output to use font caches that are local to each expression.  That should make the SVG elements self contained so they can be saved and processed outside the browser.

Hope that does the trick fo you.

Davide

On Jun 18, 2019, at 10:33 AM, m.u...@gmail.com wrote:

Hi,

    I can render mathml to equations as svg paths. I want the svg path to be converted to the image(
png or jpg) which can then be sent to webgl to render as a image. Can you guys point me in the right direction? I tried saving the inline svg and its empty. And I found out that paths have references to mathjax style files.

so the image convert was empty(transparent). 

--
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 mathja...@googlegroups.com.

[Davide Cervone]

I tried the useGlobalCache : false still i get blank svg on save. I copied the element 

<use transform="scale(0.707)" xlink:href="#E1-MJMAIN-31" x="1803" y="0"></use>

When I remove the xlink:href="#E1-MJMAIN-31". Its not rendered.

I'm not sure I understand what you mean by you copied this element.  Is that ALL that you used to try to render the SVG?  Note that the xlink:href is a necessary part of the element, and can't be removed.  I refers to a path in the <defs> element that is part of the SVG, so you need to have that <defs> element be part of the SVG that you are converting to an image.

Are you saying that the complete SVG generated by MathJax (not some modified one) doesn't convert to an image?  What tool are you using for the conversion?

You might try

<script type="text/x-mathjax-config">

MathJax.Hub.Config({

  SVG: {

    useFontCache: false

  }

});

</script>

as that will use explicit paths rather than <use> elements.  If that doesn't work, you will need to be more explicit about the mechanism you are using to save the results and to convert to images.

Davide