The PreTeXt source below describes a simple TikZ picture, nd is followed by the picture itself. The rectangle is 8 centimeters wide. The Guide is produced as a
PDF with 10 point text and a text width of
\(6.5\) inches. (This is too wide for comfortable reading, and contrary to our recommendations. See
Best Practiceย 30.6.1.) Normally, a choice of 10 point text would result in a width of
\(340\) point, or about
\(4.7\) inches.
So we compute the fraction of the available width required, as a percentage:
\begin{equation*}
\frac{8\text{ cm}}{6.5\text{ in}} =
\frac{8\text{ cm}\left(\frac{1\text{ in}}{2.54\text{ cm}}\right)}{6.5\text{ in}} =
0.4846 = 48.46\%
\end{equation*}
and we use that as the width of the image.
<image xml:id="scaling-tikz" width="48.46%">
<latex-image>
\begin{tikzpicture}
% 1 cm is default unit of length
% a rectangle: 8 cm wide, 6 cm tall
\draw[draw=black, thick] (4,2) rectangle (-4,-2);
\node at (-2, 1) {Foo};
\node at ( 2, 1) {Bar};
\node at (-2, -1) {Baz};
\node at ( 2, -1) {Qux};
\end{tikzpicture}
</latex-image>
</image>
Some characters for comparison: Fooย ย Barย ย Bazย ย Qux
In the
PDF version, the text matches between the image and the surrounding text almost identically. We could slide the image right and left by adjusting the margins (the default is to be centered). But if we want the image bigger and smaller, we need to adjust the TikZ code and recompute the
@width
attribute.
Now for
HTML we need to produce an
SVG version that is a close match. The
HTML version is a close match for
LaTeX built with a computed text width (for any font size). We do not want to change the percentage of the width devoted to the TikZ picture, and we do not want to change the TikZ code itself. If we had not chosen a different text width (the
\(6.5\) inches, versus a computed
\(340\) point), then we could generate the
SVG by supplying the same publication file, so as to use the same font size. However, our text width is 38% larger in the
LaTeX version,
\begin{equation*}
\frac{6.5\text{ in}}{340\text{ pt}} =
\frac{6.5\text{ in}\left(\frac{72.27\text{ pt}}{1\text{ in}}\right)}{340\text{ pt}} = 1.3816
\end{equation*}
The font size needs to increase by a similar percentage,
\begin{equation*}
10\text{ pt}\times 1.3816 = 13.816\text{ pt}\approx 14\text{ pt}
\end{equation*}
So we generate the
SVG image with a
different publication file, giving a font size of 14 point. The
HTML font in the text may be very different from the
LaTeX font used in the TikZ picture, but their
sizes are nearly identical. Note that our use of
LaTeX only supports 8 different font sizes, so it was fortuitous in this example that the 38% increase was so close to the supported 14 point font size. Note also, that since we used a different text width for the
PDF, the resulting 40% increase in the font size for the
SVG could play havoc with text that has been placed carefully not to overlap other components of the picture.