svgby garagemade

Change the colours in an SVG

svgby garagemade
0,0browser-local
Drop an SVG to start
or pick a sample on the home page
Open in the full editor

Most online SVG colour changers work one colour at a time: pick a shape, pick a colour, repeat. That is fine for a two-tone icon and painful for an illustration with fifteen fills. This reads the whole file first, lists every distinct colour in it, and lets you remap them together in one pass — then still lets you select a single shape and repaint just that, when that is what you want.

How to change SVG colours

  • Load your SVG above, or edit the sample. It stays on your device.
  • Choose Recolor all to see every colour the file uses.
  • Set a replacement next to any colour, and apply the map.
  • Or select one shape and edit its fill and stroke in the inspector.

Replace all colours in an SVG in one pass

Recolor all scans every fill and stroke and groups them by value, so equivalent notations collapse into a single row instead of appearing three times. You get the file's real palette, not a list of elements. Set new values beside the ones you want changed, leave the rest alone, and apply: every matching paint in the document updates together, and the whole remap counts as one undo step. Rebranding an icon set to a new palette is the case this is built for.

Per-element recoloring

For finer work, select any shape on the canvas or in the elements tree. The inspector shows its fill and stroke, its stroke width, and its opacity. Each row in the elements list carries a live swatch of that element's colour, which makes finding one shape among forty a matter of scanning a column rather than clicking through the artwork.

Gradients, opacity and inherited fills

A gradient is a colour too. Switch any fill or stroke to a gradient and edit it stop by stop — colour, position, and per-stop opacity, linear or radial. Files exported from design tools often define a gradient once and point several shapes at it; those references resolve to their real colours here rather than showing a placeholder. Shapes that inherit a fill from a parent group are resolved the same way, so the colour field shows what the shape paints with instead of appearing empty.

Recoloring the file, or recoloring it in CSS

There are two ways to change an SVG's colour and they solve different problems. A CSS filter or a fill rule recolours at display time, which suits an icon that should follow the theme it sits in, but it needs the SVG inlined in the page and it cannot address one shape inside a multi-colour illustration. Editing the file changes the asset itself, so the new palette travels with it into a PNG export, a design tool, or a teammate's hands.

Then export it

Save the recoloured file as SVG, with an optional optimisation pass, or render it straight to PNG, JPG or WebP at up to 4x. Everything happens in your browser, so the file you recolour is the file on your disk and nothing is uploaded to make the change.

Frequently asked questions

Can I replace all the colours in an SVG at once?
Yes. Recolor all reads the file, lists every distinct colour it finds, and lets you set a replacement beside each one. Applying the map rewrites every matching fill and stroke across the document in a single step.
Can I recolor a single shape instead?
Select it on the canvas or in the elements list and set its fill or stroke in the inspector. The change affects only that element, and the elements list shows a live colour swatch for every shape so you can find the right one.
Does it handle gradients, or only flat colours?
Both. A gradient fill opens a stop editor where you can change each stop's colour, its position, and its opacity, and switch between linear and radial. Flipping a paint between solid and gradient keeps the colours you had.
Why does a shape look coloured on canvas but blank in the colour field?
It probably inherits its fill from a parent group rather than setting one itself. The inspector resolves that inheritance and shows the colour the shape actually paints with, so you edit what you can see.
Two colours look identical but are listed separately. Why?
They are matched by value, not by appearance, so #ff0000, red and rgb(255,0,0) collapse into one entry — but a colour that differs by a single digit is genuinely a different colour and stays separate.
Can I undo a recolor if I dislike the result?
Yes. Every recolor is one undo step, whether it changed two colours or twenty. Press Ctrl+Z, or Cmd+Z on a Mac, and the previous palette returns.
Where is my file while I am recoloring it?
In this tab and nowhere else. The SVG is parsed and edited by the page itself, so recoloring an unreleased logo involves no upload and leaves no server-side copy behind.

Related tools