2.4 Figures ‣ 2 Usage and examples for the template ‣ BookML at the University of Edinburgh

2.4.1 Raster images

Figure 2.1 is a PNG image included with \includegraphics. The \img macro is set in preamble/SoM.tex, which you can change there if your graphics folder has a different name.

Use the command \alttext{alternative text} in a figure environment to provide informative alternative text for all your images — this is an important accessibility feature. Here is useful advice on writing good alternative text.

To avoid images being inverted in night mode in HTML, add \bmlPlusClass{bml_no_invert} after the \includegraphics command. There should be no linebreaks or spaces between. This can also be used for tikz images.

A greyscale photo of 10 silver coins scattered on a dark grey background. — Figure 2.1: A PNG image included with \includegraphics.

2.4.2 Vector images and diagrams

tikz images

Figure 2.2 is a tikz diagram included with \input.

Diagram of a section of flexible string of length $dx$. Tension is symbolised with a vector T pointing outwards from each end of the string section, at angles theta(x) and theta(x + dx) respectively from the horizontal axis. — Figure 2.2: Small string element under tension.

2.4.3 xy diagrams

Figure LABEL:fig:xy shows an example of a diagram, reproduced from the BookML documentation.

Figure 2.3: An example of a xymatrix.

pgfplots

PGF plots are also supported, as shown in Figure 2.4.

A plot of sqrt(x+3) between -3 and 3. — Figure 2.4: Plot created using the pgfplots package.

SVG

Unlike LaTeX HTML can render SVG images directly. If you have SVG images or diagrams as source files, this will produce a clearer image in the HTML version (for example, TikZ images are rendered as SVG). This can be done by using \iflatexml to include the SVG image in the HTML version, and the PDF image in the PDF version. This is done below. More information on how this works can be seen in Section 2.2.