SVG Color Editor

How to change SVG colours in the browser

Drop an SVG file — or paste the markup — and every distinct colour in it becomes a swatch, sorted by how often it occurs, with the count split into fills and strokes. The scan covers the three places a colour can live: presentation attributes (fill, stroke, stop-color), inline style attributes, and <style> blocks. The counts include all three, so the number next to a swatch is the number of occurrences a swap will actually rewrite, not an estimate. Everything runs in your browser — the file is never uploaded.

Replacing a swatch rewrites that exact value everywhere it appears, whichever of the three forms it takes; beyond the listed properties, the replacement also covers flood-color and lighting-color, so a matching colour inside a filter primitive follows along. Matching is case-insensitive but notation-exact: #FFF and #ffffff are listed separately because they are different strings in the file, even though they paint the same colour. Each swap is a single history step — Undo walks back one change at a time — and the updated markup sits beside the controls, ready to copy or download.

Where colour hides in an SVG

The three homes matter because different editors use different ones. Hand-written icons usually carry fill attributes; Illustrator and Inkscape exports often route everything through a <style> block of classes tucked into <defs>; inline style attributes turn up on anything that has been through a DOM. A text-editor find-and-replace only works when you already know which form the file uses and which spelling — the same red can be written #f00, #ff0000 or rgb(255,0,0), and each is a separate string. The swatch list is built from what is actually in the file, which sidesteps the guessing. Gradients paint through the stop-color of their stops, and those stops are listed and counted here as fills. Deliberately not listed: none, currentColor, url() references to gradients, and named colours like black — only hex, rgb() and hsl() literals become swatches.

One swatch, every swatch, or currentColor

There are three ways to recolour. Per swatch: pick a replacement next to any listed colour and swap that value alone — the way to work through a rebrand, palette entry by palette entry. All at once: choose one target and Apply to all flattens every listed colour to it, which is how a multicolour drawing becomes a single-tone stamp or silhouette. And Convert all to currentColor replaces every listed value with the inherited keyword in one click — the step that turns a fixed-colour icon into one that follows your CSS. The toast after each operation reports how many occurrences changed, a quick check that the file matched what the list promised.

currentColor: one icon, any theme

currentColor is the value of the CSS color property, inherited from wherever the SVG sits. An icon whose fills are currentColor follows its surroundings with no extra rules: it matches the button text next to it, changes on hover and focus because the text does, and survives a dark-mode switch untouched. That is why the conversion is the standard last step before an icon becomes a component or joins a sprite. It is also total by design — every listed colour becomes the one inherited value, so a two-tone icon comes out one-tone. For icons that need an accent, keep the second tone on a CSS custom property instead; the guide to changing SVG colours with CSS covers that pattern and the places where inheritance breaks.

When to use it

Rebranding an icon or illustration without opening a vector editor — work down the swatch list swapping each entry in turn. Normalising a file where the same grey somehow appears in five spellings — replace each variant with one canonical value and watch the list collapse as you go. Preparing an icon for componentisation, where currentColor does the theming. And baking literal colours in before rasterising: the SVG to PNG converter's rasteriser has no page for currentColor to inherit from, so an inherited-colour icon exports black — swap in a real colour here first, export, then convert back.

Common problems

• "Nothing matched." The colour is written in a different notation than you typed — rgb(), short hex, a named colour. Pick from the swatch list rather than typing a value from memory; the list is what is actually in the file.
• Two swatches look identical. They are the same colour in two notations, or an upper- and lowercase pair. Swap both to the same target and they collapse into one.
• A colour you can see is missing from the list. It is a named colour like black or red — the scanner lists only hex, rgb() and hsl() literals plus gradient stops. Rewrite named colours in the editor's markup panel; gradient stops are already listed individually.
• The icon still doesn't change on your page. If the file already paints with currentColor, its rendered colour comes from your page's CSS, not from the file — the file was never the problem.
• currentColor flattened a two-tone icon. Converting everything to one inherited colour is exactly what the button does. Undo, then keep the accent on a CSS custom property — the pattern is in the guide.
• You need the same icon in several colours as a background image. CSS backgrounds cannot inherit, so bake one copy per colour here before encoding each with the data URI tool — or use its mask technique and skip the copies.