VSCodeでは、SVGファイルを画像としてプレビューしたり、XMLコードとして直接編集したりできます。
SVGはPNGやJPEGとは異なり、XMLをベースにしたベクター画像形式です。
そのため、VSCodeのようなコードエディターとの相性がよく、色やサイズ、形状などをコードから細かく調整できます。
現在のVSCodeにはSVGの基本的なプレビュー機能も搭載されているため、簡単な確認であれば拡張機能を追加しなくても対応できます。
一方、コードを編集しながらリアルタイムで見た目を確認したい場合には、SVGプレビュー用の拡張機能を利用すると便利です。
この記事では、VSCodeでSVGを表示・編集する基本的な方法から、Web制作で役立つ実践的な使い方まで詳しく解説します。
SVGとは
SVGはベクター形式の画像
SVGは「Scalable Vector Graphics」の略称です。
JPEGやPNGのようにピクセルで画像を構成するラスター形式とは異なり、線や図形、座標などの情報を使って画像を表現します。
そのため、ベクター図形については拡大・縮小しても画質を維持しやすい点が特徴です。
ロゴやアイコン、イラスト、グラフなどに幅広く利用されています。
ただし、SVG内部にJPEGやPNGなどのラスター画像を埋め込んでいる場合、その画像部分については拡大時に粗くなる可能性があります。
SVGはXMLコードで記述される
SVGは画像ファイルでありながら、内部はXMLコードで構成されています。
たとえば、次の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="blue"
/>
</svg>このコードをsample.svgなどの名前で保存すれば、SVG画像として利用できます。
VSCodeでは、このコードを直接編集できます。
VSCodeでSVGを表示する方法
SVGファイルをプレビューする
現在のVSCodeには、SVGを画像として確認できる基本的なプレビュー機能があります。
そのため、プロジェクト内のSVGファイルを開き、画像として内容を確認できます。
たとえば、次のようなファイル構成があるとします。
project/
└── images/
├── logo.svg
├── icon.svg
└── arrow.svgVSCodeのエクスプローラーからSVGファイルを開けば、設定や開き方によって画像としてプレビューできます。
簡単にSVGの見た目を確認するだけであれば、標準機能で十分なケースも多いでしょう。
SVGをコードとして開く
SVGを画像ではなく、XMLコードとして編集したい場合は、テキストエディターで開きます。
SVGが画像プレビューとして開かれている場合は、エディターのメニューなどから「Reopen Editor With…」を選択し、通常のテキストエディターで開く方法があります。
日本語UIでは、バージョンや環境によって「別のエディターで再度開く」などの表記になる場合があります。
SVGをテキストとして開けば、HTMLやCSSを編集するような感覚でコードを修正できます。
VSCodeでSVGを編集する方法
SVGの色を変更する
SVGの色は、主にfillやstroke属性で指定します。
fillは図形内部の塗りつぶし色です。
たとえば、次のコードがあります。
<circle
cx="50"
cy="50"
r="40"
fill="#2563eb"
/>fillを次のように変更します。
fill="#ef4444"すると、円の塗りつぶし色を変更できます。
線の色を変更する場合は、strokeを使用します。
<circle
cx="50"
cy="50"
r="40"
fill="none"
stroke="#000000"
stroke-width="2"
/>このように、VSCodeから直接色を調整できます。
SVGのサイズを変更する
SVGの表示サイズは、widthやheightで指定できます。
<svg
width="300"
height="100"
viewBox="0 0 300 100"
>たとえば、次のように変更できます。
width="600"
height="200"ただし、Web制作ではwidthとheightだけでなく、viewBoxも非常に重要です。
viewBoxを理解する
viewBoxは、SVG内部の座標系と表示領域を定義する属性です。
たとえば、次の記述があります。
viewBox="0 0 300 100"4つの数値は、それぞれおおまかに次の意味を持ちます。
0 ：X座標の開始位置
0 ：Y座標の開始位置
300 ：横方向の範囲
100 ：縦方向の範囲SVGをレスポンシブ表示したい場合、viewBoxは特に重要です。
不用意に削除すると、拡大・縮小や表示範囲が意図したとおりに動作しなくなる場合があります。
SVGでよく使われる要素
rectで長方形を描く
rectは長方形を作成するための要素です。
<rect
x="10"
y="10"
width="100"
height="50"
fill="blue"
/>角を丸くしたい場合は、rxなどを指定できます。
<rect
x="10"
y="10"
width="100"
height="50"
rx="10"
fill="blue"
/>circleで円を描く
circleは円を描画するための要素です。
<circle
cx="50"
cy="50"
r="40"
fill="red"
/>主な属性は次のとおりです。
cx：中心のX座標
cy：中心のY座標
r ：半径ellipseで楕円を描く
ellipseを使用すると楕円を作成できます。
<ellipse
cx="100"
cy="50"
rx="80"
ry="40"
fill="green"
/>rxは横方向の半径、ryは縦方向の半径です。
lineで直線を描く
lineでは直線を作成できます。
<line
x1="10"
y1="10"
x2="190"
y2="90"
stroke="black"
stroke-width="2"
/>pathで複雑な形状を描く
複雑なアイコンやロゴでは、pathがよく使用されます。
<path
d="M10 80 L100 10 L190 80 Z"
fill="orange"
/>d属性には、図形を構成する命令や座標が記述されています。
単純な図形であれば手作業でも編集できますが、複雑なpathは非常に長くなる場合があります。
そのため、大幅な形状変更はFigmaやAdobe Illustratorなどで行い、VSCodeでは色や属性を微調整する使い方が効率的です。
コードとSVGプレビューを並べて表示する方法
エディターを分割する
SVGを編集するときは、コードとプレビューを左右に並べると作業しやすくなります。
イメージとしては次のような状態です。
┌──────────────────┬──────────────────┐
│ SVGコード │ SVGプレビュー │
│ │ │
│ <svg> │ ● │
│ ... │ │
│ </svg> │ │
└──────────────────┴──────────────────┘VSCodeではエディターを分割できるため、複数の表示を並べることができます。
リアルタイムプレビューには拡張機能も便利
VSCode標準のSVG機能は、基本的な画像プレビューを目的としたものです。
コードを変更するたびにリアルタイムでプレビューを更新したい場合は、SVGプレビューに対応した拡張機能を利用する方法があります。
Extensionsビューは、WindowsやLinuxでは次のショートカットで開けます。
Ctrl + Shift + XmacOSでは次のショートカットです。
Command + Shift + X検索欄で、次のようなキーワードを入力します。
SVG Preview複数の拡張機能が表示されるため、自分の用途に合ったものを選択します。
SVG拡張機能を選ぶときの注意点
発行元や更新状況を確認する
VSCodeの拡張機能は便利ですが、すべてがMicrosoft公式というわけではありません。
第三者が公開している拡張機能も多数存在します。
インストールする前に、次のような情報を確認すると安心です。
・Publisher
・公開元
・最終更新日
・インストール数
・レビュー
・README
・必要な権限や機能SVGをプレビューするだけであれば標準機能でも対応できるため、本当に拡張機能が必要かを判断してから導入するとよいでしょう。
HTMLでSVGを表示する方法
imgタグでSVGを読み込む
Webサイトでは、SVGファイルをimgタグから読み込めます。
<img src="./images/logo.svg" alt="ロゴ">たとえば、次のような構成です。
project/
├── index.html
└── images/
└── logo.svgこの場合は、次のように指定できます。
<img src="./images/logo.svg" alt="ロゴ">PNGやJPEGと同じような感覚で利用できるため、もっとも簡単な方法の一つです。
SVGをHTMLへ直接記述する
SVGコードをHTML内に直接記述する方法もあります。
<svg
width="100"
height="100"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="50"
cy="50"
r="40"
fill="blue"
/>
</svg>この方法を一般的にインラインSVGと呼びます。
インラインSVGは、CSSやJavaScriptから内部要素を制御しやすい点がメリットです。
CSSでSVGを編集する方法
インラインSVGならCSSで色を指定しやすい
たとえば、次のインラインSVGがあります。
<svg
class="icon"
viewBox="0 0 100 100"
>
<circle
cx="50"
cy="50"
r="40"
/>
</svg>CSSから次のように指定できます。
.icon {
width: 100px;
height: 100px;
}
.icon circle {
fill: #2563eb;
}ホバー時に色を変えることもできます。
.icon circle {
fill: #2563eb;
transition: fill 0.3s;
}
.icon:hover circle {
fill: #ef4444;
}WebサイトのアイコンなどをSVGで実装する場合に便利な方法です。
currentColorを使ってSVGの色を管理する方法
currentColorとは
SVGアイコンでは、currentColorを利用すると色管理がしやすくなります。
たとえば、次のように記述します。
<svg
class="icon"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="..." />
</svg>CSSでは次のように指定します。
.icon {
color: #2563eb;
}fill="currentColor"を指定しているため、SVGの塗りつぶし色にCSSのcolorが反映されます。
ホバー時は次のように変更できます。
.icon:hover {
color: #ef4444;
}currentColorはインラインSVGで特に便利
注意したいのは、currentColorを使えばすべてのSVGを親HTML側のCSSから自由に変更できるわけではない点です。
たとえば、次のように外部SVGをimgタグで読み込んでいる場合があります。
<img src="icon.svg" class="icon" alt="">この方法では、親HTML側のCSSからSVG内部のpathやfillを、インラインSVGと同じ感覚で直接操作することはできません。
CSSでSVG内部の色を柔軟に変更したい場合は、インラインSVGを利用する方法が適しています。
SVGをレスポンシブ表示する方法
viewBoxを設定する
レスポンシブ対応では、SVG側にviewBoxを設定しておくことが重要です。
<svg
viewBox="0 0 1200 600"
xmlns="http://www.w3.org/2000/svg"
>HTML側では次のように読み込みます。
<img
src="./images/main-visual.svg"
alt=""
class="main-visual"
>CSSでは次のように指定します。
.main-visual {
width: 100%;
height: auto;
}これにより、親要素の幅に合わせてSVGを拡大・縮小しやすくなります。
ただし、SVGだから自動的にすべてレスポンシブになるわけではありません。
viewBoxやwidth、height、CSS側のサイズ指定などを適切に設定する必要があります。
SVGコードを整形する方法
SVGを読みやすくする
FigmaやIllustratorなどから書き出したSVGは、コードが1行にまとまっている場合があります。
たとえば、次のような状態です。
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M10 10..."/></svg>コードを編集する場合は、適切に改行したほうが読みやすくなります。
<svg
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
>
<path
d="M10 10..."
/>
</svg>フォーマッターやXML対応拡張機能を利用すれば、自動整形できる場合もあります。
ただし、使用するフォーマッターによって対応状況や整形結果は異なります。
チーム開発では、使用するフォーマッターや設定を統一しておくと管理しやすくなります。
VSCodeでSVGを編集するときの注意点
viewBoxを不用意に削除しない
viewBoxはSVGの拡大・縮小や表示範囲に関係する重要な属性です。
たとえば、次の記述があります。
viewBox="0 0 100 100"これを不用意に削除すると、レスポンシブ表示や拡大・縮小時の挙動が変わる可能性があります。
SVGを編集するときは、役割を理解せずにviewBoxを削除しないようにしましょう。
pathのd属性は慎重に編集する
次のようなpathがあります。
<path d="M10 10 L90 10 L50 90 Z" />d属性には図形を構成する命令や座標が含まれています。
数値や文字を誤って削除すると、形状が大きく崩れる可能性があります。
複雑なpathを編集する場合は、FigmaやIllustratorなどを利用したほうが安全で効率的です。
外部から入手したSVGの内容を確認する
SVGは単なる画像データではなく、XML文書として扱える形式です。
特に、信頼できないSVGをHTMLへ直接インライン挿入する場合は注意が必要です。
SVGにはスクリプトやイベント属性などを記述できるため、内容を確認せずにHTMLへ組み込むことは避けたほうが安全です。
一方、次のようにimg要素からSVGを画像として読み込む場合は、ブラウザーによってスクリプトなどに制限が加えられます。
<img src="./images/icon.svg" alt="">SVGの安全性を考える場合は、「画像として読み込む方法」と「HTMLへインライン挿入する方法」を区別して考えることが重要です。
VSCodeでSVGを扱うおすすめの流れ
デザインツールとVSCodeを使い分ける
Web制作でSVGを扱う場合は、デザインツールとVSCodeを使い分けると効率的です。
おすすめの流れは次のとおりです。
Figma・IllustratorなどでSVGを作成
↓
SVGファイルとして書き出す
↓
VSCodeでSVGコードを開く
↓
不要な属性やコードを確認する
↓
fill・stroke・viewBoxなどを調整する
↓
SVGプレビューで確認する
↓
HTML・CSSへ組み込む
↓
ブラウザーで最終確認する複雑な形状変更はFigmaやIllustratorで行い、色やクラス名、属性、アクセシビリティ関連の調整などをVSCodeで行うと作業しやすくなります。
VSCode標準機能と拡張機能の使い分け
簡単な確認なら標準機能で十分
SVGの見た目を確認する程度であれば、VSCode標準の基本プレビューで対応できます。
拡張機能を追加する必要は必ずしもありません。
頻繁に編集するなら拡張機能も便利
一方、次のような作業を頻繁に行う場合は、SVG専用のプレビュー拡張機能を利用すると便利です。
SVGコードを修正する
↓
プレビューを確認する
↓
再びコードを修正するリアルタイムプレビューやズームなどが必要な場合は、用途に合った拡張機能を検討するとよいでしょう。
VSCodeでSVGを扱う方法の使い分け
目的ごとのおすすめ方法をまとめると、次のようになります。
| やりたいこと | おすすめ方法 |
|---|---|
| SVGの見た目を確認したい | VSCode標準プレビュー |
| SVGコードを編集したい | テキストエディター |
| コードと画像を並べたい | エディター分割 |
| リアルタイムで確認したい | SVGプレビュー拡張機能 |
| Webページで表示したい | imgタグ |
| CSSで内部要素を変更したい | インラインSVG |
| アイコン色をCSS管理したい | currentColor |
| 複雑な形状を変更したい | Figma・Illustratorなど |
まとめ
VSCodeでは、SVGを画像としてプレビューするだけでなく、XMLコードとして直接編集できます。
基本的な表示確認であればVSCode標準のSVGプレビュー機能で対応できます。
一方、リアルタイムプレビューなど高度な機能が必要な場合は、SVG向けの拡張機能を利用すると作業効率を高められます。
SVGをコードとして編集するときは、fill、stroke、viewBox、pathなどの基本的な属性や要素を理解しておくことが重要です。
Web制作では、単純にSVGを表示するならimgタグ、CSSから内部の色や形状を操作したい場合はインラインSVGというように使い分けるとよいでしょう。
特にSVGアイコンでは、インラインSVGとcurrentColorを組み合わせることで、CSSから色を一元管理しやすくなります。
VSCode、SVGプレビュー、ブラウザー、FigmaやIllustratorなどを用途ごとに使い分けることで、SVGの作成から調整、Web実装まで効率よく進められます。
以上、VSCodeでSVGを表示・編集する方法についてでした。
最後までお読みいただき、ありがとうございました。
