SVG vs. Image: A Retina Performance Test
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.
Display
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.
File Size
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.
Image
- Requests: 2
- CSS Size(minified): 14.5kb
- Image Size: 5kb
- Total Size: 19.2kb
SVG
- Requests: 1
- CSS Size(minified): 23.6kb
- Total Size: 23.6kb
The Verdict
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.
Comments (7)
Leave a Reply
In the same vein, there’s an interesting article on a new image format that’s gaining popularity:
Link to commenthttp://blog.catchpoint.com/2013/03/08/a-comprehensive-guide-to-webp/?utm_source=rss&utm_medium=rss&utm_campaign=a-comprehensive-guide-to-webp
Interesting. The fact that this format could replace both png and jpeg is intriguing. It also makes me a bit skeptical!
Link to commentThere’s one thing i notice that could be detrimental for the SVG: the registered trademark ® disappeared. Not sure if that was intentional or not. And if it was added how much more filesize would it add?
Link to commentGreat callout Kramer. I actually excluded the RTM from the SVG because we actually use the logo in multiple places, some with and some without the RTM (We have a section in the footer that handles all the copyright info). So what I’ll need to do is add the RTM in with html. Might be a bit annoying to setup initially, but should be pretty easy to absolute position.
Not sure on file size. This is already a pretty intense SVG due to all the points, so I’d bet its negligible.
Link to commentAdditionally, this article proposes an interesting “responsiveness” feature with SVG:
Link to commenthttp://demosthenes.info/blog/675/Create-Adaptive-SVG-Illustrations-With-CSS
There are still many issues bugging the implementations of SVG for retina displays. One of many is that SVG filters are rendered in low-resolution (shadow-casting elements are blurry: http://psychologiapar.pl/). PNGs were totally impractical here.
Link to commentThanks for the article. Looking into making crtren.com with only one image for the background texture. The colorizing and scaling benefits are what’s drawing me as well to svg.
Link to comment