svg-language-server

LSP server for SVG: diagnostics, completions, hover, formatting, and references.

npm install -g svg-language-server                 # unscoped alias
npm install -g @svg-toolkit/svg-language-server    # canonical package
svg-language-server --version                      # `svg-ls` works too

@svg-toolkit/svg-language-server is the canonical package; unscoped svg-language-server is a thin alias that depends on it. Either install gives you the same bins. Or grab the whole toolkit at once with @kjanat/svg-toolkit.

The package resolves a prebuilt native binary for your platform via optionalDependencies — no postinstall step, no install-time network access.

On Linux, the binary is picked by the host's libc: musl hosts get the musl build, glibc hosts get the glibc build. npm, pnpm and yarn honour the libc field and install only the right one; bun and deno install both, so detection settles it at launch. Set SVG_LIBC=musl or SVG_LIBC=glibc to override if detection is ever wrong.

The server speaks LSP over stdio; point your editor's LSP client at the svg-language-server executable.

At runtime the server fetches fresh browser-compat data on startup by default (degrading cleanly to the baked catalog when offline). Set the svg.runtime_compat: false initialization option to keep sessions fully offline.

Editor setup, supported diagnostics, and configuration options: https://github.com/kjanat/svg#readme

Features

• Hover — element and attribute documentation with MDN links and baseline status
• Completions — context-aware suggestions for elements, attributes, and values
• Diagnostics — structural validation (invalid nesting, unknown elements, duplicate IDs, deprecated usage, missing local references)
• Colors — color swatches and conversions across hex, rgb(), hsl(), hwb(), lab()/lch(), oklab()/oklch(), and named colors, including var() and color-mix() resolution in embedded CSS
• Formatting — deterministic structural SVG formatting
• Definitions — jump to id, CSS class, and custom property definitions

Editor Setup

Zed

Add to your Zed SVG extension's extension.toml:

[language_servers.svg-language-server]
languages = ["SVG"]

Configuration

All settings go in the LSP initializationOptions, under an svg key:

{
	"svg": {
		"profile": "svg2draft", // spec snapshot to validate against
		"force_profile": false, // ignore the document's version attribute
		"edition": "svg11", // or { "series": "svg2", "editors_draft": true }
		"runtime_compat": true, // live MDN BCD + web-features refresh at startup
		"svgwg_drift_check": false // opt-in staleness probe against W3C/svgwg
	}
}

| Option | Type | Default | Effect | | ----------------------- | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | svg.profile | string | derived | Spec snapshot used for element/attribute validation and hover docs. Accepts snapshot ids and aliases (svg11, svg2, svg2draft, svg-native, ...). Without it, the document's version attribute decides, falling back to the SVG 2 editor's draft. | | svg.force_profile | bool | false | Apply svg.profile even when the document declares a conflicting version attribute. | | svg.edition | string or object | unset | Pin an exact spec edition. String form resolves aliases (svg11, svg2draft); object form is { "series": "svg10"\|"svg11"\|"svg2", "date": "YYYYMMDD" } or { "series": ..., "editors_draft": true }. Takes precedence over svg.profile. | | svg.runtime_compat | bool | true | Fetch fresh MDN browser-compat-data + web-features at startup and overlay them on the baked catalog. Set false for fully offline/private sessions (baked data is still used). | | svg.svgwg_drift_check | bool | false | Opt-in: probe api.w3.org/api.github.com once at startup and warn when the baked spec catalog has drifted from the live specs. |