Recolor SVGs

What Recolor SVGs does

Recolor SVGs changes the colors inside an existing SVG and nothing else: the shapes, dimensions, and file format stay as they were. To change the size, use Resize SVGs, and to get a PNG or JPG, use SVG To Raster.

Every visible shape gets its own color swatch and opacity slider, so you can restyle one part of a logo or icon and leave the rest alone.

How to use it

1. Select Choose File and pick an .svg file. The preview and color inputs appear at once; there is no convert button.
2. Point at a row such as Path #1 Input to light up its shape in the preview.
3. Pick a new color with the row's swatch and set its opacity with the slider next to it, or use Color All to give every shape one color.
4. Check the Output line for the file name and size, then select Download.

Formats and limits

• Input: one SVG file at a time.
• Output: an SVG with -recolored added to the name, for example logo-recolored.svg.
• Listed shapes: path, circle, ellipse, rect, polygon, polyline, line, text, tspan, and use elements. Content inside defs, symbol, masks, patterns, filters, and similar definitions is left alone.
• Shapes with neither a fill nor a stroke are skipped. If nothing recolorable is found, an error appears in place of the preview.
• Colors are saved as fill, stroke, and opacity attributes on each shape. A fill, stroke, or opacity set in the style attribute of the shape is removed so the new value shows. The rest of the markup is kept.

Settings explained

Shape color swatch

Sets the color of one shape. It goes on whichever of fill and stroke the shape is drawn with, including a fill or stroke set on a parent group, so an outline stays an outline. Lines only get a stroke.

Opacity slider

0 to 100% for that shape. It starts at the shape's own opacity, or at 100% when none is set. A fill-opacity in the file is kept and still applies on top.

Color All

Paints every listed shape with the chosen color in one step. Opacity values are not touched.

Hover Highlight

On by default. Pointing at a row shows that shape in the Highlight Color at full strength. It affects the preview only.

Further reading

• SVG or a raster image - Keep vector artwork editable or export a raster copy with the right dimensions and background.

Privacy

Your SVG is read as text in this tab, edited as a document in memory, and shown as an image for the preview. No copy leaves your computer, and Clear drops the file, its color list, and the output.

FAQ

Why did part of my SVG turn black when I opened it?

Colors are read from the fill, stroke, and style attributes of each shape and its parent groups. A shape colored by a gradient, a pattern, currentColor, or a style block starts at black, and that black is applied at once. Pick the color you want in its row.

Why does a shape ignore the new color?

CSS rules in a style block outrank the fill and stroke attributes this tool writes. Remove that CSS color from the file and open it again.

Related tools

• Image To SVG - trace a PNG or JPG into a one-color SVG you can recolor.
• SVG Viewer and Code Editor - edit the colors in the code by hand.
• Resize SVGs - set new width and height values on an SVG.
• SVG To Raster - export the recolored SVG as a PNG, JPG, WebP, or BMP.
• Image Color Changer - tint a PNG or JPG instead.