今回の仕上がり
色を変える前に、SVGをHTMLの中へ直接書いているか、imgで別のファイルを読んでいるかを確かめます。下の自作例では、親のcolorを変えると左の星と文字が一緒に変わり、右は文字だけが変わります。右の星の形が読めているので、ファイルの読込失敗とは別の問題です。
同じ星を2通りで置く
- サンプルを開き、左の星と文字が青、右の星が黒であることを見ます。
- 「親の文字色を赤にする」を押します。Tabでボタンへ移動してSpaceでも操作できます。
- 左の星が赤くなり、下のfillと親のcolorがどちらもrgb(185, 28, 28)になったことを確認します。
- 右は赤い文字と黒い星のままです。ボタンをもう一度押し、青へ戻します。
.sample { color: #b91c1c; }
<!-- HTML内に直接置く場合 -->
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="..." />
</svg>
<!-- 別ファイルを画像として読む場合 -->
<img src="star.svg" alt="星" />currentColorは、その要素のcolorを参照する値です。MDNの説明と、この例の計算済みのfillを照合しました。直書きしたSVGは親の文字色を受け取りますが、imgが読むSVGの中へ親ページのcolorを渡す指定にはなりません。ファイル内にcurrentColorと書くだけでは、この例の黒い星は赤くなりません。
自分のSVGを調べる
まずSVG内のfillやstrokeを見ます。fill="#000"のような固定値があれば、それはcurrentColorとは別の指定です。線だけの図形ではfillではなくstrokeを使っていることもあります。次に、画像として読み込んでいるかを確かめます。SVGを画像として使う場合の説明も、HTML内のSVGとは区別して読めます。
この例ではimg側の星の中央画素も確認し、赤へ切り替えた後も黒だったことを記録しました。色をまとめて変える図形なら直書きを検討できますが、外部SVGが必要な画像まで全部書き換える決まりではありません。作者のSVGを変更・再配布する場合は、その素材の利用条件も確認してください。
2026年10月19日、PCと375px幅、ライト・ダークで操作と表示を確認しました。星とHTMLは編集部の自作・CC0です。全ブラウザ、スマホ実機、支援技術での読上げは未確認です。形の縦横比が違う場合はviewBoxの比較記事へ。色だけで状態を伝えない確認は配色の実験も参照できます。