The Pixel Is Dead, SVG's Are Killing Them

Ken Moire // Web Development
Scalable Vector Graphics Better Than Pixels

What? The pixel is dead? Ok, maybe not 100%, but it’s well on it’s way and I’ll tell you why: SVG’s are killing them. First, for those of you who don’t know much about SVG’s, SVG stands for Scalable Vector Graphics. What does that mean? Simply put, it’s a graphic that is created with XML. All modern web browsers have some form of support for SVG, and there are sites like Can I Use that show what browsers support SVG’s.

Here is my list of the reasons SVG’s are better than pixel based images.

SVG’s are:

  1. Easily editable - SVG’s can be edit via a text editor being they are XML based or can be created through program like Sketch, Inkscape or Illustrator.
  2. Searchable and Indexable - Adds additional content to your site that can be searched/indexed by Google.
  3. Look great on retina displays - They don’t require libraries like retina.js or multiple versions of an image which reduces number of page requests.
  4. Scales without distorting - Since SVG’s are created with code they can be scaled without becoming pixelated, allowing you to use one image at different sizes.

There are instances where you’ll still need to use something other than SVG’s. For example, anything older than IE 9 would require the use of non-SVG images. In theses cases, using something like Modernizr is a great way to do SVG fallbacks. Or if you’re looking for something really lightweight and don’t need any gradients, you may instead opt use a Icon Font. Like SVG’s icon fonts scale well, and they have the ability to accept text based CSS being they are a font library.

With all it’s advantages, there are still instances where you’ll need to use pixels or maybe Icon Fonts, but SVG’s are still a great tool for any developer in an age of HD/retina displays.