You may have heard the term before, vector graphics, or SVGs, but what are they? And why are they preferred over other media formats, such as JPEG or PNG?

To understand vector graphics, one must first know what a vector is. A vector is a directive describing a path direction and length or duration. It's that simple. Conventional computer imaging consists of a grid of colored dots called pixels. An image is nothing more than a map of pixels, each having a color value intensity byte for three primary colors: red, green and blue. Each color value and be a number between 0 and 255. Since a byte is (usually) 8-bits, one single pixel occupies 3 bytes of memory. That really adds up when typical phone cameras have a resolution of 10 megapixels (10 million pixels) or more. If it weren't for image compression algorithms, such as JPEG or WEBP, it would be practically impossible to have images on websites or streaming media whatsoever.

Vector graphics are a whole different ballgame. Instead of a map of pixels, vector graphics consists of a list of directives using a scripting language similar to HTML or XML. The directives describe to the web browser how to draw the graphic in the website's viewport. Since these are instructions rather than pixels, a vector graphic typically consumes far less memory than conventional graphics. Another benefit of SVGs is the ability to scale infinitely large or small with no aliasing or pixelization.

This is the reason why we use them for branding and logo design. With a well-crafted logo done in vector graphics, they can be used on any medium imaginable. Your logo can appear on the tiny icon on your web browser tab, or be blown up and printed on a thirty-foot wide billboard.

Here's a very simple example of a vector graphic:

<svg version="1.1" x="0px" y="0px" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        .st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
    </style>
    <circle class="st0"></circle>
</svg>

This simple SVG, with a file size of a mere 553 bytes, instructs the browser to draw a simple circle. Here's what this little bit of text renders in your browser:

Authoring vector graphics can be done by hand-coding, but nobody does that, other than to make minor tweaks and adjustments. There are several vector drawing apps that design professionals use to create SVGs. The most notoble, and the one we use here at Designly is Adobe Illustrator. Illustrator is the industry standard software for design professionals and is versatile and easy to use, albeit after a steep learning curve. There are alternatives to Illustrator, and the one I like best is completely free and open-source: Inkscape. Inkscape is very similar to Illustrator, but lacks some of the features and has a slightly clunkier user interface. But if you're looking to get into the vector graphics game on a budget, free can't be beat! Inkscape will create, edit and save standard Illustrator files (.AI).

This is an example of our logo rendered in SVG at 100 pixels wide:

And here's that exact same graphic rendered at 500 pixels wide:

Now, here's a PNG rendering of our logo at 100 pixels wide, blown up to 500 pixels wide:

As you can see, vector format is clearly preferred. The SVG version of our logo occupies 30kB (kilobytes) of memory, regardless of the size it's rendered at. But if I were to export the logo as a JPEG, for example, a rendering of that exact same logo at 1200 pixels wide, with high-quality compression, would occupy 47kB of memory.

There is a cut-off point where the memory savings of the SVG no longer helps. But sometimes, the SVG is preferred for responsiveness accross multiple platforms, such as PC browsers, tablets and smartphones. But sometimes it makes sense to render your logo in several different sizes of pre-rendered formats. One of the best lossless image compression formats is WEBP. A 500-pixel-wide rendering of our logo in WEBP format at 75% quality occupies a miniscule 5kB, far less than to 30kB vector.

Designly logo in WEBP at 500 pixels wide:

Now compare that to the SVG at 500 pixels wide:

The SVG quite clearly has greater resolution and crispness, but when you think of the file size difference, 30kB vs 5kB, in some cases, the slight loss of quality is trumped by the data transmission savings.

I hope that i've given an at least rudimentary explanation of the benefits os vector graphic design. And if you choose me as your business media design professional, all of your media assets will be designed in this format, which is usable for any kind of medium imaginable, such as coffeee mugs, business cards, outdoor signs and, of course, your website. :-)