Well, I’m officially on a vector kick. As you can see, this very site is riddled with them, all via a handy icon font. But what about more complicated vectors? Can SVG give us a great looking vector at any zoom? What about file size? I decided to put SVG to the test. I took our current logo from our aerie site, swapped it for an SVG, and compared the findings below.
As of this writing, the logo is a PNG served up at a low compression, saved to twice the displayed dimensions, and scaled down in the browser (image one above). This gives it a more crisp look on retina devices at twice the pixel density. It looks pretty darn good, but as with all images, starts to look a bit fuzzy when resized.
The second image above is the SVG, saved in the SVG 1.1 Tiny format. As you can see, it’s a bit crisper than the PNG. It looks amazingly crisp both on and off a retina display. Finally, the SVG also has the added benefit of looking great at any zoom level.
Below are some numbers on the two options. It should be noted that I tested both of these on a local site build, without the aid of a CDN. These are also the non-gzipped results, although the CSS is minified. The SVG was converted to a data URI, and called as a background to save a browser request.
- Requests: 2
- CSS Size(minified): 14.5kb
- Image Size: 5kb
- Total Size: 19.2kb
- Requests: 1
- CSS Size(minified): 23.6kb
- Total Size: 23.6kb
Based on these results, I’m leaning towards implementing SVG. The small increase in size is outweighed by the options it gives me (colorizing, effects, etc.) and it just plain looks awesome!
I’ll need to do some research on a few further factors first though, such as a backup for IE8 and below, as well as what my options are for coloring the SVG for re-use elsewhere. Finally, I’d like to take a look at Grunticon for some automation.
Leave a Reply