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

For every available option and its type, see the TexConfiguration API reference.

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: {
                // ...
            },
        },
    }
})