Nov 30 2008 at 11:24am

How to search & replace colours in a vector graphic

Today I wanted to find and replace colours in a vector graphic. The greens weren’t quite what I wanted, but the image was full of gradients that I didn’t want to have to change by hand. Can any vector program search and replace colours? I wasn’t sure, but instead of searching around for one my husband helped me come up with this SVG solution:

Replace colours in a vector graphic

Save your graphic as an SVG. You can use Inkscape, Illustrator, or pretty much any other vector program to do this.
Make note of your “before” and “after” colours as hex values.
Open the .svg file in a text editor. You’ll see some mark-up that looks much like HTML (that’s because SVG an XML specification).
Search for your “before” values and replace with the “after”.
Save.

That’s it! Now, if only Internet Explorer would support SVG so I didn’t have to export these as png’s…

Posted in Design Post a comment

Comments RSS

2 Responses to “How to search & replace colours in a vector graphic”

Andrew November 30th, 2008 at 3:56 pm

Cool suggestion. I didn’t know that other browsers support them. Then again, if we used them instead of graphic formats, we leave the browsers to render them, and we all know how well IE can render pages…maybe it’s best that it doesn’t attempt SVG images.
stelt November 30th, 2008 at 6:36 pm

You can use a fallback mechanism: when the browser used doesn’t support SVG, send it PNG.