How to Export TikZ to PNG, SVG and PDF (Command Line and Online)

You drew something in TikZ and now need it as an image for a slide deck, a README or a website. The reliable path is: compile to a tightly cropped PDF first, then convert that PDF to whatever you need.

% libraries: arrows.meta, positioning
\begin{tikzpicture}[font=\sffamily\small, >={Stealth},
  f/.style={draw, rounded corners, fill=blue!8, minimum height=8mm, minimum width=2.1cm, align=center},
  o/.style={draw, rounded corners, fill=green!12, minimum height=7mm, minimum width=3cm}]
  \node[f] (tex) at (0,0) {figure.tex};
  \node[f] (pdf) at (4.6,0) {figure.pdf};
  \node[o] (png) at (9.6,1.3) {PNG};
  \node[o] (svg) at (9.6,0) {SVG};
  \node[o] (inc) at (9.6,-1.3) {PDF in a document};
  \draw[->] (tex) -- node[above] {pdflatex} (pdf);
  \draw[->] (pdf.east) -- ++(0.6,0) |- node[above, pos=0.78] {pdftocairo} (png.west);
  \draw[->] (pdf.east) -- node[above, pos=0.55] {dvisvgm} (svg.west);
  \draw[->] (pdf.east) -- ++(0.6,0) |- node[above, pos=0.78] {\textbackslash includegraphics} (inc.west);
\end{tikzpicture}

Step 1: wrap the figure in standalone#

\documentclass[tikz,border=4pt]{standalone}
\begin{document}
\begin{tikzpicture}
  \draw[thick, ->] (0,0) -- (3,0) node[right] {$x$};
  \draw[thick, ->] (0,0) -- (0,2) node[above] {$y$};
\end{tikzpicture}
\end{document}

That compiles to this, cropped to the drawing plus a 4pt border, with no white page to trim:

\begin{tikzpicture}
  \draw[thick, ->] (0,0) -- (3,0) node[right] {$x$};
  \draw[thick, ->] (0,0) -- (0,2) node[above] {$y$};
\end{tikzpicture}

Step 2: compile to PDF#

pdflatex figure.tex

This gives figure.pdf, a vector file you can already use in LaTeX documents with \includegraphics.

PNG#

pdftocairo (part of Poppler) is quick and anti-aliases well:

pdftocairo -png -r 300 -singlefile figure.pdf figure

-r 300 is 300 dpi; raise it for sharper slides. -singlefile avoids the -1 suffix on the output name. ImageMagick also works (magick -density 300 figure.pdf figure.png) but may need Ghostscript and a permissive policy file.

Resolution matters mostly for thin lines, which is why a plot that looks fine on screen can look weak on a projector:

\begin{tikzpicture}[x=1.4cm, y=0.5cm]
  \draw[line width=0.1pt] (0,-2) -- (4,-2) node[right, font=\footnotesize] {0.1 pt: hairline, can vanish when scaled down};
  \draw[line width=0.4pt] (0,-4) -- (4,-4) node[right, font=\footnotesize] {0.4 pt (TikZ default)};
  \draw[line width=1pt]   (0,-6) -- (4,-6) node[right, font=\footnotesize] {1 pt: safe for slides};
\end{tikzpicture}

SVG#

pdftocairo -svg figure.pdf figure.svg

or, with the TeX Live tool:

dvisvgm --pdf figure.pdf

dvisvgm produces compact SVG and converts fonts to paths by default, which is handy if the viewer lacks your fonts.

Transparent background#

PDFs have no background, so PNGs from pdftocairo are transparent by default. If you see white, it came from the viewer, not the file.

Common problems#

• Text looks too small or large in the image. Change the document font size in the class options (\documentclass[tikz,border=4pt,12pt]{standalone}), not the PNG resolution.
• Cut-off labels. Increase border= or give wide nodes a text width.
• Missing library errors. Add the \usetikzlibrary{...} line your figure needs to the preamble.

If you would rather not run a TeX toolchain at all, TikZpen, a free browser editor I built, exports TikZ, SVG and PNG. New to TikZ itself? Start with drawing shapes, arrows and curved paths.