I very recently rebuilt my website so that the entire UI is vector-based, mostly with SVGs (a few places with HTML entities). I also set it up to slurp the minimized SVGs into the top of the html, then I render each SVG on the page with the format:

    <svg><use xlink:href="#svg-name" /></svg>

...rather than making a new HTTP connection for each image.

This dramatically reduced the number of HTTP connections to load the site. There's one initial connection for the html, one for the css, one for js, and one for fonts (Google Fonts). I do use JPEG for photos, but those are lazy-loaded, so the initial page paint is very snappy despite our wimpy server. And it looks crispy on all screen sizes (even in milk!).

Some have said that SVG on the web is dying, but it can work so beautifully that I hope the nay-sayers are mistaken.