Upload an SVG, flip its colors, preview the result, and download an inverted SVG or PNG.
This tool runs in your browser. Files never leave your device.
Practical details
The tool reads parseable colors in direct SVG attributes and inline style declarations. It can change fill, stroke, color, gradient stop colors, and supported flood or lighting effect colors. Values such as none, transparent, and currentColor are left alone.
Fill paints the inside of a shape and stroke paints its outline. Their controls are independent, so you can invert a filled icon, an outline icon, or both. Turning black artwork white is usually better handled with strict black-and-white mode than with full inversion of every color.
Changing a shape's color does not fill transparent canvas space. Keep the background transparent for an asset that should sit on the page background, or deliberately add the optional white rectangle when the downloaded file needs its own solid backdrop.
The SVG download keeps editable vector markup with the changed color values. The PNG download renders that result to a browser canvas at the SVG's natural dimensions, so it is a fixed-size raster image rather than a vector file.
This original example uses a dark blue fill and a warm outline. Full RGB inversion subtracts each red, green, and blue channel from 255; the geometry and transparent background stay unchanged.
<circle fill="#123456" stroke="#f0c080" cx="32" cy="32" r="24"/><circle fill="#edcba9" stroke="#0f3f7f" cx="32" cy="32" r="24"/>If the goal were only to make pure black artwork white, strict black-and-white mode would avoid changing unrelated colors like the outline.
Invert SVG Colors reverses parseable direct color values in SVG attributes and inline styles. Use full inversion for a color negative, or limit the change to pure or near-black and white artwork when preparing a monochrome icon for a different background.
Upload an SVG, choose full or black-and-white inversion, and control fills, strokes, and supported effect colors separately. Preview the result, then download the edited SVG or a rendered PNG. The SVG content is processed in your browser.
Choose a targeted black-to-white edit instead of reversing every color.
Decide when to recolor, fully invert, or use CSS on a dark surface.
Compare a reversible browser effect with a saved file edit.
Handle interiors, outlines, gradients, and inherited paint separately.
It inverts supported direct color attributes and inline style values. Colors from classes, style elements, CSS variables, currentColor, unsupported color formats, or embedded raster images are not rewritten.
Fill changes shape interiors; stroke changes outlines. You can enable either control or both.
Values such as none and transparent, plus separate opacity attributes, are left unchanged. Hex colors that include an alpha channel are rewritten as six-digit colors, so preview those files carefully.
No. The SVG download keeps vector markup; the PNG is a fixed-size canvas rendering.