SVG: The good, the bad and the gooder!

We decided to try out loading our logo using a vector image or “svg”. We weren’t sure if the text it would take to generate the image would be smaller or larger than just sending the original image (which was roughly 5.1KB). It took roughly 8KB of raw text to generate the entire logo along with the text. But add in some gzip compression and the fact that you don’t have to make another HTTP request to load the image, you end up with a logo which takes 2.1KB to load and page loads are slightly faster.

But if you consider the fact that most browsers would have cached the logo, then the extra text in each page should actually increase the overall data sent out.

Even still, I consider using an SVG for our logo a good idea. Typically, it’s not the size of the request that kills a server, it’s the sheer number of requests made at any one moment. If we can shave off a request for each page load, then our web server should be able to serve more users at any one time. Mind you it’s a marginal gain, but a gain none the less.

Clearly, using an SVG for everything wouldn’t be practical or a good idea. But for us and our style of logo, it works great!

If you want more info about generating the SVG and styling it, check out http://coldfrontlabs.ca/blog/svg-embedded-html