Дополню про svg спрайт, спрайт можно не вставлять в разметку, а положить в папку img/sprite.svg (для поддержки во всех ie и старых браузеров понадобится
https://github.com/jonathantneal/svg4everybody) тогда файл будет кешироваться ,в разметке иконка будет вызываться
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite.svg#icon"></use>
</svg>
Помимо спрайтов svg вставляется инлайн в код разметки, можно стилизовать, как весь svg, так и отдельные и сгруппированные его части - path
На свг часто делают декоративные переходы между блоками (треугольные косые, пример -
tympanus.net/codrops/2013/10/03/a-collection-of-se... )
Svg удобен тем что он идеально подходит для адаптивных сайтов, т.к. это векторный формат
В двух словах не рассказать всего - лучше почитать вот эти подборки по теме svg:
https://css-tricks.com/mega-list-svg-information/
https://sarasoueidan.com/tags/svg/ 
