Instiki
SVG

WYSIWYG Editing

The best format for including graphics in your Instiki pages is SVG. SVG rescales smoothly, when you rescale the text, with no degradation in the resolution. So SVG figures will look their best, whether viewed on a smartphone or zoomed on a 27" monitor.

Instiki 0.19 has an integrated WYSIWYG 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 SVG editor in a new window.
2. Create the figure, using the WYSIWYG tools.
3. Choose Document Properties from the main menu, to adjust the size of the canvas containing the figure.
4. 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 button 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.

Equations in SVG-Edit

You can embed mathematics in your SVG graphic, using SVG-Edit’s itex tool. Click on to create a <foreignObject> element, containing an equation. Then click on to edit the equation. The default size of the <foreignObject> element is 48×22 px. Resize it to fit the equation comfortably (everything outside this box will be cropped).

Including Figures

For large graphics, you might find it preferable to put them on an Instiki page of their own, and then [[!include ...]] the page.

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:

 $$
⋮
 \begin{svg}
    <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="48" height="32">
   ⋮
    </svg>
 \end{svg}\includegraphics[width=32px]{myfig}
⋮
 $$

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.

MathJax

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, Safari, and other browsers that support MathML natively.

Tikz

If you’re not interested in WYSIWYG figure-creation, and are willing to install some additional software, then Tikz is an alternative for creating figures which are automatically rendered to SVG for display in Instiki.