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

2022年9月16日

SVGのプレビューは基本的にGapplinを使用しています。
しかし、直接コードを調整したり、アニメーションさせるためにコードを整形するときはテキストエディタで開いてコードを編集します。

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

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

SVG Preview

marketplace.visualstudio.com

Svg Preview - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview

Extension for Visual Studio Code - Preview for Svg files

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

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

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

基本的な使い方

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

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

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

設定

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

「”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設定は拡張機能の紹介ページに載っているものですが、適用すると背景がチェック模様になります。