Below are a few takeaways from his testing in which he compared the three different image types. By using SVGs, you can actually speed up your WordPress site as you will decrease your overall page size. Genki wrote a great article where he compares the size of SVG vs PNG vs JPEG and here’s our JPG vs JPEG comparison. SVGs are traditionally (not always) smaller in file size than PNGs or JPGs. Note: Inline SVGs, or rather those composed of just code, are typically not indexed. You can see this first-hand with the SVG illustrations we use on Kinsta by doing an advanced image search. SVG content that is linked to a file itself will be indexed and show up in Google image search. Google indexes SVGs, which is great news for SEO purposes.
This is why they are a great image format to use for retina screens. With SVGs, you can upscale them to an infinite amount and they will look pixel perfect (or should we say vector perfect) every time. 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. This makes them great for both graphic and web designers. SVG files are a vector format, meaning they are automatically scalable in both browsers and photo editing tools. If for some desperate reason you still need IE8 support, you could define a fallback image ( PNG or JPG) for your SVG images, but we won’t be going into that today. From a business perspective, this might not always be possible, but he brings up some good points. Here is a great article by Lubos on why developers should stop supporting IE8, IE9, and IE10. IE8 only has around a 0.36% browser market share and is no longer supported. The only issue you might run into is if you still need support for IE8, which we hope you don’t. SVG files are currently supported by all major browsers including mobile browsers. SVG usage statistics April 2020 – April 2021 SVG File Browser Support Popular sites such as Google, Reddit, Dropbox, ESPN, and even our own website here at Kinsta use SVGs. SVGs are currently utilized by 33% of all websites and as you can see below, the adoption rate is growing rapidly. You can even manipulate SVG files with code or your text editor.
The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
Wikipedia defines SVG as:Īn SVG (scalable vector graphics) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG (Scalable Vector Graphics) is an XML-based vector image that is commonly used by websites and brands to display logos and icons on their websites.
0 kommentar(er)
