SVG Color Editor, Recolor SVG Online with Live Swatches
Paste or drop an SVG and every color it uses (fills, strokes, gradient stops and inline styles) is pulled into a swatch list you can recolor with a picker or a hex field. The preview updates as you type, so you can rebrand an icon, retheme an illustration or convert a mark to currentColor in seconds. 100% client-side, never uploaded.
What is the svg color editor?
The SVG Color Editor detects every fill, stroke, gradient stop and inline-style color in an SVG and lists them as clickable swatches you recolor with a picker or hex field. Bulk-replace, swap to currentColor, and watch the live preview update, then export. Free and fully client-side, nothing is uploaded.
The GigAI SVG Color Editor turns the tedious job of recoloring vector art into a point-and-click task. Under the hood it parses your SVG the way a browser does, walking every element to collect the colors that actually paint pixels, fill and stroke attributes, gradient stop-colors, flood-colors and colors buried in inline style attributes, and de-duplicates them into a clean swatch list. Each swatch shows the original token, how many times it appears, and where it's used, so you always know what a change will touch. Click a swatch to open a native color picker or type a hex value, and the tool rewrites every matching occurrence in place while the checkerboard preview re-renders instantly. Because the remap is token-based rather than a blind find-and-replace, it respects the exact color strings in your file and won't corrupt IDs, class names or unrelated markup. Beyond one-at-a-time edits you can shuffle a palette for quick exploration, swap every color to currentColor so an icon inherits its parent's text color, invert or desaturate the whole set, and reset any swatch (or all of them) back to the original in one click. Full undo/redo means you can experiment fearlessly. When you're happy, copy the recolored SVG, download it as a.svg, or export a PNG rendered right in your browser. Nothing is uploaded: brand palettes, unreleased logos and internal icon sets are parsed and recolored entirely on your device, and close the tab and every trace is gone.
- Difficulty:
- Easy
- Typical time:
- ~10s
- Processing:
- 100% browser processing
Last updated
How to use the svg color editor
- 1
Add your SVG
Paste markup, drop a .svg file anywhere on the workspace, or load a sample. The tool immediately lists every color it detects as a swatch.
- 2
Remap the colors
Click any swatch to open a picker or type a new hex value. Every matching occurrence updates and the preview re-renders as you go.
- 3
Try palette actions (optional)
Shuffle for ideas, swap the whole file to currentColor, invert or desaturate: then fine-tune individual swatches, undoing anything you don't like.
- 4
Copy, download or export PNG
Copy the recolored SVG, download it as a.svg, or export a PNG rendered in your browser. Reset any swatch, or all of them, back to the original at any time.
What SVG Color Editor includes
Every color, auto-detected
Parses the whole document to find each distinct color that paints a pixel (fills, strokes, gradient stops, flood-colors and colors hidden in inline styles) and lists them as clean, de-duplicated swatches.
Pick or type a new value
Click a swatch for a native color picker or type any hex, rgb or named color into the field. Every matching occurrence is rewritten in place and the preview updates the moment you change it.
Live checkerboard preview
The recolored SVG renders live on a transparency-aware checkerboard beside the swatches, so you can judge the new palette against real transparency instead of guessing from hex codes.
Palette-wide actions
Shuffle for quick exploration, swap the whole file to currentColor so an icon inherits text color, invert or desaturate every swatch, and reset a single color or the entire palette in one click.
Token-accurate remap
Colors are replaced by exact token, not blind find-and-replace, so IDs, class names, path data and unrelated markup are never corrupted, only the color values you chose actually change.
100% client-side
Parsing, recoloring and PNG export all run on your device. Brand palettes, unreleased logos and internal icon sets are never uploaded, stored or logged.
Why use our svg color editor
Rebrand an icon set in minutes
Point a whole icon or logo at your new brand palette by remapping a handful of swatches, instead of hunting through markup for every fill and stroke by hand.
Ship theme-ready, currentColor icons
Convert a multi-color mark to currentColor in one click so it inherits the surrounding text color and works in both light and dark mode without a second export.
Explore palettes without fear
Shuffle, invert and desaturate to try directions fast, with full undo/redo and per-swatch reset. Nothing is destructive until you copy or download.
No design tool, no upload
Get precise, per-color control without opening Illustrator or Figma, and without sending a confidential logo to a third-party recoloring service.
Built for the way you work
From quick one-off fixes to daily workflows, see how people put this tool to use.
- Brand / Marketing designer
Recolor a logo to a new palette
Drop in an exported logo and remap each brand color to the updated palette, checking the result on the checkerboard before handing the SVG back to the team.
- Frontend developer
Convert an icon to currentColor
Take a two- or three-color icon and swap every color to currentColor so it inherits text color and looks right in both light and dark themes with a single asset.
- UI / Product designer
Theme an illustration
Retint a spot illustration to match a feature's accent color by remapping its dominant fills, without reopening the source file in a heavy design tool.
- Design systems engineer
Normalize stray colors
Spot off-palette one-off colors an export slipped in, the swatch list surfaces every value with its usage count, and snap them onto your token colors.
Supported formats
Accepts SVG, and produces SVG and PNG, all processed locally in your browser.
- SVG
- SVG
- PNG
Frequently asked questions
Recommended tools
SVG Editor
Edit SVG code with an instant live preview: type in the source pane and watch it render, then Format, Optimize or Minify in one click. A live inspector counts elements, colors and features, all in your browser, nothing uploaded.
SVG Optimizer
Minify and clean SVG files in your browser with SVGO, strip editor metadata, round coordinates, drop hidden layers and see the exact bytes and percentage saved. Nothing is uploaded.
SVG to React
Convert SVG to a clean React component in your browser, camelCased attributes, TypeScript or JS, memo, forwardRef and React Native output, with a live preview. Nothing is uploaded.
SVG Viewer
Open, paste or drop an SVG to view it on a checkerboard, light or dark canvas with zoom, live dimensions, a source-code pane and a full element/color report: 100% in your browser, nothing uploaded.
Image Compressor
Shrink JPG, PNG and WebP images without a visible quality drop. Set the quality yourself, or compress to an exact target size like 100 KB. Free, entirely in your browser.
SVG Path Editor
Edit an SVG path d-string with a live outline preview, anchor and control-point overlays, a command-by-command breakdown, and one-click absolute/relative normalisation: all in your browser, nothing uploaded.
Comparisons & guides
Go deeper on the concepts behind the svg color editor.
Common problems, solved
Hit a snag? Here are quick fixes for the issues people run into most.
A gradient didn't change when I edited a swatch.
Gradients are painted through their stop-colors, so edit the gradient stop swatches (they appear in the list) rather than the shape's fill, which is a url(#id) reference and carries no color of its own.
My color shows once in the list but the shape has many parts.
That's expected. Identical colors are de-duplicated into a single swatch, and its count reflects how many places use it. Editing that one swatch recolors every occurrence at once.
Swapping to currentColor made the icon disappear.
currentColor inherits the parent's text color, so on a same-colored background the icon becomes invisible. Set a color on the surrounding element (or the preview shows it fine on the checkerboard). This is how theme-ready icons are meant to work.
No swatches appeared after I pasted my SVG.
The file may only use url(#…) gradient fills, inherit colors, or not be well-formed SVG. Check that it starts with an <svg> tag. If it's all gradient references, edit the gradient stops, which do carry colors.
Get the most out of it
Watch the usage count on each swatch: the highest-count color is usually the one that defines the artwork's overall look.
Swap to currentColor for anything you'll inline in a themed UI so one asset works in light and dark mode.
Use Shuffle to explore palette directions fast, then reset and dial in the two or three swatches that matter by hand.
Recolor before converting to a React component or a data-URI so the embedded markup already carries your final palette.
Reset a single swatch instead of the whole palette when only one experiment went wrong. The per-swatch reset keeps the rest of your edits.
What's new
Recent updates and improvements to the svg color editor.
Initial release, automatic color detection across fills, strokes, gradient stops and inline styles, per-swatch picker/hex remap with a live checkerboard preview, copy, download, PNG export, undo/redo and shareable links.
Added palette-wide actions (shuffle, swap-to-currentColor, invert and desaturate) plus per-swatch and full-palette reset and usage counts on every swatch.
Keep exploring
Problems we solve
Definitions
From the blog
Explore categories
Compare formats
By file type
Common tasks
Your privacy is built in
Your SVG is parsed and recolored entirely in your browser. It is never uploaded to any server. Color detection, remapping and PNG export all run locally, so nothing is stored, logged or transmitted and you can safely recolor unreleased logos, brand marks and internal icon sets. Close the tab and every trace is gone.
- Runs in your browser
- No uploads
- Nothing stored
Ready to try the svg color editor?
Free, private and instant. SVG Color Editor runs right in your browser.