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.

Final Lesson & Resources

The Vector Becomes The Pixel

When a vector becomes a pixel there is no going back. A pixel cannot be reverted into a vector without tracing or redrawing the image. You can save a vector formatted file as a bitmap image but you cannot do the opposite. If you are a developer, SVGs are also compatible with every major desktop and mobile browser according to Can I Use.

SVG & Vector and Resources

Font Awesome – A vector font library of general icons and graphics for social media and so much more. Many of my sites, including this one, use Font Awesome.

Glyphter – Create your own vector font to use in web development and computer apps.

Vecteezy – A free and subscription-based library of higher quality vector artwork. I often use this library as inspiration when creating my own graphics and have used graphics from this site.

Brands of the World – The largest free library of downloadable vector logos, and a logo critique community.

Meeting Notes


I am a Frontend Web Developer with a BFA in Graphic Design. I create custom WordPress themes and edit prebuilt themes on WordPress and Shopify. Boats are also kind of my thing.