SVG guide
CSS filter invert() vs Editing SVG Colors
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.
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 SVG 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.