README.md

Japanese Readme

vscode-svgviewer

SVG Viewer for Visual Studio Code Visual Studio Marketplace

Easy way to preview

Viewing an SVG file from explorer context menu.

Usage

0. Press Ctrl+P and type ext install SVG Viewer with a trailing space.
1. Press Enter and restart VSCode.
2. Open a SVG File.
3. Choose process from Command Palette or Shortcut.

View SVG - Alt+Shift+S O

Display SVG on an Editor

Zoom in/out

Holding ctrl/cmd and using mouse wheel(up/down)

Export PNG - Alt+Shift+S E

Convert from SVG to PNG

Export PNG with explicitly size - Alt+Shift+S X

Convert from SVG to PNG with explicitly size

Copy data URI scheme - Alt+Shift+S C

Convert from SVG to data URI scheme and copy to the clipboard

View SVG and export PNG by Canvas - Alt+Shift+S V

Display and Convert Thanks @kexi

Options

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
}