sSVG VS Code Extension

Compile .ssvg files to .svg automatically in VS Code using the @ssvg/core library.

Features

• Automatic Compilation: Watch .ssvg files and compile them to .svg on save.
• Manual Compilation: Compile individual files or entire workspace on demand.
• Error Diagnostics: View compilation errors directly in VS Code.
• Configurable Settings: Customize behavior with various options.

in HTML Files

If you use the sSVG web component in your HTML files, this extension will help you by automatically process <ssvg-element> tags inside HTML files. Self-closing tags inside these elements are converted to open/close pairs on save (configurable).

Installation

Install from the official VS Code Marketplace.

Usage

Automatic Watching

By default, watching is disabled. Use the "sSVG: Toggle Watch" command or click the status bar item (bottom right) to enable automatic watching of .ssvg and .html files. When enabled:

• Any changes to .ssvg files will compile them to .svg files in the same directory.
• Any changes to .html files will scan for <ssvg-element> tags and convert self-closing tags (e.g. <var ... />) inside them to open/close pairs (e.g. <var ...></var>). The HTML file is updated in-place.
• You can disable HTML processing via the ssvg.compileSsvgElementsInHtml setting.

Commands

Access commands via Command Palette (Ctrl+Shift+P) or right-click menu:

• sSVG: Toggle Watch - Enable/disable automatic watching for .ssvg and .html files.
• sSVG: Compile Workspace - Compile all .ssvg files and process all .html files in the workspace (if enabled).
• sSVG: Compile Current File - Compile the currently open .ssvg file, or process the current .html file (if enabled).

Output

Compilation output and errors appear in the "sSVG" output channel (View > Output > sSVG).

Diagnostics

Compilation errors are shown as diagnostics in the editor, with details in the Problems panel.

Settings

Configure the extension in Settings > Extensions > sSVG:

• Ignore Underscore Files (ssvg.ignoreUnderscoreFiles): Ignore files starting with _ (default: true).
• Watch on Startup (ssvg.watchOnStartup): Start watching automatically (default: false).
• Pretty Decimals (ssvg.prettyDecimals): Number of decimals for numeric attributes. Set to null or "off" to disable rounding (default: 4).
• Compile sSVG Elements in HTML (ssvg.compileSsvgElementsInHtml): If true (default), the extension will process <ssvg-element> tags inside HTML files and convert self-closing tags to open/close pairs. If set to false, HTML files will be ignored and only .ssvg files will be compiled.

Requirements

• VS Code 1.85+
• Node.js (for development only)

For More Information

For details on sSVG syntax and usage, visit the sSVG homepage.