Как пользоваться: SVG в Webflow
- В Figma щелкните правой кнопкой мыши слой с иконкой и выберите Copy as → Copy as SVG (или экспортируйте файл .svg).
- Вставьте код слева. Инструмент удалит метаданные и комментарии Figma и по умолчанию заменит цвета на
currentColor. - Выберите Custom Elements (нативные элементы svg/path) или Code Embed, задайте размер (и при необходимости имя класса), затем нажмите Copy to Webflow.
- В Webflow Designer выберите место для вставки и нажмите Ctrl/⌘+V. Если Webflow не принимает вставку, используйте однократную калибровку (скопируйте один Custom Element из Webflow и вставьте его в поле инструмента), затем повторите попытку.
Зачем вставлять SVG-иконки в Webflow как embed?
Иконку можно загрузить как изображение, но тогда цвета SVG фиксируются: их нельзя изменить при наведении, в темной теме или для отдельного компонента. Если разместить код SVG внутри Code Embed, он становится частью страницы и наследует CSS. С атрибутом fill="currentColor" иконка просто принимает цвет шрифта элемента, а взаимодействия или состояния при наведении Webflow могут менять ее цвет.
Что делает очистка
- Удаляет XML-объявление, комментарии,
<metadata>и служебные атрибуты редакторов Figma, Illustrator, Inkscape и Sketch. - Заменяет жестко заданные цвета
fillиstrokeнаcurrentColor(значенияnoneи ссылки на градиенты сохраняются). - Добавляет
viewBox, если его нет, и задает width/height 100%, чтобы размер определял блок-обертка. - Помечает декоративные иконки атрибутом
aria-hidden="true", а значимые —role="img"и подписью. - Удаляет скрипты и встроенные обработчики событий в целях безопасности и минифицирует результат.
Custom Elements или Code Embed
С помощью Custom Element в Webflow можно создать любой HTML-тег, включая svg, path, g, circle и linearGradient, и задать ему атрибуты. Так созданная иконка состоит из настоящих элементов Designer: каждый путь виден в Navigator, отдельным частям можно назначать классы, анимировать их через Interactions, привязывать атрибуты к полям CMS и редактировать значения без работы с кодом. Code Embed — это один блок HTML: проще, но в Designer он выглядит как «черный ящик».
| Custom Elements | Code Embed | |
|---|---|---|
| Редактирование в Navigator | Да, для каждого тега | Нет, редактируется код |
| Классы и взаимодействия для каждого пути | Да | Только через свой CSS/JS |
| Сложные иллюстрации | Много элементов, может замедлять работу | Лучший выбор |
Как работает «Copy to Webflow»
Когда вы копируете элементы в Webflow Designer, Webflow помещает в буфер обмена их описание в формате JSON. Этот инструмент создает такие же данные из вашего SVG: по одному Custom Element на каждый тег со всеми атрибутами, а выбранный размер задается для корневого svg (или необязательного класса). Поэтому при вставке создаются нативные элементы. Webflow официально не документирует этот формат буфера обмена. Если будущее обновление Webflow его изменит, в инструменте предусмотрена резервная калибровка: скопируйте любой Custom Element в Webflow Designer, вставьте его в поле калибровки, и инструмент определит актуальный формат и будет использовать его дальше (сохраняется только в вашем браузере).
Советы по иконкам в Webflow
- По умолчанию класс не добавляется. Если нужен общий размер, введите имя класса и используйте его повторно. Для масштабирования вместе с текстом используйте гибкие единицы измерения.
- Очень большие или сложные SVG (иллюстрации, карты) лучше загружать как изображения: в Embed есть ограничение на количество символов (сейчас 50 000).
- Для фонов или масок SVG используйте инструмент SVG в CSS, а для проектов на React — SVG в JSX.
Также ищут как: svg embed, figma в webflow, иконки svg, currentcolor, webflow clipboard, xscpdata.
Инструменты, которые хорошо сочетаются с SVG в Webflow
- Figma CSS в Webflow — Превратите результат «Copy as CSS» из Figma в аккуратные значения, которые можно сразу вводить в панель Style Webflow.
- Markdown в Webflow Rich Text — Вставьте Markdown, проверьте предпросмотр и скопируйте его как форматированный текст.
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
- Редиректы с WordPress на Webflow — При переносе сайта с WordPress на Webflow меняется почти каждый URL: даты в путях блога, архивы /category/, закрывающие слэши и слаги страниц.
Часто задаваемые вопросы
Почему вставка в Webflow не работает?
Можно ли редактировать пути SVG после вставки?
path, g или circle является отдельным элементом. Выберите его в Navigator и измените атрибуты (например, d или fill) в настройках элемента либо назначьте класс для стилизации.Как изменить цвет иконки в Webflow?
Безопасно ли вставлять SVG из неизвестных источников?
foreignObject и встроенные обработчики событий, но все равно используйте только SVG из проверенных источников.Работает ли инструмент с многоцветными иконками?
currentColor только для некоторых из них.