What is a .SVG File (Scalable Vector Graphic)?
WE love SVGs!
There are two types of graphic images: raster and vector. Raster or “pixel” based file formats store data related to each pixel and resolution size, whereas vector images store data as a mathematical description.
Vector Based Artwork vs Pixel Based Graphics
First, if it’s a vector graphic, its built in Adobe Illustrator. All logos should be designed in Illustrator for this purpose - so we can scale it up or down without any quality issues. All pixel or photo based images are created and edited in Photoshop. These two programs work very differently from each other, and so do their file types.
In the image below, the artwork on the left is created with vectors, which uses math to determine where the lines in the artwork land, resulting in clean edges no matter what size the artwork has been scaled to. The artwork on the right is pixel-based, which uses a number of colored squares specified by its resolution to create the image. When a pixel-based image is resized it can become blurry or “pixelated.”
A photo-based graphic will look pixelated when it is resized bigger than it was originally formatted to be. That doesn’t happen to vector graphics, which is resolution independent and will resize perfectly on any retina device.
So What is an .SVG file?
.SVGs are vector-based artwork that take things one step further. This file type takes all that geometry and math-based information, and turns it into a computer code called XML. Since the artwork is now a small parcel of code, SVGs are also extremely tiny in file size. Inserting the file into your website then displays the actual “scalable vector graphic” on your website. What does that mean for you? Lightning-fast load times without sacrificing high-quality images. Your logo looks crisp no matter how far you may zoom in on the design. It will render to look high resolution on every device.
Alternatively you can also export the SVG’s code - and add this snippet into your website to display a logo, simply by inserting code. No image file needed! This only works when the logo or graphic is fairly simple. Very complex graphics may be too complicated to display properly, so it only works on basic logo designs. Also the SVG code when exported also created custom CSS, which can conflict with a second SVG code on your page. To fix any color changing issues, we simply suggest editing the IDs to be unique.
However SVG files also have their limits! SVG files can not handle photos at all. If you are exporting photos you want to ues a JPEG file type and the SVG file type when you have a flat, relatively simple asset you might need to scale, and PNG if you need transparency.