How to change the colour of an SVG

Changing an SVG colour sounds like a ten-second job. SVGs occasionally disagree. The colour can come from a fill, a stroke, an inherited value, or a style rule buried in the file. SVG Studio lets you select the artwork, see what is actually painting it, and export a clean result without installing a design application the size of a small moon.

Open SVG Studio

01

Change the visible colour

Open the SVG in SVG Studio and select the shape you want to change. Use Fill for the inside of a shape and Stroke for its outline. If several pieces should change together, select them together or choose their group in Layers.

  1. Open or paste the SVG.
  2. Select the shape or group.
  3. Choose a new Fill or Stroke colour.
  4. Export the edited SVG when it looks right.
The black GRB Labs wordmark selected as a group in SVG Studio, with all seven letter paths highlighted in Layers. — open full-size screenshot in a new tab
Select the parent group in Layers to recolour the whole wordmark together. Select an individual path when only one letter should change.Open full size : Change the visible colour (opens in a new tab)

02

Set an exact fill colour

With the artwork selected, open the Fill swatch in the canvas toolbar. Choose Solid and enter a hex colour for an exact match—we’re using GRB blue, #2C65F6. The selected artwork previews the change immediately. Choose Done to finish, then expand Export and choose Download SVG to save the recoloured file.

SVG Studio’s Solid fill picker displaying #2C65F6, with the selected GRB Labs wordmark recoloured blue. — open full-size screenshot in a new tab
One fill change, every selected letter. The checkerboard shows transparent space; changing the fill does not add a background.Open full size : Set an exact fill colour (opens in a new tab)

03

Why changing the code sometimes does nothing

SVGs have several excellent places to hide a colour. Some files use embedded CSS, inherited colours, gradients, opacity, or currentColor instead of a simple fill attribute. A value elsewhere in the SVG can override the line you changed. SVG Studio resolves the rendered appearance and writes an explicit edit when you change the paint, which helps inherited artwork become self-contained.

04

Keep gradients and transparency intact

A gradient is several colours doing a very convincing impression of one. Select the gradient stop you want to adjust and change its colour or opacity. Exporting from SVG Studio preserves SVG gradients and transparency instead of flattening them into a bitmap.