How to Change Color in SVG File?

In SVG, color is set through special attributes:

• fill — fill color
• stroke — outline color

Changing Color in SVG File Itself

Color can be specified directly inside SVG:

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

Changing Color via CSS

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

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

Using currentColor

currentColor inherits text color from parent:

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

Changing Color in External SVG

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

Solution:

• Load SVG inline
• Use <object> or <use> with <symbol>
• Use CSS variables in SVG