$ show midudev/better-svg
Better SVG is a VS Code extension that provides live SVG preview, inline SVG detection, and SVGO optimization. It supports a wide range of frameworks (React, Vue, Svelte, Astro, Blade, etc.) by converting JSX/TSX and framework-specific syntax to standard SVG before optimization and back. The extension includes a webview panel with zoom, pan, color picker, and dark background toggle, as well as gutter icons and hover previews for inline SVGs in code. The core logic is well-abstracted into pure modules (svgTransform, svgPreview, svgoPlugins) that are testable and potentially reusable outside the extension. The codebase is actively maintained, has comprehensive tests, and demonstrates high craftsmanship in handling edge cases like template literal interpolations, Blade directives, and multiline closing tags.
The LLM identified 3 files worth highlighting for reuse:
Converts between JSX SVG and standard SVG, handling camelCase/kebab-case attributes, expression values, spread attributes, template literal interpolations, Blade directives, and style block masking. This module is self-contained (no VS Code imports) and could be extracted as a standalone library for framework-agnostic SVG transformation.
Collects SVG preview candidates from document text, resolves <use> references to <symbol> definitions, and generates base64 data URIs for rendering. It handles multiline tags, string literals, and template literals. This module is pure logic and reusable for any tool that needs to extract and preview inline SVGs from source code.
Builds the SVGO plugin list based on user configuration, with special handling for class removal (inlines shared class styles before stripping classes to preserve visual fidelity). This module is small, testable, and demonstrates a clean pattern for configuring an optimization pipeline.