SVGの色をVScodeで変更する方法

Next.js

2025/10/18

2026/01/31

PRを含みます

ブログカスタマイズの際にSVGの色を変更したいと思っていた。しかし配布されているSVGの色は黒になっており、CSSで変更するしかなさそうだった。SVGの色を直接変更できれば良いのに、と思っていたところVSCodeでも編集できそうだったので、紹介する

手順

VSCodeでSVGを開くとデフォルトではプレビューモードになっており、SVGアイコンが表示されるはず。コードとして開いて fill のパラメータを好きな色に変更すれば色が変更できた。まずはVSCodeでコードとして開けるように設定を変更する

ファイル＞ユーザー設定＞設定と進み検索バーで「Editor Associations」と入力する。ここで項目の追加を選択し、項目は「*svg」、値は「default」と入力する。そうするとSVGファイルがコードで開くことができる

色の変更例（XのSVG）

変更前は以下

<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
        d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
        fill="black" />
</svg>

以下が変更後

<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
        d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
        fill="#fff" />
</svg>

fillを「black」から「#fff」にすることで黒から白にSVGの色を変更している。