如何将自定义SVG形状添加到使用MathJax生成的方程式中？

Question

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 they provide and make it work for any given equation.

Any help would be greatly appreciated.

Answer 1

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>
  <mglyph 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" extension from the third-party extension library. This defines an \\img macro that makes loading the image a bit easier:

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

I think you should be able to do what you want using one of those. (This is my response to the cross-post on the MathJax User's Forum )