README-ja.md

vscode-svgviewer

SVG Viewer for Visual Studio Code Visual Studio Marketplace

Easy way to preview

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

Usage

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

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

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
}