About Compare All Tools

SVG Color Editor

Find and replace every color in your SVG across all elements at once.

SVG color replacement

Edit SVG colors — find, replace and recolor every fill and stroke.

Paste SVG code, upload a file or try the built-in sample. The palette panel lists every color found in the SVG. Click a swatch to pick a new color, then apply changes individually or all at once. Everything runs locally — no upload, output is editable SVG markup.

Local only SVG output Smart match Palette view
Drop an SVG file here or paste SVG markup into the input editor below.
Detected colors—
Changed colors—
Total replacements—
Output size—
Status—
Preview

Original vs edited SVG preview

Original SVG No SVG

Paste SVG markup or try the sample to preview the source.

Edited SVG Waiting

Analyze colors and apply changes to preview the result.

Processed locally Colors: — Gradients: — currentColor: — CSS variables: — Scripts: — Events: — Output: —
Input

SVG markup

Paste a complete SVG document or inline SVG element. All fill, stroke and gradient colors are detected automatically.

Output

Recolored SVG

The recolored SVG markup appears here after applying color changes. Copy or download using the buttons above.

How It Works

SVG Color Editor scans the SVG markup for every color value across all presentation attributes — fill, stroke, stop-color, flood-color, lighting-color and color — as well as inline style declarations on any element. It normalizes each value to a canonical hex form so that equivalent tokens like #f00, #ff0000 and rgb(255,0,0) are recognized as the same color. The palette panel lists every unique color with its usage count. For each color you can type or pick a replacement, then click Apply to update the markup in place. A live preview shows the result alongside the original. Special keywords such as none, transparent and currentColor are detected and shown in the palette but are not replaced. CSS variables are detected and flagged. The output is standard SVG markup — no rasterization, no upload, no server round-trip.

Use Cases

  • Rebranding an SVG icon set by replacing a primary brand color across every icon in a single operation before updating a component library
  • Swapping a dark-theme color palette to a light-theme version by replacing each dark fill and stroke with its light equivalent
  • Correcting an incorrect color applied to a gradient stop that came through wrong from an export, without opening the original design file
  • Replacing placeholder colors in a template SVG illustration before delivering it to a client who has provided final brand hex values
  • Auditing an SVG for every unique color to identify inconsistencies before normalizing the palette to a defined set of design tokens

FAQ

What color formats does SVG Color Editor support?

SVG Color Editor supports all standard SVG and CSS color formats: six-digit hex (#rrggbb), three-digit shorthand hex (#rgb), eight-digit hex with alpha (#rrggbbaa), four-digit shorthand hex with alpha (#rgba), rgb(), rgba(), hsl(), hsla(), and all CSS named colors. The keywords none, transparent and currentColor are detected and shown in the palette but are not replaced. CSS variables (var(--x)) are detected and flagged as non-editable in this version.

Does SVG Color Editor upload my file?

No. Every operation runs entirely in your browser. Your SVG file is never sent to any server. The DOMParser API reads the markup locally, color values are extracted and replaced in memory, and the output is generated client-side using XMLSerializer.

What is Smart Match and when should I use Safe Replace instead?

Smart Match normalizes color values to a canonical hex form before comparing them, so rgb(255,0,0), #ff0000 and #f00 are all treated as the same color and replaced together. This is the default and handles real-world SVGs where the same visual color may appear in multiple syntactic forms. Safe Replace only matches and replaces the exact token string as it appears in the source markup, which is useful when you need surgical precision and do not want equivalent-but-differently-written colors to be affected.

Why are none and transparent shown in the palette but not editable?

none and transparent represent the intentional absence of a color value. Replacing them with a hex color changes the structural meaning of the SVG — for example, a fill: none on a path means the path has no fill, not that it has a default fill. Replacing it without understanding the context could break the intended appearance. These values are displayed so you are aware of their presence, but editing them is out of scope for a color replacement tool.

Can I replace gradient stop colors?

Yes. SVG Color Editor detects stop-color attributes on gradient stop elements and includes them in the palette. Applying a replacement updates those stop-color values in the output markup. The signal strip shows whether gradients are present so you know to check the palette for stop colors.

What does Apply all changes do?

Apply all changes applies every replacement you have configured in the palette — all colors that have a non-default value in their input field — to the source SVG in a single pass. It is equivalent to clicking Apply on each individual color card. If you have not set a replacement for a color, that color is left unchanged.

Can I undo a color change?

Yes. Each color card has a reset arrow button that reverts that specific color's replacement and rebuilds the output from the source. Reset all changes clears every replacement and restores the output to the original source markup. The original SVG markup is kept in memory for the entire session as long as you do not clear the input or load a new file.