In this Blog, we’ll talk about the advantages and disadvantages to SVG and PNG—and ultimately, why you should be using SVG files whenever possible. Forget PNG- FOREVER —after reading this article, you’ll only want to be using SVG from now on
While JPEG has its clear advantages for photos, if you’re faced with choosing between PNG and SVG for logos, icons, or simple graphics, SVG is, without a doubt, the clear winner.
SVG & PNG—What’s the Difference?
*** Should I also include the definition for JPEG?
Before diving into the difference between SVG and PNG, let’s talk about how they are similar. Both allow for alpha transparency, meaning files can easily be transposed onto a background.
***What is an SVG File?
Scalable Vector Graphic, an XML-based image format for two-dimensional graphics. Stores data as a code to determine how the image should appear—since the description is stored via text, an SVG file can be scaled to different sizes without sacrificing quality. Best used for low intensity artworks like logos, icons, and simple graphics.
**Supported in all browsers except IE 9 and older Android (do I need to include this)
What is a PNG file?
Portable Network Graphics, uses raster file format, which means that data is stored relative to each individual pixel within the file. Commonly used for graphs, diagrams, or flat colors and lines that don’t need to be scaled up.
8 Reasons to Use SVG, Always & FOREVER
- Infinite Resolution
SVG allows for infinite resolution regardless of screen size, zooming, or whether you are using a ‘retina’ display.
- Faster Load Times
Because the image is stored via code, you can work with very small file sizes and naturally support faster load times (only exception is when you have a photograph or a complicated artwork—that’s when JPEG is best)
- Preserves Quality
Is a vector format that can scale to any size without losing quality—and while having a relatively small file size
- Allows for Greater Creativity
Can be animated and styled with CSS, including any animation for HTML elements—allows for more creativity
- Versatile & Practical
SVG can be used for logos, graphs, animations. Logos can be created in SVG format and reused without worrying about size, resolution, or load times—cuts out the headache of constantly resizing and reformatting
- Great for SEO Purposes
SVG files are indexed by Google regardless of whether they are embedded directly in HTML or used as a standalone file
7. Easily Converted
Can convert SVG to PNG (but not the other way around, making SVG more flexible in comparison) –but why would you want to convert to PNG?
**8. Easy Integration with Sketch
**** Explain what sketch is—possibably link to a blog article about sketch. Can easily use Sketch along with SVG
Reasons You Should Never Use PNG / Avoid PNG Like the Plague It Is
[While the list of reasons to avoid PNG files may not be long, it doesn’t need to be—if you’re considering PNG vs SVG, these reasons are more than enough to stay away from PNG as much as possible:
- Storing data with pixels can be restricting and outdated comparatively
- Often have to cater to ‘retina’ devices, which means doing double the work and creating two PNGs with different sizes
- Typically large file sizes, which takes forever to load and drastically affects page speed
- Allow for alpha transparency, which is great for overlaying an image on a background, but they do not compress well.