Tikz to SVG in VS Code

Goal

View SVG graphics generated from TikZ code in VS Code.

Part I: generate SVG using LaTeX Workshop

From the IDE’s parameters tab, I found the tools and recipes parameters. I clicked my user settings settings.json twice: once through the tools, and once through the recipes. Each click generated an array of default recipes or tools. Each of the former is a sequence of the later, which represents a command. The official examples and placeholders are easy to follow. Here’s the two JSON objects that I added.

"latex-workshop.latex.recipes": [
    {
        "name": "SVG (latex ➞ dvisvgm)",
        "tools": [
            "latexmk_rconly",
            "dvisvgm"
        ]
    }
],
"latex-workshop.latex.tools": [
    {
        "name": "dvisvgm",
        "command": "dvisvgm",
        "args": [
            "--font-format=woff",
            "-b 10",
            "-d 2",
            "-R",
            "-o %DOC%.svg",
            "%DOC%"
        ],
        "env": {}
    }
],

• latexmk is a tool that automatically resolves the compilation dependencies and execute LaTeX and Bib(La)TeX the right number of times. With the -pdf option, it compiles to PDF instead of DVI.
• the “RC” in latexmk_rconly means “release candidate”. It’s different from “RC” in VIMRC/bashrc.
• the %DOC% placeholder means the source file’s full path without the extension name.

Part II: preview the SVG within VS Code

The default background color is grey. Imagine having a picture with black x and y-axes. Black objects with grey background don’t look nice.

Luckily, in the VS Code Marketplace page of this SVG preview plugin, I found my desired settings with a screenshot above.

{
  "svgPreview.style": {
    "html": {
      "background": "white"
    }
  }
}

I copied that and pasted it below the settings in the previous section in the same JSON file, and it worked as shown in the above screenshot.