Change SVG color

Recolour an SVG without touching a line of code. Click any shape, pick a fill or stroke colour, or select everything and change it all at once.

Drop an SVG here

or

Start from blank

Your file never leaves your device — it opens locally in your browser.

Without editing the code

The usual advice for recolouring an SVG is to open it in a text editor and hunt for fill="#..." attributes. That works until the colour is set in a <style> block, or on a parent group, or via a CSS class, or the file has three hundred paths. Then it stops being worth it.

Clicking the shape and picking a colour sidesteps all of that. What you select is what changes, regardless of how the original file happened to declare its colours.

Fill and stroke are different things

A shape has a fill (the area inside it) and a stroke (the outline around it), and they carry separate colours. If you recoloured something and part of it stubbornly stayed the old colour, you almost certainly changed one and not the other.

Matching an existing colour exactly

Use the eyedropper. It samples any colour visible on the canvas — including from a placed raster image — and applies it to whatever you have selected. That is the reliable way to match a brand colour you can see but do not have the hex code for.

Keep it vector

Export as SVG to keep everything editable and infinitely scalable. If you need a raster copy for something that will not take an SVG, export a PNG as well and keep the SVG as your master.

How to change the colour of an SVG

  1. Open your SVG. Drop the file above. It opens on the canvas with every shape individually selectable.
  2. Click the shape you want to recolour. Click any element to select it. To grab one shape inside a group, use Direct Selection (A) to reach it without ungrouping.
  3. Set the fill colour. Use the Fill swatch to open the colour picker. Enter a hex value, pick from the spectrum, or use the eyedropper to sample a colour already in the artwork.
  4. Set the stroke colour. Strokes are separate from fills. Switch to the Stroke swatch to change the outline colour, or set it to none.
  5. Recolour everything at once. Select several shapes together — or press Ctrl/Cmd+A to select all — and apply one colour to the whole selection in a single click.
  6. Export. Save as SVG to keep it editable, or export PNG, JPG or PDF.

Common questions

How do I change the colour of an SVG?

Open the SVG, click the shape you want to change, and set a new colour with the Fill swatch. You can enter an exact hex code or sample an existing colour with the eyedropper.

Can I change the colour of the whole SVG at once?

Yes. Select all objects (Ctrl/Cmd+A) or shift-click several shapes, then apply the colour once — it is applied to everything selected.

Why can I not select one shape inside my SVG?

It is probably inside a group. Use the Direct Selection tool (A) to click straight through to the individual shape without having to ungroup anything.

Can I change colours without editing SVG code?

Yes — that is the point of this page. You click the shape and pick a colour. No XML, no hunting for fill attributes by hand.

Can I copy an exact colour from elsewhere in the image?

Yes. The eyedropper samples any colour on the canvas, including colours inside a placed image, and applies it to your selection.

Does it work on strokes as well as fills?

Yes. Fill and stroke are edited separately, so you can recolour an outline without touching the fill and vice versa.

Other things you can do