SVGの色を変更する方法と、変わらないときの対処法

SVGの色を変える方法は3つあり、いずれも無料です。オンラインのSVG色変更ツールにアップロードして、置き換える色見本をクリックする方法。Inkscapeなどのベクターアプリで開き、形を選んで新しい塗りを指定する方法。そして、SVGはテキストなので、テキストエディターで開いて16進数の色コードを置き換える方法です。ベクターの色変更は品質も失いません。ピクセルを塗り直すのではなく命令を書き換えるので、ぼけたり劣化したりしません。

どの方法を選ぶかはファイルの中身次第です。色が変わらない場合も、原因はほぼ常にツールではなくファイルの中にあります。まず3つの方法を説明し、その後、色変更が反映されない6つの原因を確認します。色変更ツールでは解決できない原因も含まれます。

SVGの色はどこに保存されるか

SVGファイルは、テキストで書かれた形の一覧です。MDNのSVGの塗りとストロークの説明のように、各形には内部のfillと輪郭のstrokeを指定できます。1か所で置き換えられる単一の「画像の色」はありません。画面では単色に見えるデザインでも、1つの整理されたパスかもしれず、同じ塗りを持つ40個の別々のパスかもしれません。

仕組みはそれだけです。以下の方法はすべて、形を見つけてfillやstrokeを書き換える別の手段です。ファイルごとに結果が大きく違う理由でもあります。形が少なくきれいなほど、色変更は簡単です。

方法を選ぶ

方法1：オンラインのSVG色変更ツール

1. ブラウザーで無料のSVG色変更ツールを開き、ファイルをアップロードします。良いツールならSVGコードの貼り付けにも対応します。
2. 検出した色が表示されます。同じ塗りをまとめるツールなら、何十個の形で使う「青」も1つの色見本になります。
3. 色見本をクリックし、置き換える色を選んでプレビューを確認します。
4. 結果をダウンロードし、ブラウザーのタブで一度開いて確認します。

大半の人にとって、たいてい適した方法です。実作業に使う前に、ストロークの色も表示するか、グラデーションをどう扱うかの2点を確認します。画面で見えるより色数が少ない場合、一部がグラデーションや埋め込み画像であり、単純な色見本の置換では変更できません。

方法2：ベクターデザインアプリ

Inkscapeは無料で、この作業に必要な機能がすべてあります。IllustratorやFigmaでも同様に操作できます。

1. SVGを開き、変えたい部分をクリックします。デザイン全体が1つの塊として選択されるならグループ化されています。ダブルクリックしてグループ内に入るか、グループを解除します。
2. InkscapeのFill & Stroke（フィル／ストローク）パネル、またはIllustratorやFigmaの塗りの色見本で変更します。
3. 見た目で1つの色が複数の形に分かれているなら、1つずつクリックしません。Inkscapeでは形を右クリックし、Select Same → Fill Color（同じものを選択 → 塗りの色）を使います。Illustratorでは、公式に説明されたSelect → Same → Fill Color（選択 → 共通 → カラー（塗り））を使います。同じ塗りの形がすべて選択され、一度の変更ですべて変わります。
4. プレーンSVGとして保存または書き出します。

形を動かす、曲線を修正するなど、色以外の操作にもデザインアプリを使います。より広い機能については、SVGの編集ガイドをご覧ください。

方法3：テキストエディター

SVGはテキストなので、メモ帳、TextEdit、VS Codeなど、どのエディターでも使えます。

1. .svgを開き、fill=を検索します。
2. たとえばfill="#1e3a5f"をfill="#c2410c"に変えて保存します。
3. ブラウザーのタブで再読み込みして結果を確認します。

注意点は3つあります。色は16進数だけでなく、fill="black"のような名前でも書けます。輪郭はfill=ではなくstroke=です。また、多くの書き出したファイルでは、形に色が直接付かず、クラスを使い、上部の<style>ブロックに16進数が置かれています（.st0{fill:#1e3a5f;}）。スタイルブロックの色を編集すれば、そのクラスを持つすべての形が変わります。

単色アイコンでは1回の検索・置換で済み、フォルダー全体の一括作業にも適しています。40色のイラストでは時間がかかる方法です。

ウェブサイト上のSVGの場合

CSSでSVGの色を変えられますか？ 最も直接的なのは、HTMLにSVGマークアップをインラインで置く方法です。fillをCSSプロパティとして扱え、塗りをcurrentColorにすると周囲の文字色を継承できます。外部の<img>で読み込むSVGは画像として扱われます。MDNは、この方式ではJavaScriptでSVG構造を操作できないと説明しています。ページのスタイルも内部のパスを直接選択できません。

インラインにできないなら、上のファイル編集方法に戻り、SVG内の色を変更して再読み込みします。読み込み方を選ぶ際は、同じ画像とページのCSSテストでインラインSVGと外部画像を比較してください。

単色のインターフェース用シルエットには、SVGのCSSマスクと透明なアイコン形状という方法もあります。元画像のパスの色を変えず、CSSでアイコン要素に色を付けます。

元に戻せる色効果には、feColorMatrixと直接の塗り編集の比較を使います。フィルターは元の塗りを残して表示色を変えるので、編集可能な画像を納品するときに重要です。

SVGの色が変わらない理由

チュートリアルで省かれがちですが、実際に色変更が失敗するのはここです。表の順に確認します。

特に2つを詳しく見てみましょう。

思いがけない背景の四角

白いページ上では見えない、全体サイズの背景の長方形を持つSVGがあります。「すべて」の色を変えると、デザインの後ろに色付きの塊として現れます。クリック時にこれを選択するアプリもあります。通常の形なので、選択して削除するか、必要な色を指定します。別のソフトで白い四角が出る場合は、関連はありますが別の問題です。透明背景を保つガイドで説明しています。

ベクターではないSVG

厄介なのは、どの形も選択できず、塗りを編集しても何も変わらず、拡大すると輪郭がピクセル化するケースです。テキストエディターで開くと、<path>ではなく、大量のbase64テキストを持つ1つの<image>タグが見つかります。これはラスター画像を.svgで包んだものです。実際にトレースしない変換ツールが作るもので、色を塗り直す形がないため、色変更ツールでは解決できません。「色付け」フィルターはピクセル全体に色をかぶせるだけで、結果も良くないことが多いものです。画面では同じに見えても、コードでは違いが明らかです。

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

元の画像、できれば元のPNGやJPGに戻り、実際のパスを持つ本物のベクターへ変換します。ピクセル化して見えるSVGのガイドでは、こうしたファイルができる理由と、使う前の見分け方を説明しています。実際の形ができれば、この記事のすべての方法が使えます。

切断ファイルの色変更：色ごとにレイヤーが増える

CricutやSilhouetteはSVGの各色をレイヤーとして扱います。レイヤーが増えると、加工回数、素材の枚数、不要部分を剥がす作業も増えます。切断ファイルの色変更は、レイヤーの計画でもあります。2つの要素を同じ塗りにすると1回の切断にまとまり、色を分けると新しいレイヤーができます。

そのため、工作では似た色の統合が特に有効です。トレースした画像には、見た目の違いがほぼない3つの青が含まれ、不要なレイヤーを増やすことがあります。1つにまとめると切断が速くなり、不要部分も剥がしやすくなります。SVGの色数を減らす工程では、コントラストや加工の意味を失わず、見た目の役割に沿って統合する方法を説明しています。意図して多層デザインを作るなら、レイヤー付きSVGのガイドに全工程があり、Cricut用SVGページではカッティングマシン用の準備全体を扱っています。

色変更後に個別のダウンロードが必要なら、正確な色ごとに位置を揃えたSVGを保存します。

PerfectVectorではどう進めるか

先に限界を説明すると、PerfectVectorは既存のSVGを編集するツールではありません。PNG、JPG、WebPなどの画像をSVGへ変換します。ただ、「このSVGの色を変えたい」という問題の多くは、変換工程に原因があります。扱いにくいファイルは通常、乱れたトレースか、本物のベクターでないファイルです。

SVGが画像から作られたもの、または元画像が残っているものなら、元から整えるのが最もきれいな色変更になります。画像をSVGに変換し、編集向けのきれいなパス、少ないノード、色ごとに独立した編集可能な形を作ります。その後ダウンロード前に内蔵の色エディターで、パスを探すのではなく色単位で置き換えや統合を行います。必要な配色と簡単なファイルを同時に得られます。最初の変換は無料で、クレジットカードは不要です。

色変更ではできないこと

• グラデーションは1つの色見本ではありません。 カラーストップを結ぶ変化です。カラーストップは編集できますが、単純な「この色を置き換える」操作では一部だけ変わる場合があり、単純に置き換えたグラデーションが不自然になる理由です。
• 画面の色と印刷の色は違います。 SVGは画面向けの色指定を保存しますが、印刷では正確なブランド色、特色、黒の構成が必要な場合があります。書き出しで見た目が変わるなら、配色を置き換える前にSVGの色ずれを診断します。印刷会社が指定する製作用形式が、色の最終基準です。
• 色変更は形状を整理しません。 新しい塗りでは細片を結合し、隙間を閉じ、ノードを減らせません。乱れたトレースは色を変えても乱れたままです。

保存前に

• 色変更後のファイルを新しいブラウザータブで開き、元ファイルと比べます。
• 輪郭を確認し、必要な場所で塗りとともにストロークも変わったか見ます。
• 誤って色を変えた背景の長方形がないか探します。
• 切断ファイルでは統合後のレイヤー数を数えます。通常は少ないほうが扱いやすくなります。
• 元ファイルの未変更のコピーを保管します。

よくある質問

IllustratorやPhotoshopを使わずにSVGの色を変える方法は？ 無料のオンラインSVG色変更ツールでアップロード、色見本のクリック、ダウンロードを行うか、無料のデスクトップベクターエディターInkscapeを使います。単色アイコンなら、任意のテキストエディターで開き、fill=の後の16進数を変えてもできます。どれも無料です。

何をしてもSVGが黒いままなのはなぜですか？ ウェブサイト上なら、imgタグで読み込んだSVGはCSSで内部のスタイルを変更できません。インラインにするかファイルを編集します。エディター内なら、グループ、色を付けているストローク、スタイルブロックの色指定を確認します。何も選択できず拡大でピクセルが見えるなら、ラスター画像を.svgで包んだもので、色変更できる形がありません。

CanvaでSVGの色を変えられますか？ Canvaの専用SVGエディターは、無料でアップロード、色変更、透かしなしのダウンロードができると説明しています。複雑なSVG機能はエディターによって表示が異なる場合があるので、元ファイルを置き換える前にダウンロード結果を確認します。

1つのSVGで複数の色を使えますか？ はい。各形に独自の塗りとストロークがあるので、形の数だけ色を使え、グラデーションも使えます。多色画像の色変更が、1つの全体設定ではなく複数の塗りの変更になる理由でもあります。

Cricut用SVGの色を変える方法は？ Cricut Design Space内でレイヤーの色を変えられますが、形ごとではなくレイヤーごとです。どの部分を同じ色にし、一緒に切断するかを変えるには、アップロード前にSVGを編集します。同じレイヤーにする色は統合し、別に切断するものには別の塗りを指定します。

SVGの色を変えると品質が落ちますか？ いいえ。ベクターの色はテキストの命令なので、変更は形状に触れず命令を書き換えます。PNGの編集と違い、何度色を変えても品質は失われません。

参考資料

1. MDN：SVGの塗りとストローク — fill、stroke、不透明度、関連する描画プロパティを説明しています。
2. MDN：ウェブへのベクター画像の追加 — インラインSVGと<img>で読み込むSVGを比較しています。
3. Adobe Illustrator：同じ塗りとストロークのオブジェクトを選択 — 共通の描画属性で選択する方法を説明しています。
4. W3C：SVG 2の埋め込みコンテンツ — SVG文書内のラスター<image>を定義しています。
5. Canva：SVGエディター — SVGのアップロード、色変更、ダウンロードに関する現在の公式説明です。

ファイルが正常なら、SVGの色変更は手早くできます。手元のファイルに合う方法を選び、ツールで苦労する前に原因を確認しましょう。ファイル自体に問題があるなら、元画像をきれいで編集可能なSVGへ変換し、簡単に操作できる段階で色を選びます。