Charlie Harvey

SVG logo: half the size and better quality

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("//") no-repeat center top #0A2637;background-image:url(//,none;background-size:contain;

Comparing the jpg and svg versions of my logo

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.


  • Be respectful. You may want to read the comment guidelines before posting.
  • You can use Markdown syntax to format your comments. You can only use level 5 and 6 headings.
  • You can add class="your language" to code blocks to help highlight.js highlight them correctly.

Privacy note: This form will forward your IP address, user agent and referrer to the Akismet, StopForumSpam and Botscout spam filtering services. I don’t log these details. Those services will. I do log everything you type into the form. Full privacy statement.