Попробую ответить.
1. Растр в спрайты. Под ретину можно 2@
2. Есть несколько способов хранить и использовать svg спрайты. SVG спрайт — это всего лишь файл где поиск по svg элементам происходит по id.

<symbol viewBox="0 0 21 21" id="add_icon">
    <title>add</title>
    <path d="M10.5 1C5.3 1 1 5.2 1 10.5S5.3 20 10.5 20s9.5-4.3 9.5-9.5S15.7 1 10.5 1zm0 1c4.7 0 8.5 3.8 8.5 8.5S15.2 19 10.5 19 2 15.2 2 10.5 5.8 2 10.5 2zM10 6v4H6v1h4v4h1v-4h4v-1h-4V6h-1z"/>
</symbol>

На странице используем тег 'use', где атрибут xlink:href — это ссылка на svg, у с указанием идентификатора, например:

<svg class="ico-svg">
  <use xlink:href="/ico/ico-set.svg#add_icon"></use>
</svg>

Для поддержки отсталых браузеров используем полифил https://github.com/jonathantneal/svg4everybody. Управляем цветом через свойство fill
3. Элементы интерфейса, такие, как иконки, лучше конечно в векторе хранить. Растр — сжимать.
4. Мелкие элементы в base64. habrahabr.ru/post/116538
Все это собирается, пакуется и т.д. сборщиками, все верно.
Для SVG у нас используется очень замороченая система, которая: собирает svg-файлы от дизайнеров, клеит из них спрайт, генерирует png спрайты в разных цветах и генерирует стили для них. А еще парсит превью всего этого на отдельной странице, для теста.
Мы используем gulp и плагины для этого:
https://www.npmjs.com/package/gulp-optipng
https://www.npmjs.com/package/gulp-raster
https://www.npmjs.com/package/gulp.spritesmith
https://www.npmjs.com/package/gulp-svg-sprite-plus
https://www.npmjs.com/package/gulp-imagemin

Еще один способ от Владимира Кузнецова. У него все проще, потому что задач таких, как у нас не стояло.