vscode-svgviewer

February 28, 2019 · View on GitHub

SVG Viewer for Visual Studio Code Visual Studio Marketplace

Easy way to preview

EXPLORERのコンテキストメニューからSVGをプレビューする palette

Usage

コマンドパレットを表示し、入力欄にext install SVG Viewerと入力
Enterを押下し、VSCodeを再起動
SVGファイルを開く
コマンドパレットかショートカットから処理を選択

palette

View SVG - `Alt+Shift+S O`

SVGをエディタ上で表示

拡大/縮小

ctrl/cmdキーを押しながらマウスホイールを上下

Export PNG - `Alt+Shift+S E`

SVGをPNGに変換

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

サイズを明示的に指定して、SVGをPNGに変換

Copy data URI scheme - `Alt+Shift+S C`

SVGをdata URI schemeに変換し、クリップボードにコピー

View SVG and Export PNG by canvas - `Alt+Shift+S V`

表示と変換 Thanks @kexi

preview

Options

SVG Viewerでは以下のVisual Studio Codeの設定が可能です。User SettingsまたはWorkspace Settingsで設定できます。

{
    // 透明グリッドを表示
    "svgviewer.transparencygrid": true,

    // プレビューを自動的に開く
    "svgviewer.enableautopreview": true,

    // プレビューの開き方を指定 (vscode.ViewColumn)
    "svgviewer.previewcolumn": "Beside",

    // 透過色
    "svgviewer.transparencycolor": "#2BD163"

    // プレビューウィンドウにズームイン・アウトボタンを表示
    "svgviewer.showzoominout": true
}