The easiest way to use the stylesheet is to simply process a MathML file and transform it into a SVG file.
Suppose that we have a MathML file, called test.xml
, containing the following MathML code :
Example 1.1. test.xml example: source code
<?xml version="1.0"?> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>x</mi> <mo>+</mo> <msqrt> <mn>245</mn> <mo>+</mo> <mi>y</mi> </msqrt> </mrow> </math>
We can simply transform this file into SVG using the Saxon 9 processor with the following command:
java -jar SAXON/saxon9.jar -s:test.xml -xsl:pMML2SVG/XSLT2/pmml2svg.xsl -o:test.svg
This command produces a file test.svg
containing the following code:
Example 1.2. test.xml example: SVG transformation source code
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns:pmml2svg="https://sourceforge.net/projects/pmml2svg/" xmlns="http://www.w3.org/2000/svg" version="1.1" width="280.0444px" height="73.03333333333333px" viewBox="0 0 280.0444 73.03333333333333"> <metadata> <pmml2svg:baseline-shift>20.299999999999997</pmml2svg:baseline-shift> </metadata> <g stroke="none" fill="#000000" text-rendering="optimizeLegibility" font-family="STIXGeneral,STIXSize1"> <g xmlns:doc="http://nwalsh.com/xsl/documentation/1.0" style="font-family: STIXGeneral,STIXSize1; fill: ; background-color: transparent; "> <g style="font-family: STIXGeneral,STIXSize1; fill: ; background-color: transparent; "> <text style="font-family: STIXGeneral, STIXSize1; font-style: italic; fill: black; background-color: transparent; " x="11.35" y="52.733333333333334" font-size="50">x</text> <text x="44.8111" y="52.733333333333334" font-size="50" style="font-family: STIXGeneral, STIXSize1; fill: black; background-color: transparent; ">+</text> <text style="font-family: STIXGeneral, STIXSize1; fill: black; background-color: transparent; " x="115.1722" y="52.733333333333334" font-size="50">245</text> <text x="201.2833" y="52.733333333333334" font-size="50" style="font-family: STIXGeneral, STIXSize1; fill: black; background-color: transparent; ">+</text> <text style="font-family: STIXGeneral, STIXSize1; font-style: italic; fill: black; background-color: transparent; " x="247.8444" y="52.733333333333334" font-size="50">y</text> <line x1="92.6722" y1="36.516666666666666" x2="97.1722" y2="25.91" fill="none" stroke="black" stroke-width="1"/> <line x1="97.1722" y1="25.91" x2="103.9222" y2="63.03333333333333" fill="none" stroke="black" stroke-width="2"/> <line x1="103.9222" y1="63.03333333333333" x2="115.1722" y2="10.000000000000002" fill="none" stroke="black" stroke-width="1"/> <line x1="115.1722" y1="10.000000000000002" x2="272.5444" y2="10.000000000000002" fill="none" stroke="black" stroke-width="1"/> </g> </g> </g> </svg>
This code renders like that:
The transformation result can be modified by tuning some parameters. The parameters that can be changed and their meanings are listed below.
Stylesheet parameters
svgMasterUnit
Defines the unit that will be used in the SVG (default is px
).
initSize
Defines the initial font size (default is 50).
minSize
Defines the minimal font size in the SVG rendering (default is 8). This parameter is used to render fraction, superscript, subscript, etc. which have to be smaller than the normal text.
fontName
Defines fonts that will be used to render the SVG file. To learn how to change default fonts, have a look at
the section called “Changing the Font”. By default, the value of this parameter is STIXGeneral,STIXSize1
. These fonts can
be downloaded from the Internet. The objective of the STIX project
is to provide a font that serves the scientific and engineering community.
For example, to change the initial size of the font, we can change the parameter initSize
by adding information in the
command line:
java -jar saxon9.jar -s:test.xml -xsl:pMML2SVG/XSLT2/pmml2svg.xsl -o:test.svg initSize=15
You will obtain the following equation:
pMML2SVG comes with an example script called
pmml2svg
. This script can be used for batch
conversion and validation of a set of files using a command such
as
./pmml2svg examples/*.xml
. You may want
to adapt it to your needs.
In the examples directory you will also find a script that can create an XHTML file containing both MathML
code
and SVG pictures. You can open this script using Firefox and compare Gecko MathML renderer with pMML2SVG. To use this script, simply go in
examples/
directory and execute
genhtml
. It will create the file examples.xhtml
containing
all the examples in MathML and in SVG.