Skip to content
/ TikZ → SVG

TikZ → SVG

Paste your TikZ code: it is compiled by a real LaTeX engine, right in your browser, and turned into an SVG image that stays crisp at any size, ready to paste into WordPress.

Examples:
Preamble (optional)

Your commands and TikZ libraries. Already loaded: tikz, amsmath, amssymb; pgfplots, tkz-tab and tikz-cd are added automatically when used, as are Otoolia's shortcuts (\R, \conj{A}, \proba…).

or Ctrl + Enter

Preview

The preview will appear here.

Fix a figure you already published

Paste the whole content of the “Custom HTML” block here (the TikZ code is kept as a comment at the start of the block):

Using the figure in WordPress

  • Paste the HTML block (recommended): add a “Custom HTML” block and paste the copied block. No image to upload, no plugin. The TikZ code is kept in the block as a comment, invisible to visitors: to fix a typo, paste the block back into “Fix a figure you already published”. You need an administrator account (WordPress strips SVG code pasted by other roles).
  • Upload the .svg file: WordPress refuses SVG by default; install the “Safe SVG” plugin, then insert the file with an “Image” block.

The figure adapts to the screen width, stays crisp at any zoom, and several figures can share a page. It also works on any website or in an HTML file.

Frequently asked questions

Is my code sent to a server?

No. The TeX engine (TikZJax, TeX compiled to WebAssembly) runs in your browser. It weighs about 7 MB, downloaded once on the first generation; your browser keeps it afterwards.

Which packages can I use?

TikZ and all its libraries (\usetikzlibrary{…} in the preamble), pgfplots, tkz-tab, tikz-cd, tikz-3dplot, amsmath, amssymb, array. Other packages are not available in the online engine: for those, compile on your computer (latex then dvisvgm --no-fonts).

Why is the SVG 40 to 80 KB?

The LaTeX fonts used by the figure are embedded in the file, so it displays identically everywhere without loading anything else. Once compressed by the web server, it is about half that size.

The figure does not compile: what now?

The tool points out the most common mistakes (unclosed braces or parentheses, missing semicolon, environment not closed). Custom commands must be defined in the preamble. To build a complex figure, Otoolia's LaTeX assistant generates trees, variation tables and plots without errors.

Engine: TikZJax (David Grice, after Jim Fowler), GPL-3.0 licence; tkz-tab package by Alain Matthes.

Example: publishing a graph on a maths blog

  1. Load the “Curve (pgfplots)” example, or paste your own code, for instance:
    \begin{tikzpicture}
    \begin{axis}[axis lines=middle, xmin=-3, xmax=3, ymin=-1, ymax=9]
    \addplot[blue, thick, domain=-3:3, samples=100] {x^2};
    \end{axis}
    \end{tikzpicture}
  2. Choose the size (× 1.3 to match formulas rendered by MathJax) and write a short description for screen readers (“parabola y = x²”).
  3. Generate (Ctrl + Enter), check the preview, then copy the HTML block and paste it into a WordPress “Custom HTML” block.

Why SVG rather than PNG?

If the figure won't generate

Good to know

Your code is not sent to any server: compilation happens in your browser, in WebAssembly. To build a figure without writing TikZ (probability tree, variation table, graph), start with the LaTeX assistant, then convert its code here.

Guide written and checked by Erwan Hautot · updated 30 October 2026.