Get Started With SVG

Professional designers and developers are using Scaleable Vector Graphics (SVGs) more than ever before. SVG files are image files written with code that draw lines known as vectors. This is drastically different than a pixel file like the JPG, PNG or other image file types. I use Adobe Illustrator, a vector based program, to edit a vector file instead of photoshop, a pixel editing program. Encapsulated PostScript (.eps), Adobe Illustrator files (.ai) and SVGs (.svg) are all similar file types but cannot always be used interchangeably. I’m going to explain the difference between a vector and pixel and when you should use vectors. You’ll learn how to tell the difference between the two and better understand the best file types to use for your situation.

Vector Vs. Pixel

Vector

We are taught that a vector is a line from point A to point B. This is still true when speaking about digital vectors on a screen but in this medium, we call them paths. Here is an example of how we work with paths in Adobe Illustrator.

Today’s most popular vector editing programs include Adobe Illustrator, Corel and SVG Edit. These programs draw vector lines and shapes based on the mathematical Bézier Curve. This format of creating a graphic allows it to scale image size without losing detail. Take a look at what happens when we zoom on a vector based graphic, no detail is lost when upscailing.

SVG at 50px wide.

The same SVG file at 300px wide.

Download File Type Examples

Professional designers will create logos in vector format because of their ability to retain detail at all sizes. Logos are expected to be printed extremely large for trade shows, billboards and marketing material. The same image also needs to be readable at very small sizes in communications, stamps, on products and many other areas. The ability to retain quality no matter the size is critical and vector graphics meet this requirement with ease.

Pixel (Bitmap)

Digital photography is considered a bitmap image. Common bitmap file types are jpg, gif, png, bmp, and tiff. Bitmap images are based on blocks crammed with color otherwise known as a pixel. These blocks are placed in sequence next to each other to create a full image. The term “HD television” is often referring to a high number of blocks or pixels used to create finer detail. Today’s most popular bitmap programs for photo editing are Adobe’s three products Photoshop, LightRoom and Elements. Another option other than Adobe is Corel PaintShop

JPG at 50px wide.

The same JPG file at 300px wide.