Как начать использовать SVG прямо сейчас

Довольно часто сталкиваюсь с проектами, где для оформления элементов дизайна страниц неразумные разработчики все еще используют растровые изображения. Шел 15-й год XXI века, а мы по-прежнему видим тяжеловесный растр вместо средств CSS и вектора в SVG. Ретина-дисплей? — Нет, не слышал. Стала очевидна необходимость еще раз разжевать что такое SVG и почему его нужно использовать.

Вкратце SVG — это векторный формат графики для Интернета, который базируется на XML. Его давно поддерживают все современные браузеры.

Используем на странице:

Все просто.

<img src="logo.svg" alt="Логотип нашей компании">

Используем в CSS

Если нужно использовать в качестве элемента страницы, то смело вставляем в CSS. Перед этим нужно закодировать в base64.

.mylogo {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url(data:image/svg+xml;base64,[encoded-svg-here]);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Обязательно указывайте background-size.

Также есть способ лучше: минифицировать код, чтобы он шел в одну строку и закодировать через urlencode (например, здесь).
Тогда убираем base64 и дописываем определение кодировки utf-8.

background-image: url(data:image/svg+xml;charset=utf-8,[encoded-svg-here]);

Где взять SVG?

SVG поддерживается многими графическими редакторами векторной графики. Например, Inkscape и Adobe Illustrator (боже вас упаси использовать Corel Draw).
Лично мне нравится Illustrator и формат SVG 1.1 по-умолчанию. Он выдает довольно чистый и аккуратный код, который можно посмотреть на кнопку SVG Code. SVG можно получить путем конвертации в Иллюстраторе векторных форматов EPS, AI и других. Либо трассировать растровое изображение.

Скачать готовые SVG можно в Википедии — там целый кладезь изображений разного качества с бесплатными лицензиями. Открываются они также Иллюстратором.

Продолжение следует…

Немного информации как использовать SVG для Email (англ.)