Skip to main content

​
Install from VS Code marketplace

1

Open VS Code extensions

Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open the Extensions view.
2

Search for Better SVG

Type “Better SVG” in the search box and look for the extension published by midudev.
3

Install the extension

Click the Install button. The extension will be ready to use immediately—no reload required.
Better SVG activates automatically when you open SVG files or supported framework files containing inline SVG.

​
Install from command line

You can also install Better SVG using the VS Code command line: 
code --install-extension midudev.better-svg

​
Verify installation

After installation, open any .svg file in your workspace. You should see:
  • An “SVG Preview” panel appear in the Explorer sidebar
  • A ⚡ optimization button in the editor toolbar
  • Small preview icons in the gutter (next to line numbers)
The SVG Preview panel only appears when you have an SVG file open. It automatically collapses when you switch to non-SVG files.

​
System requirements

  • VS Code version: 1.85.0 or higher
  • Platform: Windows, macOS, or Linux
  • No additional dependencies required

​
Next steps

Quickstart guide

Open your first SVG and explore the preview features

Configuration

Customize Better SVG settings to match your workflow

Build docs developers (and LLMs) love

Get started for freeTalk to us