Skip to main content

​
Open an SVG file

1

Create or open an SVG file

Open any .svg file in your workspace. If you don’t have one, create a new file called icon.svg and paste this code:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg>
2

View the preview panel

The SVG Preview panel automatically appears in the Explorer sidebar when you open an SVG file. You’ll see your icon rendered in real-time.
If the panel doesn’t appear, check that betterSvg.autoReveal is enabled in your settings.
3

Explore preview controls

Try these interactive controls in the preview panel:
  • Click on the preview to zoom in
  • Alt+Click to zoom out
  • Alt+Scroll to pan through the graphic
  • Toggle background to see your SVG on light, dark, or grid backgrounds
  • Change currentColor using the color picker to test different theme colors

​
Optimize your SVG

Reduce file size with built-in SVGO optimization:
1

Click the optimization button

Look for the ⚡ icon in the editor toolbar (top-right corner) and click it.
2

Review the results

Better SVG shows you the optimization results:
SVG optimized. Reduced from 0.45 KB to 0.32 KB (28.89% saved)
The extension automatically:
  • Removes unnecessary attributes
  • Cleans up whitespace
  • Optimizes path data
  • Removes comments and doctype declarations
Optimization is non-destructive. You can always undo changes with Cmd+Z / Ctrl+Z.

​
Work with inline SVG

Better SVG works seamlessly with SVG code inside framework components:
1

Open a React component

Create or open a .tsx or .jsx file with inline SVG:
export function ClockIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="12" cy="12" r="10"/>
      <path d="M12 6v6l4 2"/>
    </svg>
  )
}
2

See gutter previews

Notice the small SVG icon that appears in the gutter (next to the line numbers) where the <svg> tag starts.
3

Hover for instant preview

Hover your mouse over the SVG code to see:
  • A larger preview of the rendered SVG
  • Current file size
  • A quick “Optimize SVG” action link
Click the optimize link to shrink the inline SVG while preserving JSX syntax like strokeWidth, className, and event handlers.
Better SVG preserves framework-specific attributes during optimization, including:
  • React: className, strokeWidth, onClick, spread operators {...props}
  • Vue: v-if, v-for, :class
  • Svelte: on:click, class:active

​
Configure settings

Customize Better SVG behavior in VS Code settings:
  1. Open Settings (Cmd+, / Ctrl+,)
  2. Search for “Better SVG”
  3. Adjust these common settings:
SettingDescriptionDefault
betterSvg.autoRevealAuto-show preview panel when opening SVG filestrue
betterSvg.enableHoverEnable hover preview for inline SVGtrue
betterSvg.showGutterPreviewShow icons in the guttertrue
betterSvg.defaultColorDefault color for currentColor#ffffff

​
You’re all set

You now know how to:
  • ✓ Preview SVG files with interactive controls
  • ✓ Optimize SVGs with one click
  • ✓ Work with inline SVG in React, Vue, and other frameworks
  • ✓ Customize Better SVG settings

Learn about optimization

Deep dive into SVGO optimization features

Framework support

See all supported languages and frameworks

Build docs developers (and LLMs) love

Get started for freeTalk to us