Decision Making

A PROPOSAL FOR SVG TO BE USED FOR LOGOS OVER OTHER FORMATS

Vector and raster formats are the two ways your logo files can be saved from the application your designer used to make your logo. Professional designers work in Adobe Illustrator to create your logo, which is a vector-based program. Photoshop is a raster-based program. If your logo was created in Photoshop, this will cause you problems in the future.

A logo should always be designed in a vector format. Why?

Vector images can be scaled (made larger and smaller) without diminishing the quality because they are created with points, lines, and curves. Vector files are the original source files that can be edited by design applications.

Raster images will lose resolution and become fuzzy when scaled because they are created with pixels. Raster files must be exported at specific sizes to fit various applications like your website or Facebook. These files should never be edited to alter your logo. Always make your logo changes (like color variants) in the original vector file.

SVGs if you don’t know are Scalable Vector Graphics, an XML-based image format for two-dimensional graphics. SVG is supported in all browsers, except IE 9 and lower and old Android (V3).

Here are the reasons I believe SVG should be the format chosen for your logo:

1. Resolution. It doesn’t matter about your screen size, zoom level, resolution, or whether or not you have a ‘retina’ display. SVG is vector-based, paths, shapes, and fills. This allows for infinite resolution, much like when creating artwork for print and using shapes, the same principles apply! Using PNGs means you are restricted to pixels. Also, a lot of the time you need to cater for ‘retina’ devices, meaning you have two PNGs, one with almost always an absurd file size too.
2. Speed. PNGs can weigh in at large file sizes, usually when catering for HDPI displays. As you know, the larger the file size, the slower it is to render/load. People tend to use PNGs when they require transparency in their images, transparency in an image = larger file size. Larger file size = Longer loading times. SVGs are just code, which means very small file sizes. There are instances when SVGs can take a lifetime to load, for example, if you’ve made the Eiffel Tower as a vector graphic with a million paths and fills, best to use a JPEG… or PNG.
3. Animation. SVGs can be animated and styled with CSS. Animations (transformation/transition) that you use on HTML elements can also be used on an SVG element. There are instances where you can’t use CSS to animate SVGs but these instances can usually be covered with JavaScript.
4. Practicality. There are many ways SVGs can be used on the web, from displaying logos to full-on physics engines in browser madness. I’m in the former camp, my needs are generally needing logos, icons, and simple animations in SVG format. Logos: Logos are usually vector-based, and rightly so. Give someone from a print background a raster-based logo and just watch their face melt. The beauty here is, you could define an SVG document as your logo and then use it wherever you like without worrying about size, resolution, or load times. The same factors apply to icons too. Also, creating responsive logos: See our article on modern logo requirements here to find out more about responsive logos: Modern Logo Requirements. Graphs: Yes, graphs… SVGs are great at vector shapes, lending themselves to things like infographics and graphs very well indeed. Animations: See point 3
5. Accessibility and SEO. Google index’s SVGs, which is good news. SVG content whether it is in a standalone file or embedded directly in HTML is indexed.

Downsides:

In the interest of fairness, here are a couple of points to consider when using SVGs.

You’ll have problems with trying to use SVGs with old browsers, having said that, you can have a fallback in place such as PNG replacements.

Complicated artwork with thousands of nodes is probably best suited to JPEGs, browsers trying to render complicated SVGs can have a meltdown.

Overall, as it stands, SVGs are best used for low-intensity artwork; logos, icons and simple graphics.