SVG guide
CSS filter invert() vs Editing SVG Colors
By Laramie Williamson ·
CSS filter: invert() changes how an element is painted in the browser. Editing the SVG changes the actual color values stored in the asset. Both can reverse colors, but they solve different problems.
What CSS invert() does
The filter is applied to the rendered element after its SVG colors have been resolved. invert(1) performs full inversion; values between zero and one blend toward that effect. The source SVG file does not change.
- Easy to toggle with a class or media query.
- Affects the complete rendered result, including all colors.
- Does not produce a newly edited SVG download.
.icon--inverted {
filter: invert(1);
}What editing SVG colors does
Editing replaces paint values such as fill, stroke, and gradient stop colors in the markup. The result travels with the file and works wherever that SVG is supported, without relying on a page-level CSS filter.
What full inversion looks like
Both approaches on this page produce the result below: the CSS filter renders it, editing the file bakes it in. Either way it is worth seeing what inversion does before you choose it. Every colour moves, so a dark card turns cream and a pink dot turns green. For a one-colour diagram that is exactly the effect you want. For anything carrying brand colours it is why a targeted edit, covered above, is usually the better route.
Original palette
Every fill and stroke reversed, brand colours included
Choose based on control and destination
A CSS filter is convenient for a one-color icon already displayed on a website. A saved edit is better for uploads, design handoffs, email assets, or any destination where your CSS is unavailable. Neither method turns a multicolor illustration into a carefully art-directed dark theme by itself.
Transparency and output
Transparent pixels remain transparent under CSS inversion. Direct SVG edits can also leave none, transparent, and opacity settings untouched. If you export a PNG after editing, the PNG is raster output at a fixed pixel size; the edited SVG remains vector markup.
Apply this to your file
When you are ready to work on the asset, use FreeProTool to edit the SVG's stored colors.
Related guides
Prepare an SVG for a dark background by choosing between targeted recoloring, full inversion, and CSS, without losing transparency.
Invert SVG fill and stroke colors separately, understand inherited paint, and handle gradients and inline styles accurately.