https://github.com/cssho/vscode-svgviewer

SVG Viewer for Visual Studio Code
https://github.com/cssho/vscode-svgviewer

svg svg-viewer vscode vscode-extension

Last synced: 28 days ago
JSON representation

SVG Viewer for Visual Studio Code

• Host: GitHub
• URL: https://github.com/cssho/vscode-svgviewer
• Owner: cssho
• License: mit
• Archived: true
• Created: 2016-02-28T03:48:19.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2019-10-22T18:59:26.000Z (over 5 years ago)
• Last Synced: 2024-11-06T13:00:47.477Z (6 months ago)
• Topics: svg, svg-viewer, vscode, vscode-extension
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer
• Size: 535 KB
• Stars: 67
• Watchers: 8
• Forks: 20
• Open Issues: 22
• Metadata Files:
  • Readme: README-ja.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vscode-svgviewer

SVG Viewer for Visual Studio Code

[Visual Studio Marketplace](https://marketplace.visualstudio.com/items/cssho.vscode-svgviewer)

[![](https://vsmarketplacebadge.apphb.com/version/cssho.vscode-svgviewer.svg)](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer)

[![](https://vsmarketplacebadge.apphb.com/installs/cssho.vscode-svgviewer.svg)](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer)

[![](https://vsmarketplacebadge.apphb.com/rating/cssho.vscode-svgviewer.svg)](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer)

## Easy way to preview

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

![palette](img/from_context.gif)

## Usage 

0. コマンドパレットを表示し、入力欄に`ext install SVG Viewer`と入力

0. Enterを押下し、VSCodeを再起動

0. SVGファイルを開く

0. コマンドパレットかショートカットから処理を選択

![palette](img/palette.png)

### 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](img/preview.png)

### Options

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

```javascript

{

    // 透明グリッドを表示

    "svgviewer.transparencygrid": true,

    // プレビューを自動的に開く

    "svgviewer.enableautopreview": true,

    // プレビューの開き方を指定 (vscode.ViewColumn)

    "svgviewer.previewcolumn": "Beside",

    // 透過色

    "svgviewer.transparencycolor": "#2BD163"

    // プレビューウィンドウにズームイン・アウトボタンを表示

    "svgviewer.showzoominout": true

}

```