WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

SVG Preview

SVG Preview

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

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

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

基本的な使い方

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

プレビュー背景をチェック模様にする

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね