SVG — это формат векторных изображений,

SVG — это формат векторных изображений, основанный на XML.

Спецификация: w3.org/TR/SVG

SVG имеет массу преимуществ перед растровыми изображениями:

векторные изображения масштабируются без потери качества и лучше отображаются на устройствах с ретиной; SVG, как правило, весит несколько меньше, чем PNG-версия того же изображения; содержимое рисунка описывается на XML, SVG-файл можно открыть в текстовом редакторе и увидеть человекопонятный код; поэтому SVG-изображение можно не только нарисовать в векторном редакторе, но и написать руками; SVG-файл — это всегда исходник. В отличие от растровой графики, для его редактирования не требуется исходный PSD-файл, содержимое файла не склеивается в один слой, поэтому его всегда можно просто открыть и отредактировать. Правда, если в файле также есть стили и скрипты, лучше так не делать, потому что содержимое перезапишется; внутри SVG-файла можно описывать тени и градиенты, причем использовать их можно не только внутри этого файла, но также можно применять и к внешним элементам (пока работает не везде); внутри файла могут находиться CSS и JavaScript.

Пример SVG:

SVG хорошо поддерживается всеми современными браузерами и его уже вполне можно использовать, предусмотрев PNG-версии для старых браузеров.

Он хорошо подходит для использования в адаптивном дизайне, потому что без потерь растягивается и сжимается, меньше весит и не выглядит размытым на устройствах с высокой плотностью пикселей. Вот, например, скрин с современного смартфона:

Хорошо видно, что SVG (внизу) в этих условиях выглядит гораздо лучше, чем PNG (наверху). Так что если поставить себе задачу сделать сайт, который хорошо выглядит на любых устройствах, SVG очень пригодится.

Уже сейчас можно найти довольно много сайтов с готовой SVG-графикой, например:

iconmelon.com
icomoon.io
flaticon.com
iconmonstr.com

В основном, это наборы иконок.

Можно использовать картинки как есть, а можно перекрасить, объединить в стек, спрайт или сделать шрифт.

SVG на страницу можно вставить несколькими способами. Они по-разному поддерживаются браузерами и предоставляют разные возможности.
Embed/object/iframe

Содержимое доступно для внешнего JavaScript.
Хорошая поддержка браузерами (все, кроме IE8 и ниже).
Embed: Object: Iframe:

Embed:

Object:

Iframe:

Поддержка браузерами:
IE Opera Opera Mini Opera Mobile Chrome Firefox Safari
9+ 9+ 5+ 10+ 4+ 3+ 3.2+
IMG

Содержимое недоступно для JS.

Поддержка браузерами:
IE Opera Opera Mini Opera Mobile Chrome Firefox Safari
9+ 9+ 5+ 10+ 4+ 4+ 4+
Css backgrounds

Содержимое недоступно для JS. Могут быть проблемы в старых Операх. Не работает в Opera Mini В Opera Mini работает только без viewBox в SVG.

background-image: url(your.svg);

Поддержка браузерами:
IE Opera Opera Mini Opera Mobile Chrome Firefox Safari
9+ 12+ 5+ 16+ 5+ 24+ 5+
Inline SVG

Не работает в Opera Mini.

Поддержка браузерами:
IE Opera Opera Mini Opera Mobile Chrome Firefox Safari
9+ 11.6+ — 12+ 7+ 4+ 5.1+

Примеры в посте вставлены как есть, без фолбеков. Можно открыть страницу в интересующем браузере и посмотреть как поддерживаются разные способы вставки.
Способы отображение в старых браузерах:
1. Хак для элемента с фоном:

DIV { background-image: url(your.png); /* PNG для IE6-8 */ background-image: url(your.svg), none; }

Вторая строка сработает в браузерах с поддержкой CSS3, старые её проигнорируют и покажут PNG из первой строки.
2. Способ с image

Современные браузеры выберут атрибут xlink:href и покажут SVG, старые выберут src и покажут растровую версию:

Способ найден здесь: lynn.ru/examples/svg/.
Про этот способ есть статья у Криса Коера Svg fallbacks, в которой он анализирует этот вариант вставки и предлагает другие.

Способ хорошо работает в IE8 и Opera Mini.
Минус способа — загрузка обоих файлов в IE9-11, хотя отобразится только SVG. Также есть проблемы с отображением в 12-й Опере: вместо картинки иногда загружается вот такое:

SVG in Opera 12
3. Modernizr

Элементы, содержащие SVG-графику, заворачиваются в div.svg (например).
Затем определяем поддержку SVG с помощью Modernizr, браузеры без SVG определяем по классу .no-svg, дальше немного CSS: