Use SVGs for Your Logo

When I wrote about SVGs in 2016, it was big news. It’s standard for us now to use SVG format for logos on websites we develop. I am always surprised at the number of new websites launched with PNG format logos. Everyone should use SVG format logos on their websites in 2020!

SVG stands for “Scalable Vector Graphic,” an image format that allows an image to scale to almost any size without losing quality (and looks even better on retina displays). It is also a format that is a small file size and compresses well.

Compare PNG to SVG

Let’s compare a PNG image file with an SVG image file

Can you see the difference – especially if you are viewing this on a retina screen? Before SVGs, we used a “regular” size version of a logo, and then a “2x” size for retina screens, which are higher resolution. With SVGs you don’t need two sizes anymore. If you reduce or enlarge its size, a PNG file does not scale well, but and SVG looks great all the time.

How to create an SVG file

In order to create an SVG file, you need to have a vector version of the logo or illustration. Vector art is defined in terms of 2D points, which are connected by lines and curves to form polygons and other shapes with different properties. Vector are can be an Adobe Illustrator file, formatted PDF or an EPS format.

Most people are more familiar with jpg and png formatted images, which are raster images. Raster images (also known as bitmap images) are made up of pixels, with each pixel’s color being specified by a number of bits. Raster graphics are resolution dependent, meaning they cannot scale up to an arbitrary resolution without loss of apparent quality, or pixelation. 

If you don’t have a vector version, you can have your logo recreated as a vector file. There are designers who specialize in doing this. We’ve found some great talent on Upwork for vector file conversion.

You can use a program like Adobe Illustrator, Sketch or Figma to easily save your file as an SVG. SVG is actually CODE, which means you can also edit it and animate it on your website with some custom coding!

SVGs are not just for logos

You can use an SVG for all types of illustrations and icons. If you purchase stock illustrations, you should look for the vector/eps version and download that.

Need help creating a vector, SVG version of your logo and a refreshed, updated look for your website? Get in touch!