On the World Wide Web today, there are more file formats and extensions than the average user can comprehend. In this article, we will be discussing two of the most popular: SVG and PNG. These two formats are often confused and not utilized to their full potential. We’ll focus on the differences between them and some of the best practices for applying them to your next website project.
SVG
SVG, which stands for scalable vector graphics, is a web format used to display vector-based images. This format takes vector path data and converts it to XML to display within a web browser. Although SVGs can be created using any text software, the common way to create them is through drawing software like Adobe Illustrator or Sketch. Since SVGs are composed entirely of code, they can be scaled to any size and maintain a perfect sharpness, making them the ideal solution many web elements that will be viewed across multiple resolutions.
Advantages of SVG
- Unlimited scaling support
- Every element can be adjusted or animated
- Small file size
- W3C recommended
Disadvantages of SVG
- Can require coding knowledge
- Does not support CMYK Color
PNG
PNG, short for portable network graphics, is the most common image format on the web behind the almighty JPEG. This image format was developed to be a sharper, faster, and overall improved version of the GIF. Invented in 1994, PNG is a raster-based, lossless image format that supports 32-bit color (16 million total colors) and 256 levels of transparency. For comparison, a GIF image supports a maximum of 256 colors and only two levels of transparency: 0 or 100. This means that PNGs can be used with partial transparency, overlapping other elements, making them a popular go-to for web designers.
Advantages of PNG
- Supports full RGB-A spectrum (32 bit)
- Partial transparency
- Lossless compression
Disadvantages of PNG
- Scaling image results in loss of quality
- Does not support CMYK color
- Larger resolution = larger file size
The Difference
To put it in simple terms, an SVG image could be made into a PNG, but a PNG cannot be made into an SVG. Since SVG is vector based, one could not turn their family photo into this format. On the other hand, if someone had an SVG image, like an icon or a logo, it could be turned into a PNG, and the differences would be noticed only when the image is scaled up or down. This is because a PNG is a defined set of pixels and any scaling forces the pixels to blend, causing a loss of quality. Take a look the following section for the best format to use according to the type of desired element.
When to use SVG
- Logo
- Icons
- Vector files
When to use PNG
- Images where transparency is desired
- Complex colored images (keep file size in mind)
SVG and PNG each have distinct features, advantages, and disadvantages. There is an appropriate time to use each one, depending on the project, and one will never take over the other. Here at Blue Frog Marketing, our web team will help you decide which image formats and placements are best for your website. Check out our website portfolio, or our web design page, and contact us to start your next project!
