When an SVG needs a pass through here
- An icon downloaded from a free library is black and has to match your brand colours before it goes in the layout.
- One icon set needs a light and a dark variant with colours that stay consistent.
- An export from a design app is stuffed with editor metadata and comments, several times larger than the drawing itself.
- The SVG is going to be inlined into HTML or a component, where every stray attribute lands in version control.
- An SVG arrived from an unknown source and you want the executable parts stripped before it goes near your site.
Three steps to a recoloured SVG
- Upload an SVG file, or switch to "Paste code" and paste its markup.
- Every colour used in the drawing shows up on the left. Click a swatch or type a hex value, and the preview on the right updates immediately.
- Press "Download SVG" to save the result, or "Copy SVG code" to use it elsewhere.
Not sure what to try first? Press "Load sample" to bring in a small demo icon.
How colours are found
An SVG's colours can live in three places: a fill/stroke attribute, an inline style="fill:…", or a rule inside a <style> block selected by a CSS class — the last one is common in files exported from Illustrator or Figma. This tool finds a colour no matter where it is written and lists it as a swatch on the left. Changing a swatch layers an inline style on top of whatever set the colour originally, rather than rewriting the attribute or the <style> rule text directly, so the old hex value can still be visible in the raw markup — the colour that actually renders, and the one saved to the downloaded file, is the new one.
Colours defined inside gradients or patterns (things like <linearGradient> or <pattern>) are out of scope and get skipped — the panel on the left notes how many were left untouched.
What the optimizer removes, and what it leaves alone
This step always runs and cannot be turned off. Everything it removes is invisible in the rendered image:
- Every comment (
<!-- -->). <metadata>, plus editor-specific namespaced elements and attributes left by tools like Inkscape or Illustrator.- Empty groups with no content and no attributes.
- Whitespace used only for indentation. Text that is actually meant to be displayed is left alone.
This is not an SVGO-level minifier: it does not touch path coordinate precision, and it does not re-minify the rules inside a <style> block. If you need the smallest possible file, this tool will not get you all the way there.
Uploaded content is sanitised first
This step also always runs. An SVG can legally embed a <script>, event attributes like onload, or <use>/<image> references pointing at an external URL — any of which can run code or quietly make a network request once a browser parses the file. This tool strips all of that during parsing, so even an SVG from an untrusted source is treated as plain image data and never executes anything.
Does anything you upload or paste leave the browser
No. Parsing, recolouring, optimising and sanitising all happen in your browser, no request carries the content anywhere, and the downloaded or copied file is assembled on your own machine. See the privacy policy for the details.
Frequently asked questions
- Can I change colours inside a gradient?
- No. Colours defined inside gradients and patterns are out of scope, and the tool tells you how many were skipped.
- Why does the old hex value still show up in the downloaded file?
- Recolouring layers an inline style on top of the original definition rather than rewriting the attribute or style rule text, so the old text can remain — the colour that actually renders is the new one.
- Does optimising simplify the path data?
- No. The optimizer only removes comments, metadata, editor attributes and layout whitespace — it never touches coordinates or path commands.
- Can I process several SVG files at once?
- No, one file at a time. Download the result, then upload the next one.
- Is there a file size limit?
- Yes, 2 MB. Typical icon and illustration SVGs are far smaller than that.