Transform your SVG workflow
Better SVG brings powerful visualization and optimization tools directly into VS Code. Preview your SVG files in real-time, optimize them with SVGO, and work seamlessly across modern web frameworks—all without leaving your editor.Interactive preview
Live SVG preview with zoom controls, color picker, and dark mode toggle
SVGO optimization
Reduce file size by up to 70% with integrated SVGO optimization
Framework support
Works with React, Vue, Svelte, Astro, and more—preserves JSX syntax
Smart hover preview
Instant SVG preview on hover with optimization options
Key features
Explorer preview panel
A dedicated “SVG Preview” panel in the Explorer view automatically tracks your active SVG file. Open any.svg file and see it come to life with interactive controls:
- Zoom controls: Click to zoom in, Alt+click to zoom out
- Pan and scroll: Alt+scroll or drag to navigate large graphics
- Background toggle: Switch between light, dark, and grid backgrounds
- currentColor control: Dynamically change
currentColorto test icons with different theme colors
Gutter icons
Small SVG preview icons appear next to line numbers wherever SVGs are defined in your code. Works in.svg files and inline SVG in React, Vue, Svelte, and Astro components.
Optimization built-in
Integrated SVGO power allows you to shrink your SVGs without leaving the editor:- Click the ⚡ icon in the editor toolbar
- Use the command palette to run “Optimize SVG”
- Hover over inline SVG and click the optimize action link
Multi-language support
Better SVG understands SVG syntax across modern web frameworks:- Static files:
.svg,.xml - React:
.jsx,.tsx - Vue:
.vue - Svelte:
.svelte - Astro:
.astro - Templates:
.liquid,.ejs,.erb,.php
Get started
Installation
Install from the VS Code marketplace in seconds
Quickstart
Open your first SVG and explore the preview panel