Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Svg PreviewNew to Visual Studio Code? Get it now.
Svg Preview

Svg Preview

Simon Siefke

|
1,267,216 installs
| (25) | Free
Preview for Svg files
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

travis build Version Renovate enabled

Svg Preview for VSCode

demo

Features

  • Live editing of svg files and svg's inside files
  • Panning and zooming of the preview (up to 32767%)

Commands

Command Keybinding
Svg Preview: Open Preview to the Side ctrl+alt+p
Svg Preview: Reload Preview none

Settings

Property Description Default
svgPreview.autoOpen Automatically open the preview when a svg file is opened false
svgPreview.scaleToFit Whether or not the svg should be scaled to fit the viewport or keep its original size true
svgPreview.style Custom style for the preview {}

How to use the svgPreview.style setting

You can change the background color:

demo of the svg preview with white background

{
  "svgPreview.style": {
    "html": {
      "background": "white"
    }
  }
}

Or you can make a checkerboard background:

demo of the svg preview with a checkerboard pattern background

{
  "svgPreview.style": {
    "html": {
      "background-position": "0 0, 13px 13px",
      "background-size": "26px 26px",
      "background-image": "linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414), linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414)"
    }
  }
}
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft