Using data instead of svgs has a huge benefits. SVGs – when optimized with svgomg (big shout out – really great gui) is already a wonderful addition to my toolbox on optimising pages, nevertheless, sometimes you want to use background-image in CSS. Then I’d prefer to prevent one more unnecessarily request http request. So, data-uris come in. CSStricks has a sweet article about it.
I’ve read that bigger data-uris don’t actually help with performance! Plus the css files gets massive because of it. Sometimes it’s better just to cache your images or small svgs.
Inline SVG is the way to go for certain cases when you need more control over svgs! Also great browser compatibility.
