# Visual Studio CodeでSVGをプレビューする拡張機能「SVG Preview」

URL: https://webrandum.net/vscode-plugin-svg-preview/
公開日: 2022-09-16
更新日: 2022-09-15
カテゴリー: コーディング
タグ: Visual Studio Code, Visual Studio Codeプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

SVGのプレビューは基本的にGapplinを使用しています。

しかし、直接コードを調整したり、アニメーションさせるためにコードを整形するときはテキストエディタで開いてコードを編集します。

そんなときにVisual Studio Code上でプレビューされていると、コードを編集しつつ、編集結果をすぐ確認できて便利です。

今回はVisual Studio Code上でSVGのプレビューができる「SVG Preview」についてまとめておきます。

## SVG Preview

![SVG Preview](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_1-9-scaled.jpg)

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/c0d918640b14ebd953b4bc592210f791762267f8f4171c2eac3569cc53cdcf87.webp)Svg Preview - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-previewExtension for Visual Studio Code - Preview for Svg files](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview)

SVG PreviewはVisual Studio Codeで開いたSVGを別タブでプレビューしてくれる拡張機能です。

編集したらリアルタイムでプレビューされるのと、プレビュー画像の拡大縮小も可能です。

似たような名前の拡張機能が多くありますが、これがインストール数も多いのと、使い勝手も良かったです。

## 基本的な使い方

SVGを開くと、自動的に別ペインでプレビュータブが表示されます。

![SVG画像のプレビュー](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_2-8.png)

横に並んでプレビューされて、編集はリアルタイムにすぐ反映されるので、編集しやすくなります。

また、プレビュー画面にマウスカーソルを載せて上下にスクロールすると、プレビューの拡大・縮小ができます。

## 設定

### プレビュータブを自動で開かないようにする

「”svgPreview.autoOpen”」を`false`にすると、プレビュータブが自動で開かないようになります（デフォルトは`true`）。

```
{
  "svgPreview.autoOpen": false
}
```

プレビュータブを手動で開くためにはcontrol + option + Pのショートカットを実行するか、もしくはshift + command + Pでコマンドパレットを表示してから、「Svg Preview: Open Preview to the Side」を選択します。

### プレビューサイズをSVG画像の設定に合わせる

デフォルトだとVisual Studio Codeの画面いっぱいにプレビューされるようになっていますが、SVGの`width`や`height`の設定に合わせて表示したい場合は「”svgPreview.scaleToFit”」を`false`にします。

```
{
  "svgPreview.scaleToFit": false
}
```

### プレビュー画面にCSSを適用する

プレビュー画面の背景色を変えたい場合は「”svgPreview.style”」を使えばCSSの適用ができるので、それで変更します。

```
{
  "svgPreview.style": {
    "html": {
      "background-position": "0 0, 13px 13px",
      "background-size": "26px 26px",
      "background-image": "linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414), linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414)"
    }
  }
}
```

上記のCSS設定は拡張機能の紹介ページに載っているものですが、適用すると背景がチェック模様になります。

![プレビュー背景をチェック模様にする](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_3-7.png)