SVG VScode

In the previous chapter, we introduced the basic concepts and examples of SVG. In this chapter, we will introduce the SVG code editor -- VScode.

VSCode (full name: Visual Studio Code) is a free source code editor developed by Microsoft and is cross-platform. The VSCode development environment is very simple and easy to use.

Install VS Code

Installing VSCode is also simple. Open the official websitehttps://code.visualstudio.com/, download the software package, and install it step by step. During installation, pay attention to the installation path settings. Environment variables are automatically added to the system by default. Check all the following options:

For a complete VSCode installation tutorial, refer to:https://www.example.com/vscode/vscode-tutorial.html

Create an SVG code file

Open VScode, then click New File:

Enter svg in the search box, createtest.svgfile:

Enter the code:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

Save the test.svg file code.

Install SVG extension

Click the extensions icon, search for the keywordsvg, and install the extension:

After installation, right-click the svg file, and select"Preview SVG"：

from the list to preview the effect: