Как изменить цвета анимированного SVG (экспорт Figma)

Когда анимированный SVG возвращается в неправильную палитру, повторное открытие Figma, редактирование каждого слоя и повторный экспорт выполняются медленно, и зачастую исходный файл не принадлежит вам. Если движение правильное, а неправильные только цвета, прямая перекраска будет быстрее и безопаснее. Вы сохраняете точную анимацию и меняете только заливки и обводки.

Сюда входят экспорт движений Figma, библиотеки значков и SVG-файлы торговой площадки, которые поставляются в общей палитре или предназначены для светлого режима, когда вам нужен темный режим. Это также происходит при передаче: разработчик получает SVG, команда бренда меняет цвет через неделю, и никто не хочет просматривать файл дизайна туда и обратно для получения одного шестнадцатеричного значения.

Анимированный SVG из инструмента дизайна обычно состоит из двух частей. Движение находится в элементе стиля CSS @keyframes, который применяется к фигурам через имена классов. Цвет задается самими фигурами в виде атрибутов заливки и обводки или свойств встроенного стиля. Поскольку они разделены, цвета можно заменять, не затрагивая анимацию, при условии, что редактор меняет только цветные маркеры.

Figma добавляет сложности. Чтобы сохранить цвета с широкой гаммой, при экспорте цвет часто записывается дважды в один и тот же атрибут стиля: сначала как шестнадцатеричное значение, затем как цвет (display-p3 r g b). В CSS побеждает последнее допустимое объявление, поэтому в браузерах, поддерживающих display-p3, шестнадцатеричное значение игнорируется. Редактируйте только шестнадцатеричный код, и на экране ничего не изменится. Это наиболее распространенная причина, по которой люди думают, что перекрашивание SVG не ​​сработало.

Все работает локально в вашем браузере, поэтому SVG никогда не загружается.

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

Если SVG попадает в базу кода, сравните его с оригиналом. Чистая перекраска изменяет только значения цвета, а для экспорта Figma удаляет переопределения p3. Любое изменение блока стиля, имен классов или данных пути означает что-то иное, чем изменение цвета.

Если пункту назначения требуется Lottie, а не SVG, анимированный SVG можно преобразовать в настоящий вектор Lottie с помощью инструмента Figma в Lottie. Сначала перекрасьте, если хотите, чтобы изменения были сохранены в обоих файлах. Если вы ожидаете большего изменения цвета в дальнейшем, сначала выполните преобразование, поскольку цвета Lottie можно снова поменять местами в любое время с помощью устройства смены цветов Lottie.

Lottie обычно является лучшим форматом времени выполнения для приложений, поскольку встроенные проигрыватели на iOS и Android поддерживают его и обеспечивают управление воспроизведением. SVG проще использовать для веб-страницы, где достаточно анимации CSS.