better-svg

Extension to improve working with SVGs on Visual Studio Code

260

TypeScript

public

Better SVG

The ultimate Visual Studio Code extension for SVG development. Real-time preview, integrated SVGO optimization, and seamless framework support.

GitHub stars

✨ Interactive Preview Editor: Open any .svg file to get a powerful editor with a live preview side-by-side.
🖼️ Explorer Preview: A dedicated “SVG Preview” panel in the Explorer view that tracks your active SVG file automatically.
🎨 Smart Hover Preview: Hover over any SVG code in your source files to see an instant preview and optimization options.
📑 Gutter Icons: Small SVG icons appear next to the line numbers where SVGs are defined in your code.
🔍 Advanced Viewport Controls: Zoom with click/Alt+click, scroll with Alt, and drag to pan through your graphics.
🌓 Contextual Visualization: Toggle dark backgrounds and grid overlays to see how your SVGs look in different environments.
🌈 currentColor Control: Dynamically change the currentColor value to test your icons with different theme colors.

Better SVG isn’t just for .svg files. It understands SVG syntax inside a wide range of modern web frameworks:

The extension automatically detects SVG tags within these files, providing gutter icons, hover previews, and framework-aware optimization.

Integrated SVGO power allows you to shrink your SVGs without leaving the editor.

Toolbar Button: Use the ⚡ icon in the SVG editor title bar.
Context Menu: Right-click an SVG file in the Explorer and select Optimize SVG.
From Hover: Hover over an inline SVG in your code and click the ⚡ Optimize SVG action link.

When optimizing inline SVGs (like in React or Vue), Better SVG:

Preserves framework-specific attributes (e.g., v-if, on:click, className).
Handles JSX interpolation and spread operators ({...props}).
Maintains the coding style of the host file.

Customize your workflow through Settings → Extensions → Better SVG:

Setting	Type	Default	Description
`betterSvg.autoReveal`	`boolean`	`true`	Automatically reveal and expand the SVG Preview panel in Explorer when opening SVG files.
`betterSvg.autoCollapse`	`boolean`	`true`	Automatically collapse the SVG Preview panel when no SVG files are active.
`betterSvg.enableHover`	`boolean`	`true`	Enable the hover preview when mouse is over SVG code.
`betterSvg.showGutterPreview`	`boolean`	`true`	Show small preview icons next to line numbers in the gutter.
`betterSvg.defaultColor`	`string`	`"#ffffff"`	The hex color used to replace `currentColor` in previews.
`betterSvg.removeClasses`	`boolean`	`true`	Whether to remove `class` attributes when running the optimization.

Find me