Have you re-checked and compared the rendering times for pngs and svgs against their loading times? In most cases, SVGs more than make up in loading time.
PNGs are losslessly compressed pixel graphics with four channels, whereas SVGs are vector data. SVG is way smaller and more efficient for vector based items than PNGs. They can't be used equivalently.
Also SVGs bring a range of advantages with them, inherent accessibility, animations, and more.
Well, the work of rendering the svg has to be done by the browser engine which is already loaded with huge tasks where as png is just a load and add task for the browser engine. Without a second thought, SVGs cause more layout or render time.
That's why the rendering performance gets better. In size svg might be smaller but they need to be processed whereas png need not be processed.
Png is usually cached but SVGs are usually hardcoded and can't be cached.
SVGs do have advantages but many places we use them where we don't need those advantages. For example, as icons.
You can cache SVGs using "image" instead of img tag. Also if SVG(code) can be part of the HTML code, it would already render and be available as HTML. I think that would be faster than PNGs. Reducing extra HTML call as well.
Yes, but if it is available as HTML then it is already rendered on browser page which adds a few more components to the DOM causing a "layout" cost. Personally, I wouldn't prefer to have the elements on the page that are not rendered.
Even if we create an SVG sprite and cache it, we have to render the svg sprite as an HTML.
Saying that, if the website is not icon intensive, it doesn't add a big performance gap. So, we need to bother about this only when we have significant number of icons in our app.
Have you re-checked and compared the rendering times for pngs and svgs against their loading times? In most cases, SVGs more than make up in loading time.
PNGs are losslessly compressed pixel graphics with four channels, whereas SVGs are vector data. SVG is way smaller and more efficient for vector based items than PNGs. They can't be used equivalently.
Also SVGs bring a range of advantages with them, inherent accessibility, animations, and more.
Well, the work of rendering the svg has to be done by the browser engine which is already loaded with huge tasks where as png is just a load and add task for the browser engine. Without a second thought, SVGs cause more layout or render time.
That's why the rendering performance gets better. In size svg might be smaller but they need to be processed whereas png need not be processed.
Png is usually cached but SVGs are usually hardcoded and can't be cached.
SVGs do have advantages but many places we use them where we don't need those advantages. For example, as icons.
Hi Vani,
You can cache SVGs using "image" instead of img tag. Also if SVG(code) can be part of the HTML code, it would already render and be available as HTML. I think that would be faster than PNGs. Reducing extra HTML call as well.
Yes, but if it is available as HTML then it is already rendered on browser page which adds a few more components to the DOM causing a "layout" cost. Personally, I wouldn't prefer to have the elements on the page that are not rendered.
Even if we create an SVG sprite and cache it, we have to render the svg sprite as an HTML.
Saying that, if the website is not icon intensive, it doesn't add a big performance gap. So, we need to bother about this only when we have significant number of icons in our app.
That is the reason why flaticons website chooses to preview with png instead of svg by default
