One of my jobs as a UI designer is to provide icons to the developers on my team. Design software like UXPin comes with built-in libraries, and we use the Material library a lot. But sometimes you need to make something custom, and you need to understand different image formats so you can deliver the best asset. PNG (Portable Network Graphics) and SVG (Scalable Vector Graphics) are the de facto options for icon files, and each has its own set of pros and cons. The choice between them depends on the type of image you are working with and your specific needs. PNG is best for complex, photographic images, while SVG is ideal for scalable graphics, icons, and logos. In many cases, a combination of both formats may be used to optimize the visual elements on a website or in a design project.
PNG pros:
- Lossless Compression: PNG uses lossless compression, which means that the image quality does not degrade when the file size is reduced. This is ideal for detailed and high-quality images.
- Wide Support: PNG is supported by most web browsers and graphic software, making it a versatile choice for web design and image editing.
- Transparency: PNG supports alpha transparency, allowing images to have varying levels of opacity. This is useful for creating images with soft edges or irregular shapes.
- Photographic Images: PNG is well-suited for photographic images and complex graphics that do not require scalability.
PNG cons:
- File Size: PNG files tend to have larger file sizes compared to some other formats, such as JPEG, which can impact page loading times on the web.
- Not Ideal for Logos and Icons: PNG is not the best choice for simple logos, icons, or other graphics that need to be scaled to various sizes without losing quality.
SVG pros:
- Vector Format: SVG is a vector format, meaning it uses mathematical equations to define shapes and lines, which allows for infinite scalability without loss of quality. This makes it ideal for logos, icons, and graphics that need to be displayed in various sizes.
- Small File Size: SVG files are typically smaller than raster images like PNG because they only store the mathematical description of the graphics, not individual pixels.
- Editable: SVG files can be edited and manipulated easily using vector graphic software. This makes it a preferred format for design work.
- CSS Styling: SVG allows for precise control over colors, gradients, and other styling attributes using CSS, which is beneficial for web design.
SVG cons:
- Complexity: SVG is not well-suited for complex photographic images and may not provide the same level of detail and realism as raster formats like PNG for such content.
- Browser Compatibility: While modern web browsers support SVG, some older versions may have limited or inconsistent support. You may need to provide fallback images for older browsers.
BONUS: Here’s one of my favorite resources for PNG and SVG icons: The Noun Project. The Noun Project began with a Kickstarter campaign in 2010 with the intent to create a central repository for commonly used icons. Today it is a thriving resource and marketplace for designers, who earn between 40-60% of the icon sales fees. Icons are free if you agree to give credit, or you can pay per download or via a monthly subscription. Give it a spin – search for an obscure object and see what turns up! (“Cat”, icon #113020, by libberry.)