A Tale of Two Logos (or, Now Let’s SVG All the Things)
There are many reasons for refreshing your logo. Maybe your logo’s design has grown long in the tooth and you want to make it more appealing to a new generation or market. Maybe your organization is undergoing massive changes and you want your logo to reflect those changes. Maybe your CEO just got bored with it one morning and wants something with a little more razzle-dazzle.
Or, in my case, maybe you want your website to load more quickly.
I’ve become pretty obsessed with website performance in the last few months. Much of that is due to disgust at the fact that websites keep getting more and more bloated, and wanting to do my part to combat that disappointing trend. One of the easiest ways to improve website performance is to optimize your website’s images, something I’ve been doing for awhile with my content images. But what about my design images?
Opus’ current design is pretty minimal, as is my wont, but the design does include a handful of images and icons, with the most prominent being Opus’ venerable logo. Two versions of the logo are actually used in the design: one in the header that’s black with a subtle gradient, and one in the footer that’s reversed with no gradient. Each logo used to be its own transparent PNG file, and weighed in at 9 KB and 4 KB, respectively.
Now, 13 KB (and two HTTP connections) doesn’t sound like all that much, and relatively speaking, it’s not. But two files still seemed redundant since the two logos are basically the same image (color and visual effects notwithstanding). I wanted to find a more efficient way to display the logo in the design.
Enter Scalable Vector Graphics (SVG).
You down with SVG?
Most images on the web are saved in one of three formats: GIF, JPEG, or PNG. These are “raster” formats, which means they’re a collection of pixels arranged on a rectangular grid (which becomes visible if you zoom in really close using graphics software like Photoshop). SVG, on the other hand, is a “vector” format. In a vector image, the shapes you see aren’t the result of clumps of pixels but rather, determined by sets of coordinates contained within XML. In other words, an SVG file is a glorified text file that, when loaded in a browser, is rendered as an image.
For the right image (e.g., icons, line art, logos), SVG offers several advantages over raster formats: they can be resized without any loss in quality; their file sizes can be very small since they’re text files; and they can be modified and adjusted with CSS. Since Opus’ logo is pretty simple — it’s basically a lot of curves — SVG made a lot of sense.
I won’t go into the details of creating SVG files — I’ll point you to Chris Coyier’s thorough SVG introduction for that — but with SVG, not only was I able to replace Opus’ two logo files with a single 3.5 KB SVG file, but I was also able to replace the various icons with SVG equivalents. (I highly recommend IcoMoon for this.)
Furthermore, by inlining the SVG code directly into my template rather than reference external “.svg” files, I was able to reduce the number of HTTP requests to zero. But the party — and, by “party,” I mean “series of experiments to make my website faster” — was just getting started.
Ain’t No Party Like an SVG Party!
Remember that an SVG file is just a collection of coordinates. These were the coordinates used to create Opus’ logo:
M197.079 475.022c69.079-121.905 159.289-219.835 268.19-290.133 20.724-13.816
49.981-30.883 86.959-51.606l0.813-0.406 6.908-1.219-2.032-5.283 14.222-2.438
3.251-0.406 5.283 13.003-12.597 2.032c-9.346 17.067-14.222 20.317-17.473
20.724-1.219 0.406-5.283 0.813-8.127-1.625-0.406 0-1.219 0-1.219 0-0.813
0-2.032 1.219-3.251 4.063-2.032 4.876-4.47 7.721-6.502 9.346-33.321 19.098-65.422
45.105-96.711 77.206 19.911-14.629 40.635-28.038 61.359-39.822 54.857-31.289
111.746-52.013 169.041-60.952 39.416-6.502 76.394-4.876 110.121 4.876 8.127
2.438 15.848 4.876 22.756 8.127-143.441-148.724-355.962-203.175-536.787-119.467-233.651
108.089-325.486 406.756-205.206 666.819 23.162 49.575 52.013 94.273 85.74
133.283-0.406-0.813-0.813-1.625-1.219-2.438-41.448-103.619-22.349-225.93
56.483-363.683zM325.892 949.232c46.324-7.314 99.962-41.041 158.883-100.368
88.178-88.178 153.6-191.39 194.641-306.387 35.759-100.368 40.635-184.483
14.222-249.905-3.657-9.752-8.533-17.879-14.629-25.6 1.625 21.13 2.438 39.010
2.438 53.232 0 1.625 0 2.844 0 4.063 0.406 3.657 0.406 6.908 0.406 10.565 0
32.102-13.003 70.705-39.416 115.81-19.098 32.914-38.197 56.889-57.702
71.111-23.975 26.413-51.606 42.26-81.676 47.137-41.448 6.502-71.111-
11.378-88.178-54.044-15.848-39.822-16.66-82.895-2.438-128 2.844-33.727
14.629-68.267 34.54-103.213 9.752-17.067 20.317-32.102 32.102-45.511-71.517
52.825-135.721 130.438-191.797 232.025-49.981 90.616-83.302 182.044-99.556
271.035-3.251 16.66-5.283 32.508-6.502 47.137-0.406 8.94-0.813 17.879-0.813
26.413 0 7.721 0 15.441 0.406 22.756 0.813 15.848 4.876 32.508 11.378 49.575
0 0 0.813 1.625 1.625 3.657s2.032 3.657 3.251 5.689c1.219 1.219 2.844 2.438
4.063 3.657 13.816 11.784 28.444 22.756 43.479 33.321 7.721 4.063 16.254 7.721
24.787 10.565 4.063 0.813 9.752 2.438 16.254 4.876 13.816 2.438 26.819 2.438
40.229 0.406zM457.956 525.41c-13.816-12.19-24.381-26.819-30.883-43.479-2.032-
5.283-4.063-10.971-5.689-16.254 0.406 17.067 3.251 33.321 9.346 48.762 13.41
33.321 36.165 47.137 69.486 41.854 16.254-2.438 31.695-8.533 45.511-17.473l-
36.978 6.095c-16.66 2.438-33.727-4.063-50.794-19.505zM902.908 315.733c-10.971-
23.568-23.568-46.324-36.978-67.86 1.625 20.724-6.095 40.635-22.756 58.921-
18.286 19.911-43.479 32.914-74.362 37.79l-19.505 2.438-6.095-11.378 5.689-
0.813c55.67-9.752 89.803-30.070 100.775-60.546 5.283-15.441 4.876-31.695-1.625
-48.356-2.438-5.689-5.283-11.378-8.127-16.254-3.657-4.876-7.314-9.752-11.378-
14.629-14.222-15.035-34.133-26.006-58.921-32.508-31.695-8.533-66.641-9.752-
104.432-3.657-8.94 1.625-17.879 3.251-26.413 5.283 31.695 2.032 60.14 17.473
84.521 45.105l-4.876 6.502c-28.038-13.41-48.356-22.756-60.14-27.632 6.908 24.381
11.378 41.041 14.629 52.825 14.222 11.784 25.194 26.413 32.102 44.292 31.289
78.019 25.194 171.073-18.286 277.943 31.695-68.673 49.168-130.438 52.825-
184.889v-2.032l1.625-1.219c0.406-0.406 1.625-1.219 3.251-4.47l7.721-10.971
7.721-11.378-0.406 13.816c-3.251 100.368-44.292 212.521-121.498 333.613-74.768
118.654-155.225 202.362-240.152 249.905l-0.813 0.406-20.724 3.251 2.032-3.657c-
17.879 8.533-35.352 14.222-52.419 17.067-6.908 1.219-13.816 1.625-20.724
2.032l-0.406 1.219c-2.438 0-4.876-0.406-6.908-0.406 124.749 65.829 270.222
76.394 399.848 16.66 233.651-108.089 325.486-406.349 205.206-666.413zM504.279
265.346c-35.352 29.257-61.765 65.829-78.832 109.308-1.625 4.47-3.251 9.346-
4.876 13.816-0.813 8.533-0.813 17.067-0.406 25.194 7.721-28.444 21.943-58.921
42.667-91.022 26.413-41.448 54.857-69.892 84.927-85.74-13.816 6.908-28.444
16.254-43.479 28.444z(I’ve added line-breaks to the SVG code to make it more readable.)
If you want to make a text file smaller, you start removing text. Similarly, if you want to make an SVG file smaller, you start removing coordinates, which effectively redesigns the image. Since we’re not computers, coordinate sets are gibberish to us; we still need to use something like Illustrator to update the image. I’m not an Illustrator guy, but fortunately, my Firespring comrade Bennett Holzworth is one, and with his help, Opus’ logo was streamlined to what you see at the top of this post.
The new logo was simpler and cleaner, lacking several curves and filigrees. Code-wise, the logo’s coordinates were reduced to this:
M121.837,12.813c0.394,0.472,0.677,4.113-0.868,5.047C97.476,
32.055,95.423,37.463,95.423,37.463s22.646-16.36,48.452-
22.131C116.938-0.945,83.333-4.603,54.595,8.437C5.57,30.679-
14.068,93.062,10.734,147.773c3.976,8.771,8.857,16.812,14.446,
24.039C7.428,100.013,79.547,28.321,121.837,12.813 M152.428,
41.788c8.387,43.16-35.602,80.188-52.156,69.304c-32.202-21.168,
5.701-75.958,5.701-75.958C43.482,84.638,29.958,171.12,40.152,
187.812c4.644,4.103,9.561,7.771,14.688,10.979C103.688,217.766,
184.923,83.96,152.428,41.788 M188.268,67.226c-6.66-14.691-15.851-
27.333-26.677-37.541l-14.418-5.144c1.521,1.975,3.675,11.134,
3.675,11.134c18.008,15.794,13.277,50.101,3.58,74.708c12.418-
27.681,11.991-43.218,11.991-43.218l4.563-6.113c-0.899,67.058-68.33,
144.289-105.178,143.745c24.847,11.771,53.178,13.301,
78.602,1.768C193.432,184.32,213.068,121.938,188.268,67.226The result was a reduction in file size from 3.5 KB to 1.1 KB. However, SVGs can be reduced even more with a tool called SVGOMG, which gives you a number of options for optimizing and streamlining SVG files. By applying a pretty severe level of optimization, I was able to simplify the coordinates even more, to this:
M121.8 12.8c.4.5.7 4-.8 5-23.5 14.3-25.6 19.7-25.6 19.7S118 21 144
15.3c-27-16.2-60.7-20-89.4-7C5.6 30.8-14 93.2 10.6 148c4 8.7 9 16.8
14.6 24C7.4 100 79.5 28.3 121.8 12.8m30.6 29c8.4 43-35.6 80.2-52
69.3C68 90 106 35 106 35 43.5 84.7 30 171 40.2 188c4.6 4 9.5 7.8
14.6 11 49 19 130-114.8 97.6-157m36 25.4c-6.8-14.7-16-27.3-26.8-
37.5l-14.4-5.2c1.5 2 3.6 11.2 3.6 11.2 18 15.8 13.3 50 3.6 74.7 12.4-
27.7 12-43.2 12-43.2l4.6-6c-1 67-68.3 144-105.2 143.6 25 11.8 53.2
13.3 78.6 1.8 49-22.3 68.7-84.7 44-139.4This resulted in a file size of 610 bytes, or a file size reduction of approximately 82% of the original logo. GZIP compression — remember, SVG files compress really well, too, since they’re text files — reduced that even more, to 366 bytes.
To sum up, through a combination of streamlining Opus’ logo, optimizing it, and running it through GZIP compression, I was able to reduce its file size by nearly 90%.
What’s more, since I’m using the same SVG code for both instances of the logo and I’ve inlined the SVG code to reduce HTTP requests — you can see it if you view this page’s source (just search for “svg”) — I’ve further optimized Opus beyond just reducing image file size.
And it doesn’t hurt that the refreshed Opus logo looks pretty slick, too. A win-win all around.
Conclusion
Obviously, this is a rather extreme example. You don’t always have the luxury of redesigning your logo simply to make your website faster. (Your marketing department might have a word or two to say about that.) Even so, I hope it’s obvious that switching from a raster image to optimized SVG can have significant benefits.
Not every image will work as an SVG; if your logo includes elements that can’t easily be converted to coordinates (I’ve seen logos that contain full color photos, for instance), then stick with JPEG or PNG. But if your logo can be converted easily, I highly recommend doing so. The benefits in terms of website speed and image flexibility are considerable, and well worth the time it takes to figure out SVG if you’re used to working with raster images.
For more information on working with SVG files, check out “A Practical Guide to SVGs on the web,” “Tips for Creating and Exporting Better SVGs for the Web,” and the aforementioned Chris Coyier article.