From JPG to SVG

I've been hearing a lot about SVG, or Scalable Vector Graphics, lately and how much better they are than bitmap formats such as JPG or PNG for icons or simple images because they scale up or down to fit the plethora of devices we use today. There are still use cases for bitmaps and you should know the difference and when to use each format but I got to thinking about the many ways I could utilize this technology--starting with converting my company logo.

The logo I had designed for my business back in the 1990s is a combination of square blocks and the curves of a human head, representing various components that fit together to create a user-friendly solution. The final product was delivered as a JPG file which was the common web format then and worked great for small differences in size but as I scale the image up or down in greater amounts, I have to tweak the image a little--and it never looks as good as the original. Learning about SVG, I looked for a tool to convert my JPG to SVG--there are many free online tools, I chose the first one and soon had my logo as a converted SVG file.

If you've read about SVG formats, you know it's a text file with XML commands describing how the rendered image should look. There are commands for circles, rectangles, lines, and among many other commands, a general "path" command that defines any arbitrary shape. I hoped that the converter would detect the blocks and put in rectangle commands but alas, they ended up with path statements that looked pretty good to the naked eye at the original resolution but when scaled up, revealed little imperfections I just had to fix.

After some trial and error, I changed the path statements to rect statements and ended up with the new SVG version of the logo--which looks great at any resolution:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="310.000000pt" height="310.000000pt" viewBox="0 0 310.000000 310.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,310.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<rect x="1340" y="2800" width="277" height="277"/>
<rect x="2007" y="2703" width="277" height="277"/>
<rect x="1006" y="2200" width="277" height="277"/>
<rect x="1340" y="2200" width="277" height="277"/>
<rect x="1672" y="2380" width="277" height="277"/>
<rect x="2007" y="2041" width="277" height="277"/>

<path d="M891 2411 c-90 -103 -193 -299 -262 -501 -40 -118 -39 -153 9 -200
20 -20 45 -41 55 -47 17 -9 12 -22 -57 -166 -42 -86 -76 -159 -76 -162 0 -3
-13 -33 -29 -68 -37 -81 -51 -126 -51 -165 0 -42 31 -72 74 -72 75 0 127 -13
142 -35 13 -20 11 -31 -15 -109 -28 -86 -28 -87 -9 -111 10 -13 27 -27 38 -30
19 -6 19 -6 0 -38 -28 -45 -25 -61 14 -91 36 -27 35 -22 52 -179 8 -68 38
-111 94 -135 51 -21 161 -31 238 -21 202 27 271 30 309 14 44 -18 98 -68 119
-107 8 -16 14 -56 14 -98 0 -38 4 -70 9 -70 5 0 90 42 188 93 163 86 268 141
548 287 55 28 103 55 108 59 4 4 0 25 -9 47 -29 70 0 242 55 322 84 123 167
284 156 302 -4 7 -167 10 -496 10 l-489 0 0 165 0 165 -170 0 -170 0 0 165 0
165 -165 0 -165 0 -2 336 -3 337 -54 -62z"/>

<rect x="1006" y="1860" width="277" height="277"/>
<rect x="1340" y="1860" width="277" height="277"/>
<rect x="1672" y="1860" width="277" height="277"/>
<rect x="2340" y="1860" width="277" height="277"/>
<rect x="1340" y="1521" width="277" height="277"/>
<rect x="1672" y="1521" width="277" height="277"/>
<rect x="2007" y="1521" width="277" height="277"/>
<rect x="2340" y="1521" width="277" height="277"/>
<rect x="1672" y="1191" width="277" height="277"/>
<rect x="2007" y="1191" width="277" height="277"/>
<rect x="2340" y="1191" width="277" height="277"/>
</g>
</svg>