Svg Preview for VSCode

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:

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

Or you can make a checkerboard 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)"
    }
  }
}