I'm attempting to dynamically insert some svg into a prince document. The svg is generated using svgtex which extracts the MathJax svg rendering of a Tex expression using PhantomJS. If I simply insert an img tag with the appropriate src, I get the displayed svg; however, the scaling becomes a problem and it doesn't work correctly unless I set a specific width and height on the element. If however I copy the svg code from the generated file, and copy/paste it inline it works fine and the scale is perfect.

As a result, I'm attempting to load and insert the svg dynamically with javascript. Ajax looks to be unsupported, so I switched to injecting an iframe like so:

<iframe src="http://localhost/eqn?2^n" />

This all works fine, but what I need to do is be notified when the iframe loads so that I can extract the contents and insert it elsewhere in the document. I don't seem to be able to capture the load event for an iframe. Is that the case?

Any other ideas are welcome too.

Thanks!

After failing to successfully bind to an iframe's load event, I solved my MathJax problem another way based on suggestions from this thread: does-prince-xml-have-a-javascript-engine.

Basically involves using the two-step process of generating the DOM using PhantomJS and then running it through Prince. This has the added benefit of not having to modify the original document generation which works in most browsers including IE7 and IE8.

Something like this:

phantomjs mathjax.js http://localhost/pmj/index.html

And then:

prince output.html -o output.pdf

The trick was determining when the MathJax rendering was complete on the initial phantomjs call. This was done by setting a global variable using the MathJax.Hub.Queue.

1. index.html‎ 0.8 kB ‎
   example input
2. mathjax.js‎ 2.4 kB ‎
   phantomjs script

Perhaps we can fix the scaling with the external SVG image, if that would be more convenient than using JavaScript. Could you attach a small example document that demonstrates the problem?

Sure. Attached is an index.html file that includes both an img reference to eq-original.svg and the svg copied and embedded directly into the DOM. I've also attached the svg and the example output.

In Chrome, both versions look roughly the same. The interesting part to me is the difference in the PDF output of the img version versus the direct embedding of the svg. Direct embedding looks great; however, the img version is squished.

1. eq-original.svg‎ 10.6 kB ‎
   SVG equation
2. index.html‎ 11.1 kB ‎
   HTML input
3. index.pdf‎ 32.7 kB ‎
   Output

The SVG has width and height specified inside the style attribute. Moving these to separate attributes seems to fix the rendering in Prince:

<svg width="25.333ex" height="3.2222ex" ...

I'm not sure why, as it should be identical regardless of how the width is specified. We will investigate this further.