TeX

Have SvelTeX compile LaTeX inside your markup and import the result.

• LaTeX ecosystem: Sveltex uses your local LaTeX distribution to compile your documents, so any LaTeX package (e.g., TikZ) is at your disposal.

• Compilation: Sveltex natively supports pdfLaTeX, LuaLaTeX, and XeLaTeX, as well as LaTeXmk and custom compilation instructions.

• Embedded fonts: Each SVG file embeds all necessary font glyphs as WOFF2 data URIs by default, ensuring that the SVGs are fully self-contained (save for any potential CSS variables). This also works with custom fonts imported via e.g. fontspec.

• Optimization: The SVG code is optimized both by dvisvgm and SVGO, so the SVGs you ship are as small as possible.

• Caching: A simple but robust caching mechanism prevents unnecessary recompilations, speeding up build times and helping Vite's HMR remain performant.

• Adaptive theming: The generated SVGs will use currentColor by default. Also, CSS color variables work anywhere colors work in your LaTeX code (excl. gradients).

• Custom transformers: Inject custom transformers to pre- and post-process the in- and output of the TeX handler, respectively.

• Relevant error messages: SvelTeX extracts messages from the LaTeX log, categorizes them by severity, and prints each of them to the console with a direct link to the line in the Svelte source file at which the problematic LaTeX code is located.

Configuration

SvelTeX's pipeline for LaTeX is essentially split into three steps:

• Compilation: TeX → DVI/PDF/XDV, done by your chosen LaTeX engine.
• Conversion: DVI/PDF/XDV → SVG, done by dvisvgm or Poppler.
• Optimization: SVG → Svelte, done with the help of SVGO.

The configuration for SvelTeX's LaTeX functionality mirrors this divide. Hover on any of the properties below to see a tooltip with more information.

// sveltex.config.js
import { sveltex } from '@nvl/sveltex';

export default await sveltex({}, {
    tex: {
        caching: {
            cacheDirectory: 'node_modules/.cache/@nvl/sveltex',
            enabled: true,
        },
        compilation: {
            engine: 'pdflatex',
            intermediateFiletype: 'dvi',
            overrideCompilation: null,
            saferLua: false,
            shellEscape: false,
        },
        conversion: {
            converter: 'dvisvgm',
            dvisvgm: {
                console: {
                    verbosity: 0b0011,
                },
                customArgs: [],
                svg: {
                    bbox: [2, 'pt'],
                    bitmapFormat: 'png',
                    currentColor: '#000',
                    fontFormat: 'woff2',
                    relative: true,
                    // ...
                },
                processing: {
                    exactBbox: true,
                    // ...
                },
                svgTransformations: {
                    // ...
                },
            },
            outputDirectory: 'src/sveltex',
            overrideConversion: null,
            poppler: {
                // ...
            },
        },
        debug: {
            ignoreLogMessages: [
                // ...
            ],
            verbosity: {
                onFailure: 'box',
                onSuccess: 'box',
            },
        },
        optimization: {
            currentColor: '#000',
            overrideOptimization: null,
            svgo: {
                // ...
            },
        },
    }
})