SVG in Equations

One of the nicest features of using MathML and SVG is that the resulting equations and figures are “resolution-independent.” They rescale, along with the text, when the user employs the “text zoom” feature of their browser.

It’s also often desirable to embed SVG in itex equations. Itex provides an svg environment, which allows you to do this conveniently:

    <svg xmlns=""
       width="48" height="32">

The \includegraphics command is optional. It provides an alternate presentation of the graphic (in a file called myfig.pdf or myfig.png) for use in the LaTeX-export version of the page. (A subtlety: TeX uses 72 ppi, whereas most modern browsers use 96 ppi. So multiply the width of the SVG graphic by 0.75 to get the proper width of the TeX version.)

For software to extract the figures from the wiki source, and batch-convert them to PDF, see this blog post.


Instiki 0.19 has an integrated SVG editor, based on SVG-Edit. When editing a new or existing page:

  1. Click on a point in the text box, and the click on the Create SVG graphic button. Up pops the WYSIWYG SVG editor.
  2. When you choose Save Image from the main menu, the SVG figure you created is inserted into the text, at the point where you placed the mouse curser in step 1.

Alternatively, selecting an existing SVG graphic (everthing from <svg>...</svg>). and clicking on the Edit Existing SVG Graphic allows you to edit an exiting SVG graphic. Again, when you choose Save Image, the modified graphic is saved back to the Instiki Edit Window.

You can embed mathematics in your SVG graphic, using the itex tool. Click on the itex button to create a <foreignObject> element, containing an equation. Then click on Edit itex button to edit the equation.

For large graphics, it’s probably better to put them on an Instiki page of their own, and then [[!include ...]] the page.


Because of this bug, MathJax can’t render nested <math> elements. So, while you can combine the two techniques discussed on this page (embed an SVG figure in an equation, using \begin{svg}...\end{svg}, and embed snippets of Math in the SVG figure, using the itex tool), the resulting MathML-in-SVG-in-MathML won’t render in MathJax. It will, however, render fine in Firefox.