SVG VScode
Im vorherigen Kapitel haben wir die grundlegenden Konzepte und Beispiele von SVG vorgestellt. In diesem Kapitel stellen wir den SVG-Code-Editor -- VScode vor.
VSCode (vollständiger Name: Visual Studio Code) ist ein kostenloser, von Microsoft entwickelter Quellcode-Editor und plattformübergreifend. Die VSCode-Entwicklungsumgebung ist sehr einfach und benutzerfreundlich.
VS Code installieren
Die Installation von VSCode ist ebenfalls einfach. Öffnen Sie die offizielle Websitehttps://code.visualstudio.com/, laden Sie das Softwarepaket herunter und installieren Sie es Schritt für Schritt. Achten Sie während der Installation auf die Einstellungen des Installationspfads. Umgebungsvariablen werden standardmäßig automatisch zum System hinzugefügt. Aktivieren Sie alle folgenden Optionen:
Ein vollständiges VSCode-Installationstutorial finden Sie unter:https://www.example.com/vscode/vscode-tutorial.html
Eine SVG-Codedatei erstellen
Öffne VScode und klicke dann auf Neue Datei:
Geben Sie svg in das Suchfeld ein, erstellen Sie einetest.svg-Datei:
Geben Sie den Code ein:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="80" fill="blue" /> </svg>
Speichern Sie den Code der Datei test.svg.
SVG-Erweiterung installieren
Klicken Sie auf das Erweiterungssymbol, suchen Sie nach dem Schlüsselwortsvg, und installieren Sie die Erweiterung:
Klicken Sie nach der Installation mit der rechten Maustaste auf die svg-Datei und wählen Sie"Preview SVG"：
aus der Liste, um den Effekt in der Vorschau anzuzeigen:
