I have a page which includes two SVG images that were generated by tikz and then converted to SVG online. Both of them render perfectly if they are the only images on the page. But when both of them are included, the second image does not render correctly at all. All the math in the image is wrong and includes weird symbols. Is there a fix for this?

I have pages with multiple Tikz-generated images. So I don’t know what your problem is. Perhaps if you porvided a link …

Please find here the link to the page. And the link to the two individual figures: fig1, fig2

Sorry. I guess I misunderstood what you are doing. Instiki allows the inclusion of Tikz source (either inline or via [!include ...]). But that’s not what you are doing.

You’ve created two SVG fragments by some means or other. It doesn’t matter whether you put them inline or via [!include...]. The source of your trouble is that #ids need to be unique on a page, and your two SVG fragments have duplicate #ids. Individually, they work fine; but put them on the same page and all hell breaks loose.

Fix your #ids and you’ll fix your display problems.

This again, has nothing to do with Instiki, its support for Tikz or for SVG. It’s basic X(HT)ML.

Just so we’re clear, Instiki takes care to uniquify the #ids of the SVG fragments generated from Tikz source. If you want to generate the SVG yourself, then that responsibility falls on you.

Ohh. That was a stupid miss on my part. I never thought to look at ids! I changed them and it all works fine now. Thanks a lot

Just a tip: you don’t really need to wrap your SVG in a MathML equation. If all you need is to center the figure,

+--{: style='margin: auto; text-align: center'}
<svg> ...</svg>
=--

will suffice (and won’t generate the superfluous MathML wrapper).

(Even better, edit the CSS tweaks for your Web, to add a .centered class:

.centered {margin: auto; text-align: center}

Then this could be abbreviated to

+--{.centered}
<svg> ...</svg>
=--

)