SVGファイル編集ソフトでSVGの色を変更する方法

2024-04-02

SVG要素の色を変更する方法

SVG画像の色は、CSSやJavaScriptを使用して変更できます。どの方法が最適かは、状況によって異なります。

方法

CSSを使用する

メリット

シンプルで簡単
コード量が少なく、軽量
アニメーションやホバー効果などの動的な色の変更にも対応

個々の要素の色を変更できない
インラインSVGでのみ使用可能

手順

SVG要素に class または id 属性を追加します。
CSSファイルで、追加した属性セレクタを使用して、fill または stroke プロパティを指定します。

例

<svg class="my-svg">
  <path fill="red" d="M0,0 L100,100" />
</svg>

.my-svg path {
  fill: blue;
}

JavaScriptを使用する

外部SVGファイルにも適用できる
動的な色の変更やアニメーションに柔軟に対応

CSSよりも複雑
コード量が多くなる

JavaScriptファイルで、SVG要素を取得します。
setAttribute() メソッドを使用して、fill または stroke 属性を設定します。

<svg id="my-svg">
  <path d="M0,0 L100,100" />
</svg>

const svg = document.getElementById("my-svg");
const path = svg.querySelector("path");

path.setAttribute("fill", "blue");

SVGファイル編集ソフトを使用する

視覚的に操作できるので、直感的
デザインツールとの連携が容易

コードの編集知識が不要
ファイルサイズが大きくなる可能性

SVGファイル編集ソフトでファイルをを開きます。
ツールバーやパレットを使用して、色の変更を行います。
ファイルを保存します。

補足

上記以外にも、SVGフィルターやマスクを使用して色を変更する方法もあります。

CSSを使用する

<svg class="my-svg">
  <circle cx="50" cy="50" r="40" fill="red" />
  <rect x="10" y="10" width="80" height="40" fill="blue" />
</svg>

.my-svg circle {
  fill: green;
}

.my-svg rect {
  fill: yellow;
}

JavaScriptを使用する

<svg id="my-svg">
  <circle cx="50" cy="50" r="40" />
  <rect x="10" y="10" width="80" height="40" />
</svg>

const svg = document.getElementById("my-svg");
const circle = svg.querySelector("circle");
const rect = svg.querySelector("rect");

circle.setAttribute("fill", "green");
rect.setAttribute("fill", "yellow");

SVGファイル編集ソフトを使用する

Adobe Illustrator や Inkscape などの SVG ファイル編集ソフトを使用します。

上記以外にも、様々な方法で SVG 要素の色を変更できます。
目的に合わせて最適な方法を選択してください。

SVG要素の色を変更するその他の方法

<mask> 要素を使用して、SVG要素の一部のみ色を変更できます。

<svg viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red" />
  <mask id="my-mask">
    <circle cx="50" cy="50" r="40" fill="black" />
  </mask>
  <rect x="0" y="0" width="100" height="100" mask="url(#my-mask)" />
</svg>

filter 要素を使用して、SVG要素に様々な効果を適用できます。色を変更する効果も利用できます。

<svg viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red" />
  <filter id="my-filter">
    <feColorMatrix type="matrix" values="
      0.3 0.3 0.3 0 0
      0.3 0.3 0.3 0 0
      0.3 0.3 0.3 0 0
      0 0 0 1 0
    " />
  </filter>
  <rect x="0" y="0" width="100" height="100" filter="url(#my-filter)" />
</svg>

SVG スクリプトを使用して、SVG要素の色を動的に変更できます。

<svg viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" id="my-rect" />
</svg>

<script>
const rect = document.getElementById("my-rect");

rect.addEventListener("click", () => {
  rect.setAttribute("fill", "green");
});
</script>