SVG guide
How to Invert SVG Fill and Stroke Colors
SVG shapes can paint their interiors and outlines independently. Inverting only one of those channels may be intentional, or it may leave half of an icon unchanged.
Fill and stroke are independent paint channels
A filled circle can have no stroke, while a line usually depends entirely on stroke. Some icons combine a light fill with a dark outline. Preserve fill="none" when the inside is meant to stay transparent.
<!-- Before -->
<circle fill="#102030" stroke="#f0e0d0" cx="12" cy="12" r="9"/>
<!-- RGB channel inversion -->
<circle fill="#efdfcf" stroke="#0f1f2f" cx="12" cy="12" r="9"/>How RGB inversion is calculated
For each channel, subtract the original 0–255 value from 255. In the example, #10 becomes #ef, #20 becomes #df, and #30 becomes #cf. This is full mathematical inversion, not a contrast check or a brand-color recommendation.
Gradients and effects use other properties
Gradient stops commonly use stop-color. Filter primitives can use flood-color or lighting-color. An inverter must explicitly support those properties; changing a path fill does not automatically rewrite every color referenced by a gradient or effect.
Why a color may not change
The color may come from a class in a style element, an external stylesheet, a CSS variable, currentColor, an unsupported color syntax, or an embedded raster image. Inspect the source in an SVG viewer or editor to find where the final paint is defined.
Apply this to your file
When you are ready to work on the asset, use FreeProTool to invert fill and stroke colors.
Related SVG guides
Turn black SVG artwork white by editing its fill and stroke values, with examples for inline SVG, files, and mixed-color artwork.
Compare CSS filter invert() with permanent SVG color edits, including output, reuse, transparency, and multicolor behavior.