tex2svg
tex2svg is a Node.JS library for compiling the (La)Tex code blocks to SVGs.
Features
- Generates truly responsive SVGs, which automatically scale and align respecting both the font size and the baseline.
- Can generate both, inline SVGs and SVGs being loaded with
img
tag. - Supports
math
andtikz
environments by default and is easily extendable. - Combines all the required blocks into one TeX file, therefore makes minimum
exec
calls. - Optimizes the resulting SVG with SVGO.
Installation
npm i tex2svg
latex
and dvisvgm
executables should be available in the PATH
. LaTeX preview
package should be installed (in most cases, it's installed by default).
Usage
The library provides three slightly different compilers one can choose from
; // The basic compilerconst basicCompiler = tmpdir: "/tmp" // the dir for temporary files precision: 2 // the integer from 1 to 6, defines the number of digits after the comma inline: true // generate inline SVG code minifyids: false // minify IDs, use carefully when having several inline SVGs on one page prefixids: false // prefix function for IDs preamble: // additional preamble, e.g. "\usepackage{cmbright}" dvisvgm: "dvisvgm" // dvisvgm command, e.g. "dvisvgm --optimize=remove-clippath --exact-bbox"; // The compiler which writes the resulting SVG in files.// Will read from file instead of recompiling if the file already exists.// Therefore it's useful for incremental builds.const fileCompiler = outdir // the dir for SVG files, tmpdir by default name // function returning the target file name, md5sum of the code by default; // Same as previous one, but returns <img> tags instead of SVG code.// Useful when inline SVG inside HTML is unwantedconst imgTagCompiler = imgtag // function returning the img tag, the minimal implementation by default;
Each compiler has a compile
method, which receives the array of block
s.
One can easily create the block
manually, but the library provides two useful helpers for that
; // math for using as inline elementconst inlineMath = ;// math for using as block elementconst displaystyleMath = ;// tikz with basic macros onlyconst basicTikz = ;// tikz with arrows libraryconst extraLibraryTikz = ;// custom blockconst simpleTextBlock = code: "\\LaTeX" depth: true // the block with depth can be vertically aligned; compiler; // returns Promise with the array of strings
Examples
Check generated example pages with inline and external SVGs.