Time to get your logotype in SVG

The Web 2016 is, or at least should be, responsive. Graphics today appear on a large number of units in many different versions and resolutions. Logos presented on the web is often pixel based in file formats such as jpeg or png. They perform ok in most cases (at least if there is a retina version supplied that appears when possible), but it gives no option for scaling the logo without a pixelated or blurry result.

EPS for general purpose and printing

All logotypes made by professional craftsmen are, besides png end jpeg-formats, always delivered in a vector version and it is almost exclusively in an eps format vector format, perfect for print graphic production. These have been sufficient for a long time,  but now it’s time for an additional format; SVG.

SVG for web publishing

SVG stands for Scalable Vector Graphics and is a standard developed by the W3C (World Wide Web Consortium), an International membership organization for Internet Standards. The reason for developing SVG was the need of a standard for vector graphics on the Web that is resolution independent and supported by major browsers.

Although SVG was a recommended format already back in 2001 and technically supported by major browsers in 2004 it has taken until now for the breakthrough on a large scale, but now we can see that more and more large companies have SVG versions of their logos.

Supported by all browsers?

SVG is today supported by all major browsers, but there are a few exceptions to keep in mind. Older versions of Android (Supported from V.3) and Internet Explorer (supported by IE 9) is not supported, but the solution is simple, just add a fallback in png or jpeg and the problem is solved.

How to create  SVG?

SVG is a format that can be written in code and easily changed in a text editor. But the easiest way to create an SVG is in a dedicated software like Adobe Illustrator or Corel Draw, where you simply save a version in SVG together with the other formats. If you don´t have access to these programs, there are several freeware you can use, such as Inkscape or Carbon (mainly for Linux).

When it is not suitable

When you have graphics that are complex and comprises a large number of nodes, there are better options. Also when a large part of the expected target audience uses IE8 or Android V2.3, but that is actually not a good excuse for not having an SVG-version, use it together with a fallback.

Animate and use filters

Since the format is code based it is easy to create powerful and lightweight animations and filters. That is positive when making, for example, banners, trying to keep the kb-size down. They can also be modified and effects can be created using Javascrip or CSS. The SVG is created to work well with other web technologies.

Libraries for ilustrations and symbols

SVG is, of course, also suited for illustrations and symbols that can be scaled up and down with maintained quality on the web. For those who can not design illustrations themselves, there are a lot of libraries where you find good graphic materials such as Raphael or Snap.

To wrap things up

Having a SVG version for your graphic illustrations in general, and logotypes in particular will help you look good on any screen size and help you make a better impression and improve your performance on the web. Here are some key takeouts:

• SVG is Resolution Independent
• It is perfect for front end animations and transitions.
• It can be altered manually in a text editor

So make sure you also get your logo in a SVG-format. It is easy to generate and will most likely be universal tomorrow as long as the W3C sets the global web standards.

More information 

Export SVG for the Web with Illustrator

http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/

SVG Libraries

http://snapsvg.io/

http://raphaeljs.com/

Sources:

http://www.webdesignerdepot.com/2015/01/the-ultimate-guide-to-svg/

http://seesparkbox.com/foundry/a_bit_about_svg

https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Niclas_blog

Niclas

This entry was posted by Madington.