SVG Color Swapper
Paste SVG markup, see every color as a swatch, and replace any of them instantly — the preview updates live as you pick. Runs entirely in your browser.
Where are colors detected?
Colors are extracted from SVG presentation attributes — fill, stroke, stop-color, flood-color, and lighting-color — as well as the same properties in inline style attributes. Named colors (red), shorthand hex (#f00), and rgb() values are all normalized and deduplicated before display.
Frequently Asked Questions
What happens to currentColor and none?+
currentColor, none, transparent, and inherit are intentionally skipped — they are not concrete colors and cannot be meaningfully replaced with a color picker. They are preserved unchanged in the output.
Will it replace colors inside <style> blocks?+
No — only presentation attributes and inline style attributes are modified. Colors defined in <style> elements or external stylesheets are not detected or replaced. Inline the styles first if your SVG uses a <style> block.
Is my SVG sent to a server?+
No. All color extraction and replacement happens in your browser using the DOM parser and Canvas API. Your SVG markup never leaves your device.
Why are CSS variables and currentColor not swappable?+
CSS custom properties (var(--color)) and currentColor are resolved at render time from the document's cascade — they are not stored as literal color values in SVG attributes. The color extraction reads presentation attributes and inline styles only; values that don't exist as concrete hex or RGB strings cannot be shown as swatches or replaced.
Related Tools
How to use
- Paste your SVG markup — every unique color appears as a swatch instantly.
- Click any swatch to open a color picker and replace that color across the entire SVG.
- The preview updates live as you pick.
- Click Reset colors to revert all changes, or Copy Modified SVG when done.