SVG VScode

Dans le chapitre précédent, nous avons présenté les concepts de base et des exemples de SVG. Dans ce chapitre, nous allons présenter l'éditeur de code SVG -- VScode.

VSCode (nom complet : Visual Studio Code) est un éditeur de code source gratuit développé par Microsoft et multiplateforme. L'environnement de développement VSCode est très simple et facile à utiliser.

Installer VS Code

L'installation de VSCode est également simple. Ouvrez le site officielhttps://code.visualstudio.com/, téléchargez le paquet logiciel et installez-le étape par étape. Pendant l'installation, faites attention aux paramètres du chemin d'installation. Les variables d'environnement sont ajoutées automatiquement au système par défaut. Cochez toutes les options suivantes :

Pour un tutoriel complet d'installation de VSCode, consultez :https://www.example.com/vscode/vscode-tutorial.html

Créer un fichier de code SVG

Ouvrez VScode, puis cliquez sur New File :

Saisissez svg dans la zone de recherche, créez le fichiertest.svg:

Entrez le code :

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

Enregistrez le code du fichier test.svg.

Installer l'extension SVG

Cliquez sur l'icône des extensions, recherchez le mot-clésvg, et installez l'extension :

Après l'installation, faites un clic droit sur le fichier svg, et sélectionnez"Preview SVG"：

dans la liste pour prévisualiser l'effet :