How to change color in svg file?

In SVG, color is set through special attributes:

Changing Color in SVG File Itself

Color can be specified directly inside SVG:

html

<svg>
  <circle fill="red" stroke="blue" />
</svg>

If SVG is inline (inside HTML), you can style it with CSS:

css

svg circle {
  fill: green;
  stroke: black;
}

currentColor inherits text color from parent:

html

<div style="color: blue;">
  <svg>
    <path fill="currentColor" />
  </svg>
</div>

If SVG is loaded via <img>, color cannot be changed with CSS.

Solution:

Tip:

Use currentColor for icon systems — icons will automatically inherit text color.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?