Its not that I’m a performance fanatic. But a fairly big part of the page weight on my new site is made up of the top logo. Which, until yesterday, was a jpg. Previously it had always been a png which seemed sharper to my eye. But it took 50 kilobytes, although it is cacheable that is still a fair whack. And now that my site is responsive, the logo needs to be sharp at any scale. Including on pixel-dense retina displays. So, I decided to have a play with SVG, the XML-based image format that everyone is talking about. I have been pretty happy so far.
First attempt
First of all I wanted to turn my logo into an svg straight from the png. I tried this with inkscape, which leverages a tool called potrace for this purpose. But the code in the background of the image came out way too blurry. I tried a couple of online tools, but nothing seemed to come out quite right.
Using Inkscape to make the logo
So, I went back to inkscape and created the logo from scratch. I just typed the text (including the background code) into 3 layers on top of a blue rectangular layer. If you are interested the fonts are Bebas Neue, Cabin and Courier 10 pitch. Glad we got that out of the way.
Each block of text I converted to a path using inkscape’s object to path tool. Then I selected the background and set it as the page size. FInally I exported as "optimized svg". I have no idea what optimizations inkscape does but that was the smallest file.
Gzip and SVGZ
As it turns out my SVG is way bigger than my jpeg — over 300k. SVG is made out of XML, shich is text and not binary. It will be big, but text comresses nicely with gzip. And browsers support decompressing gzipped streams natively. So you can gzip your svg, save it as an svgz and serve it up with the correct headers. In my case the SVG went down to 30K. Nearly half of the size of my original jpg.
My server is running Debian Wheezy, I needed to add the following lines to /etc/apache2/mods-enabled/mime.conf AddType image/svg+xml svg svgz
AddEncoding gzip svgzThen I restarted Apache. Then I fiddled with cloudflare a bit. And finally my new logo started being served up as expected.
A bit of CSS
Next, I told my CSS to serve up that image which is as simple as changing the filename in the declaration. Now the problem with this setup is that now IE8 users won’t be able to see my logo. So, I have a fallback setup and the final CSS is background:url("//static.charlieharvey.org.uk/img/dotorg-2013-topbar.jpg") no-repeat center top #0A2637;background-image:url(//static.charlieharvey.org.uk/img/dotorg-2014-topbar.svgz),none;background-size:contain;
Sharper and smaller
Not only is the svg version smaller but as you can see in the image, it is sharper too (it’s the top one). Win.
Next steps
Next, I want to have a play with including my SVG in a data URL, because my CSS will be gzipped anyhow and I save one request that way. Another day.