Skip to main content
Better SVG provides interactive controls for zooming, panning, and navigating your SVG previews. Learn how to use keyboard and mouse controls effectively.

​
Preview panel controls

​
Zoom controls

Control the zoom level of your SVG preview using these methods:
ActionControlBehavior
Zoom inClick on SVGIncreases zoom by 50% (up to 1000%)
Zoom outAlt + Click on SVGDecreases zoom by 20% (down to 10%)
Zoom in (scroll)Alt + Scroll upIncreases zoom by 10% increments
Zoom out (scroll)Alt + Scroll downDecreases zoom by 10% increments
Reset zoomClick center iconResets to 100% zoom and centers SVG
// From main.js:144-158
preview.addEventListener('click', (e) => {
  if(wasPanning) return;

  if (e.target === preview || e.target === svgWrapper || e.target.closest('svg')) {
    // Check both the stored state and the event's altKey
    if (isAltPressed || e.altKey) {
      // Zoom out
      scale = Math.max(0.1, scale - 0.2)
    } else {
      // Zoom in
      scale = Math.min(10, scale + 0.5)
    }
    updateTransform()
  }
})

​
Pan controls

When zoomed in beyond 100%, you can pan around the SVG:
ActionControlRequirement
PanClick + DragZoom must be > 100%
Stop panningRelease mouse-
// From main.js:170-180
preview.addEventListener('mousedown', (e) => {
  // Only start panning if clicking on the SVG with left button and not on color picker
  if (e.button === 0 && scale > 1 && !e.target.closest('.preview-header-controls')) {
    isPanning = true
    wasPanning = false
    panStartX = e.clientX - translateX
    panStartY = e.clientY - translateY
    preview.classList.add('grabbing')
    e.preventDefault()
  }
})
The cursor automatically changes to indicate the current mode:
  • Default: Zoom in cursor
  • Alt pressed: Zoom out cursor
  • Panning: Grabbing hand cursor

​
Toolbar controls

The preview panel includes these toolbar buttons:
IconFunctionDescription
Color swatchChange currentColorClick to open color picker
Moon/SunToggle backgroundSwitch between light and dark background
Center iconReset viewReset zoom to 100% and center SVG
Lightning boltOptimizeRun SVGO optimization on the file

​
Hover preview controls

When hovering over inline SVGs in your code:

​
Enable/disable hover preview

Control hover preview in your settings: 
{
  "betterSvg.enableHover": true // Show SVG preview on hover
}

​
Hover interaction

1

Trigger hover

Move your cursor over any <svg> element in a supported file.
2

View preview

A popup appears showing:
  • Visual preview of the SVG
  • File size in bytes or KB
  • Link to optimize the SVG
3

Optimize from hover

Click ”⚡ Optimizar SVG” to optimize that specific inline SVG.

​
Gutter preview

SVG icons appear in the editor gutter (next to line numbers) for inline SVGs:

​
Enable/disable gutter preview

{
  "betterSvg.showGutterPreview": true // Show SVG icons in gutter
}
The gutter preview:
  • Shows a small (16px) preview of each SVG
  • Appears at the start of each <svg> tag
  • Updates automatically as you edit
  • Respects your current VS Code theme (dark/light)
// From svgGutterPreview.ts:255-337
public updateDecorations (editor: vscode.TextEditor) {
  // Check if gutter preview is enabled in settings
  const config = vscode.workspace.getConfiguration('betterSvg')
  const showGutterPreview = config.get<boolean>('showGutterPreview', true)
  if (!showGutterPreview) {
    return
  }

  const text = editor.document.getText()
  const svgRegex = /<svg[\s\S]*?>[\s\S]*?<\/svg>/g
  const newDecorationTypes: vscode.TextEditorDecorationType[] = []

  let match
  while ((match = svgRegex.exec(text))) {
    const startPos = editor.document.positionAt(match.index)
    // Use a zero-length range at the start of the SVG to ensure only one gutter icon is shown
    const range = new vscode.Range(startPos, startPos)

    let svgContent = match[0]
    // ... convert JSX, add xmlns, handle currentColor ...
    
    const decorationType = vscode.window.createTextEditorDecorationType({
      gutterIconPath: vscode.Uri.parse(dataUri),
      gutterIconSize: 'contain'
    })

    editor.setDecorations(decorationType, [{ range }])
  }
}

​
Keyboard state tracking

Better SVG carefully tracks the Alt key state to provide smooth zoom control: 
// From main.js:207-226
// Track Alt key state
window.addEventListener('keydown', (e) => {
  if (e.key === 'Alt' || e.key === 'Option') {
    isAltPressed = true
    preview.classList.add('zoom-out-cursor')
  }
})

window.addEventListener('keyup', (e) => {
  if (e.key === 'Alt' || e.key === 'Option') {
    isAltPressed = false
    preview.classList.remove('zoom-out-cursor')
  }
})

// Reset Alt state when window loses focus
window.addEventListener('blur', () => {
  isAltPressed = false
  preview.classList.remove('zoom-out-cursor')
})
This ensures:
  • Cursor changes immediately when Alt is pressed
  • Alt state is cleared when the window loses focus
  • Works on both Windows/Linux (Alt) and macOS (Option)

​
Settings reference

All keyboard and control settings: 
{
  // Hover preview
  "betterSvg.enableHover": true,
  
  // Gutter preview
  "betterSvg.showGutterPreview": true,
  
  // Preview panel
  "betterSvg.autoReveal": true,
  "betterSvg.autoCollapse": true,
  
  // Color picker
  "betterSvg.defaultColor": "#ffffff"
}
See Configuration for more details on each setting.

Build docs developers (and LLMs) love

Get started for freeTalk to us