What is an SVG?

SVG is an XML-based vector image which is commonly used by websites and brands to display logos and icons on their websites. The main reason they are especially popular among developers and designers is because they are a scalable image format, generally smaller in file size (sometimes by quite a bit), and don’t pixelate on retina screens.

 

Benefits of SVGs

SVGs are a vector format, meaning they are automatically scalable in both browsers and photo editing tools. This makes them great for both graphic and web designers. Normally when you try to edit a PNG or JPG in a tool like Photoshop, Sketch, or Paint, you can’t upscale them without pixelation. With SVGs, you can upscale them to an infinite amount and they will look pixel perfect (or should we say vector perfect) every time. This is why they are a great image format to use for retina screens.

SVGs are traditionally (not always) smaller in file size than PNGs or JPGs. By using SVGs, you can actually speed up your WordPress site as you will decrease your overall page size.

JPG (optimized size: 81.4 KB)

JPG image

PNG (optimized size: 85.1 KB)

PNG image

SVG (optimized size: 6.1 KB)

SVG image

As you can see above, the SVG is a decrease in file size of 92.51% when compared to the JPG. And when compared to the PNG, 92.83%. Those are pretty impressive file size differences.

That is why many sites use SVGs for less detailed images such as logos, icons, etc. as they will see a significant decrease in file sizes. But for more images with great detail, like perhaps your blog post “featured images,” you might want to stick with a PNG or JPG but you can still optimize them. Many websites use a

 

Summary

SVGs are a great way to enhance the look of your site! We recommend utilizing SVGs, PNG, and JPGs together to achieve the best performance, as very detailed images will not perform as good in SVG format. SVGs are great for your logo, to ensure it looks pixel-perfect on every screen, along with icons.

Source Image Credits & Wording: Kinsta