From LaTeX to Crisp SVG: A Browser-Local Equation Export Workflow

curgin — Tue, 22 Sep 2026 08:17:51 +0000

Mathematical notation travels through more places than a LaTeX runtime. A formula may start in a research note, then move to a slide deck, a GitHub README, an LMS upload, or a CMS that treats raw LaTeX as ordinary text. In those contexts, exporting a stable image is often the practical boundary between a readable equation and a broken one.

This article walks through a browser-local workflow for converting a MathJax-compatible equation into an image that can be reused in documentation and product work. The example tool is LaTeX to Image, but the format and review decisions apply to any equation-export workflow.

Why image exports still matter

Raw LaTeX is excellent source material: it is compact, reviewable, and easy to keep beside code. The trouble begins when the target does not include a TeX renderer. A README viewer may render inline math differently from a course platform; a slide program may not render it at all.

An exported image makes the output deterministic for a specific destination. It also creates a useful separation of concerns:

Keep LaTeX as the editable source of truth.
Render the source with a MathJax-compatible renderer.
Export the version that fits the destination.
Store the source next to the asset so future edits do not start from a screenshot.

That separation is especially helpful when a formula appears in design handoff files, release notes, or support content maintained by people who do not have a local TeX environment.

1. Start with a portable equation

Use a small, self-contained expression first. For example, the Gaussian integral:

\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}

When an equation fails to render, check structural issues before changing tools: unclosed braces, a mismatched begin/end environment, and commands outside the renderer's supported package set are common causes. A browser equation renderer is not the same thing as a full TeX compiler, so a document containing TikZ, arbitrary packages, or PDF-specific workflows needs a different pipeline.

2. Choose the export format deliberately

The best format is determined by the consumer, not by the equation.

Destination	Recommended format	Reason
README, documentation site, or web UI	SVG	It stays sharp when the surrounding layout scales.
Slides, chat, or a learning platform	PNG	It is widely accepted and can preserve transparency.
A system that flattens uploads	JPG or JPEG	It is a straightforward raster fallback when transparency is not needed.

A good workflow is to keep an SVG master for durable documentation and generate a PNG only when a target cannot accept vector output. That avoids trying to recover clean edges from a raster image later.

3. Treat appearance as part of the interface

An equation is not just content; its background, scale, and color affect whether it fits the page around it. Before exporting, review three settings:

Background. Use transparent output for a formula that needs to sit on slides, a dark documentation theme, or a colored design canvas. Use a solid background when the destination will not preserve alpha.
Scale. Render large enough for the target's display size. Scaling a small PNG upward is where thin strokes become soft.
Formula color. Match the contrast of the final surface instead of assuming black text will work everywhere.

LaTeX to Image exposes these controls in the browser and supports PNG, SVG, JPG, and JPEG export. Its public documentation also states that rendering happens locally after MathJax loads, rather than uploading the equation for conversion. That is useful when the expression is part of an unreleased document or an internal technical note.

4. Keep the source with the exported file

A durable handoff contains more than the image. Save the original LaTeX in the same pull request, note, or content repository. If the renderer offers copy actions, keep both the source and any SVG markup with the asset.

For a Markdown workflow, the practical pattern is simple:

Keep the formula source in a nearby Markdown file or code comment.
Export an SVG for web documentation, or a PNG for systems without vector support.
Name the asset for its subject rather than its dimensions, for example gaussian-integral.svg.
Re-render from the source whenever the formula or visual style changes.

The important part is that the image remains a build artifact, not the only editable version of the math.

A quick export checklist

Before committing an equation image, verify the following:

The expression renders without errors.
The selected format matches the target platform.
Transparent output is used only where the destination supports it.
The scale is crisp at the final display size.
The original LaTeX is stored next to the exported asset.
The image has useful alt text when published on the web.

Try the workflow

If you need a lightweight browser tool for this step, LaTeX to Image lets you paste a MathJax-compatible expression, adjust its presentation, and download or copy PNG, SVG, JPG, or JPEG output. It can also copy the image, SVG markup, LaTeX source, or a reusable URL with the selected settings.

The value is not in replacing a full TeX build. It is in making the last mile predictable: a clean equation image for the places where raw LaTeX is not available.

DEV Community: curgin