How would I add custom SVG shapes to an equation generated with MathJax?

[rou...@gmail.com]

I'd like to use MathJax to write various equations that include SVG shapes along the lines of the following:

    (2 * [red box]) + [red box] = [three red boxes]

Where each item in brackets would be a custom SVG element defined in the HTML ranging from simple (a single box) to more complex (multiple shapes). The reason for needing this is that I want to use MathJax's ability to format math equations while replacing some symbols with SVG shapes. I may need to specify other HTML as well.

I suspect this can be achieved by using MathJax's HTML snippets but I don't know how to take the sample code provides and make it work for any given equation.

Any help would be greatly appreciated.

[Davide Cervone]

If you are using MathML input, you can use the `<mglyph>` element to include an svg image into your expression, as in:

<math>

  <mglyph src="dice.svg" height="42px" width="42px" valign="-14px" alt="Dice showing five dots"></mglyph>

</math>

or even

<math>

  <glyph src='data:image/svg+xml,

    <svg xmlns="http://www.w3.org/2000/svg" height="42px" width="42px">

      <rect stroke="black" fill="none" x="1px" y="1px" stroke-width="2px" rx="5px" width="40px" height="40px"></rect>

      <circle stroke="black" fill="black" cy="30px" cx="30px" r="5px"></circle>

      <circle stroke="black" fill="black" cy="30px" cx="10px" r="5px"></circle>

      <circle stroke="black" fill="black" cy="20px" cx="20px" r="5px"></circle>

      <circle stroke="black" fill="black" cy="10px" cx="30px" r="5px"></circle>

      <circle stroke="black" fill="black" cy="10px" cx="10px" r="5px"></circle>

    </svg>'

    valign="-14px"

    alt="Dice showing five dots">

  </mglyph>

</math>

If you are using TeX input, you can create the mglyph using the \mmlToken macro:

\mmlToken{mglyph}[src="dice.svg" width="42px" height="42px" valign="-14px" alt="Dice showing five dots"]{}

You can also use the "img" third-party extension available at

https://github.com/pkra/mathjax-img

This defines an \img macro that makes loading the image a bit easier:

\img[-14px][42px][42px]{dice.svg}

I think you should be abel to do what you want using one of those.

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.
For more options, visit https://groups.google.com/d/optout.

[Nicholas Rougeux]

This is promising news and thank you for the examples but when I tried the one you provided as-is, I get a yellow error in its place saying:

Unknown node type: glyph

Maybe my configuration needs to change?:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] }
    });
</script>

Nick

You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/lnZFZh62BR8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.

[Davide Cervone]

Sorry, I think the spell checker may have autocorrected "mglyph" to "glyph" in the example.  It should be:

<math>

  <mglyph src='data:image/svg+xml,

    <svg xmlns="http://www.w3.org/2000/svg" height="40px" width="40px">

      <rect stroke="black" fill="none" x="1px" y="1px" stroke-width="2px" rx="5px" width="28px" height="38px"></rect>

      <circle stroke="black" fill="black" cy="30px" cx="30px" r="5px"></circle>

      <circle stroke="black" fill="black" cy="30px" cx="10px" r="5px"></circle>

      <circle stroke="black" fill="black" cy="20px" cx="20px" r="5px"></circle>

      <circle stroke="black" fill="black" cy="10px" cx="30px" r="5px"></circle>

      <circle stroke="black" fill="black" cy="10px" cx="10px" r="5px"></circle>

    </svg>'

    valign="-14px"

    alt="Dice showing five dots">

  </mglyph>

</math>

That works for me.  See if it works for you.

Davide

[Nicholas Rougeux]

Ah thank you. I should have caught that. It does work for me as well. Thanks so much.

For others who happen to find this, I also found that specifying colors with hex values has to be done like %23f00 instead of #f00 as demonstrated in this:

Hexadecimal color values in SVG as data url

Nick

-----
Let's connect
Twitter: http://www.twitter.com/rougeux
Behance: http://www.behance.net/rougeux
LinkedIn: http://www.linkedin.com/in/nicholasrougeux

Website: http://www.c82.net

[Nicholas Rougeux]

A follow up question: would there be a way to do this to avoid encoding the SVG in the mglyph element so the elements of the SVG can be accessed through JavaScript and styled through CSS?

-----
Let's connect
Twitter: http://www.twitter.com/rougeux
Behance: http://www.behance.net/rougeux
LinkedIn: http://www.linkedin.com/in/nicholasrougeux

Website: http://www.c82.net

[Davide Cervone]

When MathML was added to the HTML5 specification, it was extended to allow HTML elements embedded in the MathML, so that would be the natural way to do it. Unfortunately, MathJax has not implemented that (mostly because it uses XML internally to parse the MathML, and mixing HTML with that is awkward).

But there is another way that is technically invalid, but does work.  The idea is to use a <semantics> element and put the SVG image in an <annotation-xml> child of it.  The first child of the <semantics> element is displayed, and technically, it must be regular MathML, not an annotation.  But in the early days of MathML, Firefox would render the first element regardless, and this feature was used as a means of getting HTML into a MathML expression, so it persists to today (this was before HTML5 was available).  MathJax implements that as well, because it was a very useful feature, even though it is not to spec.

So you can do something like:

<style>

circle {

  stroke: red !important;

  fill: red ! important;

}

</style>

<math>

<semantics>

<annotation-xml encoding="image/svg+xml">

  <svg xmlns="http://www.w3.org/2000/svg" height="40px" width="40px" style="vertical-align:-13px">

    <rect stroke="black" fill="none" x="1px" y="1px" stroke-width="2px" rx="5px" width="38px" height="38px"></rect>

    <circle stroke="black" fill="black" cy="30px" cx="30px" r="5px"></circle>

    <circle stroke="black" fill="black" cy="30px" cx="10px" r="5px"></circle>

    <circle stroke="black" fill="black" cy="20px" cx="20px" r="5px"></circle>

    <circle stroke="black" fill="black" cy="10px" cx="30px" r="5px"></circle>

    <circle stroke="black" fill="black" cy="10px" cx="10px" r="5px"></circle>

  </svg>

</annotation-xml>

</semantics>

</math>

to make the dots in the dice red.

Note, however, that this is really a misuse of <semantics>, and it may not be as portable as the <mglyph> approach, so if the math is copied to another MathML environment, it might no longer work.  Also note that you need to use the vertical-align style to adjust the vertical position of the SVG, if that is needed.  Finally, I don't know how well this will work with screen readers.  It might help to include and aria-label or aria-labeledby attribute on the SVG for that as an alternative for the mglyph's alt attribute.

Davide

[Nicholas Rougeux]

Thanks for the example and explanation. When I tried yours, I got a yellow error saying:

Unknown node type: svg

Perhaps MathJax doesn't support this any longer?

-----
Let's connect
Twitter: http://www.twitter.com/rougeux
Behance: http://www.behance.net/rougeux
LinkedIn: http://www.linkedin.com/in/nicholasrougeux

Website: http://www.c82.net

[Davide Cervone]

It works for me.  Can you provide a test file where it fails for you?

Davide

[Nicholas Rougeux]

Sorry, I see it's working now. I accidentally left in a MathML extension I had tried to use. Thanks so much for for all your help and the explanations.

-----
Let's connect
Twitter: http://www.twitter.com/rougeux
Behance: http://www.behance.net/rougeux
LinkedIn: http://www.linkedin.com/in/nicholasrougeux

Website: http://www.c82.net

[Davide Cervone]

Glad you got it to work.  I'd like to see the final result, when you get it all put together (if that can be arranged).

Davide

[Nicholas Rougeux]

I'll be happy to post it here when it's complete. It'll be a while until I can get the full project together. Just getting started and making sure what I want to do is possible.

-----
Let's connect
Twitter: http://www.twitter.com/rougeux
Behance: http://www.behance.net/rougeux
LinkedIn: http://www.linkedin.com/in/nicholasrougeux

Website: http://www.c82.net

[Davide Cervone]

OK, good luck with it!