VSCodeでSVGファイルをプレビューする方法について

2026年10月26日

VSCodeでは、SVGファイルを画像としてプレビューできます。

SVGはXMLベースのテキストデータで構成されているため、VSCode上でソースコードを直接編集しながら、完成した画像を確認できるのが特徴です。

SVGを確認する方法としては、VSCodeの標準機能を利用する方法と、SVGプレビュー用の拡張機能を利用する方法があります。

単純にSVGの表示結果を確認したい場合は標準機能で十分ですが、コードを編集しながらリアルタイムで確認したい場合は拡張機能を利用すると便利です。

VSCodeの標準機能でSVGをプレビューする

SVGはVSCode標準機能で表示できる

比較的新しいVSCodeでは、標準の画像プレビュー機能がSVG形式に対応しています。

そのため、SVGの完成形を確認するだけであれば、必ずしも拡張機能をインストールする必要はありません。

例えば、次のようなファイル構成があるとします。

project/
├─ index.html
└─ logo.svg

VSCodeのエクスプローラーからlogo.svgを開くと、設定やファイルの関連付けに応じて、画像プレビューまたはテキストエディターで表示されます。

SVGがコードとして表示される場合

SVGは画像ファイルであると同時に、XML形式のテキストファイルでもあります。

そのため、環境によっては次のようなコードとして表示されます。

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <circle
    cx="100"
    cy="100"
    r="80"
    fill="blue"
  />
</svg>

これは異常ではありません。

SVGを編集する場合は、むしろテキストとして表示したほうが便利です。

「Reopen Editor With」で表示方法を切り替える

SVGを画像として確認したい場合は、エディターの表示方法を切り替えられます。

SVGファイルのタブを右クリックし、

Reopen Editor With...

を選択します。

その後、利用可能なエディターの中から画像プレビューに相当するものを選択します。

これにより、

SVGコードを編集
↓
画像としてプレビュー

といった使い分けができます。

なお、メニュー名や表示内容はVSCodeのバージョンや表示言語によって多少異なる場合があります。

SVGをコードとして編集する

SVGはXMLコードを直接編集できる

SVGの大きなメリットは、画像をコードとして編集できることです。

例えば、次のSVGでは青い円を表示しています。

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 200 200"
>
  <circle
    cx="100"
    cy="100"
    r="80"
    fill="#0066ff"
  />
</svg>

fill属性を変更すると、図形の色を変更できます。

例えば次のようにします。

fill="#ff0000"

すると、円の色が赤色になります。

SVGでよく編集する属性

SVGでは、次のような属性を頻繁に編集します。

width
height
viewBox
fill
stroke
stroke-width
x
y
cx
cy
r
d

例えば、長方形を表示する場合は次のように記述できます。

<rect
  x="20"
  y="20"
  width="160"
  height="100"
  fill="green"
/>

このように、VSCodeではSVGの形状や色、サイズなどをコードから細かく調整できます。

SVGを編集しながらプレビューする

標準プレビューは確認用途に向いている

VSCode標準のSVGプレビューは、完成したSVGを確認する用途には便利です。

一方で、SVGコードを頻繁に修正する場合、

コードを編集
↓
プレビューを開く
↓
コードに戻る
↓
再び修正

という操作が増えることがあります。

このような場合は、SVG専用のプレビュー拡張機能を利用すると効率的です。

Svg Preview拡張機能を利用する

Svg Previewとは

「Svg Preview」は、VSCode上でSVGをライブプレビューできる拡張機能です。

SVGコードを編集しながら、別のペインにレンダリング結果を表示できます。

そのため、

左側：SVGコード
右側：SVGプレビュー

といったレイアウトで作業できます。

SVGアイコンやロゴなどを頻繁に編集する場合に便利です。

Svg Previewをインストールする

VSCode左側のExtensionsビューを開きます。

Windows・Linuxでは、

Ctrl + Shift + X

macOSでは、

Cmd + Shift + X

で開くこともできます。

検索欄に、

Svg Preview

と入力して対象の拡張機能を検索し、インストールします。

SVGプレビューを横に表示する

Svg Previewでは、

Svg Preview: Open Preview to the Side

というコマンドを利用できます。

デフォルトでは、

Ctrl + Alt + P

がショートカットとして設定されています。

実行すると、例えば次のようなレイアウトになります。

┌────────────────────┬────────────────────┐
│ SVGコード          │ SVGプレビュー      │
│                    │                    │
│ <svg>              │        ●           │
│   <circle ... />   │                    │
│ </svg>             │                    │
└────────────────────┴────────────────────┘

SVGコードを変更しながら結果を確認できるため、編集作業の効率を高められます。

Svg Previewを自動的に開く

svgPreview.autoOpenを設定する

Svg Previewには、SVGファイルを開いたときに自動でプレビューを表示する設定があります。

設定名は、

svgPreview.autoOpen

です。

settings.jsonでは、次のように設定できます。

{
  "svgPreview.autoOpen": true
}

SVGを頻繁に編集する場合は、自動プレビューを有効にしておくと便利です。

SVGの表示サイズを調整する

svgPreview.scaleToFitを利用する

プレビュー画面にSVG全体を収めたい場合は、

svgPreview.scaleToFit

を利用できます。

例えば次のように設定します。

{
  "svgPreview.scaleToFit": true
}

有効にすると、大きなSVGでもプレビュー領域に合わせて表示しやすくなります。

SVGの背景色を変更する

白いSVGや透明SVGを確認しやすくする

SVGには、透明背景や白色の図形が使用されることがあります。

例えば、

fill="#ffffff"

のような白色SVGを白背景で表示すると、画像が見えにくくなります。

Svg Previewでは、svgPreview.styleを利用して背景を変更できます。

例えば、背景を白色にする場合は次のように設定できます。

{
  "svgPreview.style": {
    "html": {
      "background": "white"
    }
  }
}

透明部分を確認したい場合は、背景色を変更したり、チェッカーボード形式の背景を設定したりすると確認しやすくなります。

HTML内のSVGを確認する

インラインSVGを利用する場合

SVGは.svgファイルとして保存するだけでなく、HTML内に直接記述できます。

例えば次のように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SVG Sample</title>
</head>
<body>

  <svg
    width="200"
    height="200"
    viewBox="0 0 200 200"
  >
    <circle
      cx="100"
      cy="100"
      r="80"
      fill="blue"
    />
  </svg>

</body>
</html>

このような書き方は「インラインSVG」と呼ばれます。

インラインSVGの場合は、ブラウザでHTML全体を表示して確認する方法も便利です。

SVGをホバーでプレビューする

SVG Preview on codeを利用する

コード上のSVGを簡単に確認したい場合は、ホバープレビューに対応した拡張機能を利用できます。

例えば「SVG Preview on code」では、SVGコードにマウスカーソルを合わせることでプレビューを表示できます。

<svg viewBox="0 0 24 24">
  <path d="..." />
</svg>

このようなSVGがHTML内に多数記述されている場合でも、必要なSVGだけを素早く確認できます。

SVGアイコンを大量に扱うWeb制作では便利な方法です。

ReactやVue内のSVGをプレビューする

JSXやTSX内のSVGは専用拡張機能が便利

Reactでは、SVGをコンポーネントとして直接記述することがあります。

例えば次のようなコードです。

export default function Icon() {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <circle
        cx="12"
        cy="12"
        r="10"
        fill="blue"
      />
    </svg>
  );
}

この場合、通常の.svgファイル用プレビューだけでは扱いにくいことがあります。

.jsxや.tsx、.vue内のSVGを確認したい場合は、これらのファイル形式に対応したSVGプレビュー拡張機能を利用すると便利です。

ブラウザでSVGをプレビューする

SVGファイルを直接ブラウザで開く

SVGは主要なWebブラウザで直接表示できます。

そのため、

logo.svg

などのSVGファイルをChromeやEdge、Firefoxにドラッグ＆ドロップするだけでも表示できます。

VSCodeの表示結果だけでなく、実際のブラウザでどのようにレンダリングされるか確認したい場合に便利です。

HTMLからSVGを読み込む

Webページ内でSVGを使用する場合は、img要素から読み込む方法も一般的です。

<img src="./icon.svg" alt="アイコン">

例えば、

project/
├─ index.html
└─ icon.svg

という構成であれば、index.htmlをブラウザで開くことでSVGの表示を確認できます。

Live Serverと組み合わせる

Webページ全体での表示確認に向いている

SVG単体ではなく、Webサイト上でどのように表示されるか確認したい場合は、Live Serverなどを利用する方法があります。

例えば、

<img
  src="./images/logo.svg"
  alt="ロゴ"
  width="200"
>

と記述している場合、ブラウザでWebページを表示すると、CSSや背景色も含めた状態で確認できます。

特に、

CSSとの組み合わせ
レスポンシブ表示
背景色との相性
ホバーエフェクト
SVGアニメーション
JavaScriptによる制御

などを確認したい場合は、SVG単体のプレビューよりもブラウザで確認するほうが適しています。

SVGがプレビューできない場合の対処法

XML構文を確認する

SVGのタグ構造に問題があると、正しく表示されない場合があります。

例えば次のコードは不完全です。

<svg>
  <circle>
</svg>

circle要素を正しく記述すると、例えば次のようになります。

<svg>
  <circle cx="50" cy="50" r="40" />
</svg>

SVGが表示されない場合は、タグの閉じ忘れや属性値の記述ミスを確認しましょう。

xmlnsを確認する

独立した.svgファイルとして使用する場合は、SVGの名前空間を指定しておくのが基本です。

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
>

一方、HTML内に直接記述するインラインSVGでは、xmlnsを省略しても利用できる場合があります。

そのため、xmlnsがないことだけを原因として判断するのではなく、SVGの利用方法に応じて確認することが大切です。

viewBoxを確認する

SVG内に図形が存在していても、viewBoxの範囲外に配置されていると表示されません。

例えば、

<svg viewBox="0 0 100 100">
  <circle
    cx="1000"
    cy="1000"
    r="50"
  />
</svg>

では、円が表示範囲から大きく外れています。

表示されない場合は、

viewBox
width
height
x
y
cx
cy

などの値を確認しましょう。

fillやstrokeを確認する

SVGが存在しているにもかかわらず見えない場合は、色の設定も確認します。

例えば、

fill="#ffffff"

となっているSVGを白い背景で表示すると、図形が見えません。

また、

fill="none"

になっていたり、

opacity="0"

が設定されていたりする場合もあります。

fillだけでなく、strokeやopacityなども確認すると原因を特定しやすくなります。

VSCodeでSVGを扱うおすすめの方法

確認だけなら標準プレビューで十分

SVGの完成形を確認するだけであれば、VSCode標準のSVGプレビューが便利です。

拡張機能を追加する必要がないため、シンプルに利用できます。

編集するならコードとプレビューを横並びにする

SVGを頻繁に編集する場合は、

左側：SVGコード
右側：ライブプレビュー

というレイアウトがおすすめです。

コードを変更した結果をすぐに確認できるため、色やサイズ、パスなどの微調整がしやすくなります。

Web制作ではブラウザ確認も行う

Webサイトで使用するSVGの場合は、VSCode内のプレビューだけで確認を完了させないことも重要です。

実際のブラウザでは、CSSやJavaScript、レスポンシブデザインなどの影響を受けます。

そのため、

VSCodeでSVG単体を確認
↓
ブラウザでページ全体を確認

という流れでチェックすると、表示トラブルを防ぎやすくなります。

まとめ

VSCodeでは、標準機能を使ってSVGファイルを画像としてプレビューできます。

SVGの完成形を確認するだけであれば、標準の画像プレビューで十分です。

一方、SVGコードを編集しながらリアルタイムで表示結果を確認したい場合は、「Svg Preview」などの拡張機能を利用すると効率的です。

また、HTMLやReact、Vueなどに埋め込まれたSVGについては、ホバープレビューやJSX・TSX・Vue対応の拡張機能を利用すると扱いやすくなります。

Webサイトで実際に使用するSVGについては、最終的にブラウザでも表示を確認することが重要です。

用途に応じて、

標準プレビュー
SVGプレビュー拡張機能
ブラウザ

を使い分けると、VSCodeでSVGを効率よく編集・確認できます。

以上、VSCodeでSVGファイルをプレビューする方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

VSCodeでSVGファイルをプレビューする方法について

採用はこちら

VSCodeの標準機能でSVGをプレビューする

SVGはVSCode標準機能で表示できる

SVGがコードとして表示される場合

「Reopen Editor With」で表示方法を切り替える

SVGをコードとして編集する

SVGはXMLコードを直接編集できる

SVGでよく編集する属性

SVGを編集しながらプレビューする

標準プレビューは確認用途に向いている

Svg Preview拡張機能を利用する

Svg Previewとは

Svg Previewをインストールする

SVGプレビューを横に表示する

Svg Previewを自動的に開く

svgPreview.autoOpenを設定する

SVGの表示サイズを調整する

svgPreview.scaleToFitを利用する

SVGの背景色を変更する

白いSVGや透明SVGを確認しやすくする

HTML内のSVGを確認する

インラインSVGを利用する場合

SVGをホバーでプレビューする

SVG Preview on codeを利用する

ReactやVue内のSVGをプレビューする

JSXやTSX内のSVGは専用拡張機能が便利

ブラウザでSVGをプレビューする

SVGファイルを直接ブラウザで開く

HTMLからSVGを読み込む

Live Serverと組み合わせる

Webページ全体での表示確認に向いている

SVGがプレビューできない場合の対処法

XML構文を確認する

xmlnsを確認する

viewBoxを確認する

fillやstrokeを確認する

VSCodeでSVGを扱うおすすめの方法

確認だけなら標準プレビューで十分

編集するならコードとプレビューを横並びにする

Web制作ではブラウザ確認も行う

まとめ

関連記事