JPEG’s and PNG’s used to be the most popular file-types for logos and icons. One problem though is they don’t always scale properly. They become pixelated when you zoom in. Another problem is file size. They can become large and if you compress them you’ll lose some of the quality.
A better solution is to use Scalable Vector Graphics (SVG). SVG is an XML markup language that’s used to describe vector graphics. in other words, SVG’s are text files and can be edited with a text editor.
SVG’s have a smaller file size (they’re about half the size of the equivalent PNG) and they’re scalable, meaning they don’t lose graphic quality when you zoom in, making them a perfect choice for logos, icons, and even featured images for responsive websites. They look great on retina displays. They can be manipulated with CSS. The smaller file size of course will improve your page-loading time, so it’s win/win.
Raster Vs Vector
Here’s a look at raster (PNG, JPEG) vs vector (SVG) (image from the QuickLeft blog). Both look fine at small sizes, but when you zoom in it’s obvious the raster image gets pixelated while the vector remains sharp. To solve this, many designers have used a sharp larger image, but that increases the file size and load time. The SVG solves all of these problems.
Example Logos
This image, taken from Responsive Logos, shows a set of popular logos. The image above is regular size.
The image above is 25% of the original size. You can see the logos retain their definition.
The image above is at 300 zoom. The logo is still sharp.
Tools for Creating SVG’s
Some popular tools to create SVG’s include:
- Adobe Illustrator
- Sketch (for OSX)
- Inkscape
- SnapSVG
SVG Downloads
Let’s Discuss
- Do you currently use PNG’s?
- If not, do you plan to move to PNG’s?
- What are you favorite tools and resources for SVG’s?
- Is there another file type you prefer?
Let us know in the comments. Thanks for reading. Please subscribe if you haven’t already.
Featured image from seabass creatives
0 Comments