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.
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