From SVG to Multiple PNGs

In my last blog entry, I explained how I converted my original company logo in JPG format to SVG. That's sort-of like reverse-engineering to get the source code. Now that I have my logo in SVG format, I can more easily manipulate it and create custom derivations for specific purposes.

For example, the background color theme of this blog site does not lend itself well to the default black color of the logo. It's quite simple to add a color attribute to the XML elements of an SVG file but if there are many, that will get tedious. Since my logo is all one solid color, there's a simple way to do this.

The SVG file format has "g" command to group other commands. You can then add attributes there and reference them in the sub-commands; the color attribute of the g command sets a default color for all the grouped elements:

<g transform="translate(0.000000,310.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none" color="#f26c4f">
<rect x="1340" y="2800" width="277" height="277" fill="currentcolor" />
<rect x="2007" y="2703" width="277" height="277" fill="currentcolor" />
</g>

If I need another color version of this logo, I can simply modify the color attribute of the g command and all the grouped elements that reference currentcolor will get updated. Then I can convert the SVG to a PNG for as many different colors as I need.

Sweet!