Find and replace colors in SVG source code

Replace selected SVG fill or stroke colors without changing its geometry.

freeworks offlinenothing uploaded
ToolSVG Color Changer
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Selected fill, stroke, or CSS presentation values are replaced in the SVG element and style tree while geometry and paint order remain unchanged. Inherited values and currentColor can make the visible color come from an ancestor rather than the element itself.

  • SVG separates geometry from paint properties, enabling recoloring without coordinate edits.

Worked example

Recolor a red circle
Input
											Input: <svg xmlns="http://www.w3.org/2000/svg"><circle fill="#ff0000" cx="5" cy="5" r="5"/></svg>
From color: #ff0000
To color: #0000ff
Output
												<svg xmlns="http://www.w3.org/2000/svg"><circle fill="#0000ff" cx="5" cy="5" r="5"/></svg>

When to use this

Icon themes, brand migrations, and light/dark component previews recolor SVGs.

Edge cases

  • A CSS rule can override a presentation attribute.
  • currentColor follows the surrounding text color.
  • Gradients and masks need stop or mask edits rather than one fill replacement.

References