Instiki
SVG

SVG in Equations

One of the nicest features of using MathML and SVG is that the resulting equations and figures are “resolution-independent.” They rescale, along with the text, when the user employs the “text zoom” feature of their browser.

It’s also often desirable to embed SVG in itex equations. Itex provides an svg environment, which allows you to do this conveniently:

 $$
 ⋮
 \begin{svg}
    <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="3em" height="2em" viewBox="0 0 96 64">
    ⋮
    </svg>
 \end{svg}\includegraphics[width=3em]{myfig}
 ⋮
 $$

The \includegraphics command is optional. It provides an alternate presentation of the graphic (in a file called myfig.pdf) for use in the LaTeX-export version of the page.

Unfortunately, the resizing trick described below doesn’t work here. If you are only interested in targeting newer browsers, size the SVG in em, as above, and rescaling will work fine.

If you want to support older browsers, you’ll have to size the SVG in px (i.e, you would write width="48" height="32" in the above example). Unfortunately, they then won’t resize.

Resizable SVG Figures

Here’s how to create inline SVG figures which rescale in the fashion described above.

Newer browser allow you to set the size of the SVG figures in em:

 <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
   width="6em" height="12em" viewBox="0 0 96 192">
    ⋮
 </svg>

That’s it! The SVG figure will now rescale along with the text.

Older browsers (which do not support sizing of SVG figures in em) can still get the same effect, with a small hack. Surround the figure with a wrapper div, which can be sized in em.

<div style="float:right; width:6em; height:12em;">
  <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
    width="100%" height="100%" viewBox="0 0 96 192">
    ⋮
  </svg>
</div>

• The size of the figure is controlled by the width and height of the wrapper <div> (which must be specified in em).
• The width and height of the <svg> element are set to 100%.
• The coordinates in the SVG figure itself are relative to size of the viewBox. This should (usually) have the same aspect ratio as the wrapper <div>.
• If you have text in your SVG figure, then it is important that not only the aspect ratio, but the actual size of the viewBox, be the same as that of the wrapper <div> (where one takes 1em=16).

Try zooming the text on this page, to see what I’m talking about.