Растровые vs векторные изображения
Изображения делятся на две категории:
- Растровые (JPEG/PNG/WebP): состоят из пикселей; при увеличении до определённого предела размываются и появляются мозаичные квадраты
- Векторные (SVG): описаны математическими контурами; при любом увеличении остаются чёткими
Поняв эту принципиальную разницу, вы поймёте, для чего подходит SVG.
Главные преимущества SVG
Бесконечное масштабирование без потерь
SVG описывает графику контурами, кривыми и фигурами, а не пикселями. При увеличении до любого размера остаётся резким, без мозаики. Это главное преимущество SVG, особенно подходящее иконкам и логотипам, требующим нескольких размеров.
Малый размер (для простых фигур)
Для простых иконок и логотипов файл SVG заметно меньше эквивалентного PNG. Простой логотип в PNG может весить от нескольких КБ до десятков КБ, а в SVG — лишь 1–2 КБ. Но для сложных фотоизображений SVG не подходит.
Редактируется кодом
SVG по сути — XML-текст; в текстовом редакторе можно напрямую менять цвет, форму, текст. На фронтенде цвет задаётся через CSS, а динамическое изменение — через JS; для растровых изображений это невозможно.
Поддержка анимации
SVG поддерживает встроенную анимацию и анимацию через CSS/JS. Прелоадеры и анимированные иконки на SVG лёгкие и плавные.
Доступно для поиска и индексации
Текст внутри SVG — настоящий текст, который индексируется поисковиками и читается скринридерами, что удобнее, чем текст внутри картинки.
Для чего подходит SVG
- Иконки: навигационные и функциональные иконки — первый выбор в UI-дизайне
- Логотипы: брендовые логотипы нужны в нескольких размерах; векторный формат оптимальен
- Иллюстрации: плоские иллюстрации, декоративные элементы
- Графики: диаграммы визуализации данных в векторе остаются чёткими при масштабировании
- Шрифтовые иконки: по сути это SVG
Для чего SVG не подходит
- Фотографии: в них насыщенные цвета и множество деталей; векторное описание раздувает размер и искажает. Для фото берите JPEG/WebP
- Сложные градиенты и текстуры: чрезмерно сложные градиенты и текстуры увеличивают размер SVG; растровый формат лучше
- Нужны эффекты фильтров: сложные фильтры эффективнее в растре
Ограничения SVG
Вопросы совместимости
Современные браузеры полностью поддерживают SVG, но некоторые старые среды и почтовые клиенты работают с ним плохо. В важных случаях протестируйте.
Сложные графики получаются большими
Фото, переведённое в SVG, становится огромным и искажённым. SVG не универсален; он подходит только для векторной графики.
Порог обучения
Рисование SVG требует навыков векторной графики, в отличие от растровой, которую можно получить съёмкой. Но готовые SVG-ресурсы или инструменты растрового-в-SVG снижают порог.
Растр в SVG
Конвертация растрового изображения (например, PNG) в SVG — это «трассировка»: инструмент распознаёт границы фигур в картинке и создаёт приближённые векторные контуры.
Используйте инструмент изображения в SVG:
- Загрузите растровое изображение (рекомендуется простое, высококонтрастное, например логотип)
- Инструмент трассирует и создаёт SVG
- Скачайте SVG
На что обратить внимание при конвертации
- Простые фигуры (логотипы, иконки) хорошо переводятся в SVG
- Фото и сложные изображения в SVG искажаются и становятся большими — не рекомендуется
- После конвертации проверьте гладкость краёв и точность цветов
- Готовый SVG можно дополнительно оптимизировать в текстовом редакторе
Рекомендации по использованию SVG
Встраивать в HTML
Небольшие SVG встраивайте прямо в HTML: это экономит HTTP-запросы и позволяет управлять через CSS.
Использовать currentColor для иконок
Заливка иконок SVG через currentColor позволяет менять цвет иконки цветом CSS — один набор иконок в разных цветах.
Сжимать SVG
SVG — это текст, и его можно сжать инструментами (удалить комментарии, упростить контуры). Сжимайте перед публикацией, чтобы уменьшить размер.
Итог
Суть SVG — «вектор, масштабируемость, редактируемость». Иконки, логотипы, иллюстрации и графики лучше в SVG; фотографии — в растре. Перевод растра в SVG подходит для простых фигур. Инструмент конвертации в SVG от DocsAll работает в браузере и за один клик превращает растровый логотип в векторный, облегчая дальнейшее использование в разных размерах.