Градиенты в SVG — это не просто «заливка фона». Это мощный инструмент для создания глубины, объема и живых интерфейсов, который живет по своим собственным, отличным от CSS, правилам. Основа всего — атрибут gradientUnits. По умолчанию он равен objectBoundingBox, что означает, что координаты градиента (x1, y1, x2, y2) задаются в относительных процентах от границ самого элемента. Это идеально для адаптивности, но если вам нужно, чтобы градиент оставался фиксированным относительно всего SVG-холста при масштабировании или перемещении фигуры, необходимо явно переключить его на userSpaceOnUse. Именно эта настройка чаще всего становится причиной того, что градиенты «плывут» или ведут себя непредсказуемо при CSS-трансформациях.
Самый современный и производительный тренд 2026 года — это гибридный подход, выносящий управление градиентом из XML-разметки в CSS. С помощью нативных CSS-переменных мы можем динамически менять stop-color или offset прямо из таблиц стилей, реагируя на ховеры или состояние приложения. А если зарегистрировать такую переменную через CSS Houdini @property (указав строгий синтаксис, например, <color> или <percentage>), мы получаем плавную, аппаратно-ускоренную интерполяцию цветов. Браузер делегирует эту задачу композитору, минуя тяжелый пересчет макета (Layout) и перерисовку (Paint), что дает молниеносную анимацию без единой строки JavaScript.
Если же классических линейных и радиальных градиентов вам уже тесно, пришло время присмотреться к <meshGradient>. Это долгожданная часть спецификации SVG 2, которая уже активно поддерживается современными браузерами. В отличие от обычных градиентов, mesh-градиенты используют сетку контрольных точек с собственными цветами (по аналогии с инструментом Mesh в Adobe Illustrator). Это позволяет создавать сложнейшие, органические, живописные переливы и реалистичные тени, которые раньше были возможны только через тяжелые растровые изображения или ресурсоемкий WebGL, сохраняя при этом все преимущества вектора: крошечный вес и идеальную четкость на любых экранах.
Важно помнить и о темной стороне производительности. Анимация атрибутов градиента через устаревший SMIL (<animate>) или постоянные вызовы JS может вызывать постоянную перерисовку слоя, сажая батарею мобильных устройств. Если градиент должен анимироваться, делайте это через CSS-переменные и @property. Также никогда не забывайте про доступность: красивый, сложный градиент не должен делать нечитаемым текст или иконку поверх него. Всегда проверяйте контрастность с помощью инструментов вроде Lighthouse или плагинов для проверки WCAG.
SVG-градиент — это идеальный мост между математической точностью кода и художественной выразительностью дизайна. Используйте gradientUnits осознанно, внедряйте CSS-переменные для интерактивности и смело экспериментируйте с mesh-градиентами для создания вау-эффектов. Сохраняйте этот гайд, чтобы ваши векторные работы всегда выглядели сочно, современно и работали молниеносно! Делитесь в комментариях своими любимыми приемами ра