SVG Viewer for Visual Studio Code Visual Studio Marketplace
Viewing an SVG file from explorer context menu.
- Press Ctrl+P and type
ext install SVG Viewer
with a trailing space. - Press Enter and restart VSCode.
- Open a SVG File.
- Choose process from
Command Palette
orShortcut
.
Display SVG on an Editor
Holding ctrl/cmd and using mouse wheel(up/down)
Convert from SVG to PNG
Convert from SVG to PNG with explicitly size
Convert from SVG to data URI scheme and copy to the clipboard
Display and Convert Thanks @kexi
The following Visual Studio Code setting is available for the SVG Viewer. This can be set in User Settings
or Workspace Settings
.
{
// Show Transparency Grid
"svgviewer.transparencygrid": true,
// Open or not open the preview screen automatically
"svgviewer.enableautopreview": true,
// How to open the screen (vscode.ViewColumn)
"svgviewer.previewcolumn": "Beside",
// Color setting for transparency
"svgviewer.transparencycolor": "#2BD163",
// Show zoom in/out button in preview windows
"svgviewer.showzoominout": true
}