Как импортировать и редактировать файлы SVG в Figma, Canva или WordPress?

У вас есть SVG. Что дальше?

Большинство конвертеров останавливаются на кнопке Скачать. Но файл бесполезен, если он остается в папке Загрузки. Дизайнер открывает его в Figma, чтобы применить фирменный стиль. Комьюнити-менеджер добавляет его в Canva для публикации. Интегратор помещает его в WordPress для логотипа в шапке сайта. Именно этот следующий шаг доказывает, что PixelToPath вписывается в реальный рабочий процесс, а не в демо.

SVG от PixelToPath — это не статичное изображение. Это набор контуров: каждая фигура имеет заливку, возможно, обводку. Изменить синий цвет логотипа на бордовый, изолировать иконку, увеличить для истории 1080x1920: все это делается в инструменте, который вы уже используете, без необходимости возвращаться в Illustrator.

Почему Figma, Canva и WordPress любят этот формат

После импорта PNG и JPG становятся растровыми изображениями. Перекрасить логотип PNG в Figma — значит наложить слой поверх, а не изменить цвет контура. Canva не предложит цветовые палитры. WordPress будет обслуживать тяжелый файл, размытый на экранах Retina. SVG решает сразу три проблемы.

В частности, SVG от PixelToPath дает вам:

• Редактируемые контуры: один цвет на фигуру, который можно изменить в Figma (Заливка) или Canva (цветовые палитры)
• Легкий файл, значительно ниже ограничения в 3 МБ в Canva, который загружается на сайт WordPress быстрее, чем PNG @2x
• Одинаковая четкость в фавиконе, баннере LinkedIn или ролл-апе: один и тот же файл
• Результат, который вы можете отправить клиенту: он открывает его в том инструменте, который у него есть, а не в Creative Cloud

Figma: импорт SVG и изменение цветов

Figma импортирует SVG как группу векторов, а не как фотографию. В этом весь смысл: каждая фигура остается слоем, который вы можете перекрасить, переместить или скрыть.

1. Скачайте файл .svg с PixelToPath и откройте свой файл Figma.
2. Перетащите файл из проводника прямо на холст. Вариант: Файл → Импорт или Ctrl+Shift+K (Cmd+Shift+K на Mac) для размещения SVG.
3. Слой появляется как группа. Дважды щелкните, чтобы войти в него, или щелкните правой кнопкой мыши → Разгруппировать (Shift+Ctrl+G / Shift+Cmd+G), если хотите управлять фигурами по одной.
4. Выберите контур. На правой панели в разделе Заливка (Fill) щелкните цветовую палитру: hex, образцы, пипетка. Вся фигура изменится, края останутся четкими.
5. Для монохромного логотипа выберите все фигуры в группе и примените один цвет. Затем экспортируйте в SVG, PNG или PDF из раздела Экспорт, если результат больше не должен быть векторным.

Если Figma отображает плоское изображение вместо векторных слоев, файл содержит растровое изображение (инкапсулированный PNG). Этого не происходит при экспорте из PixelToPath с пресетом Черно-белый или Плакат. Переконвертируйте оригинал с одним из этих двух режимов, а не с режимом Фото.

Canva: загрузка SVG и перекрашивание

Canva принимает SVG как в бесплатной версии (Free), так и в Pro. Перекрашивание работает, когда файл простой: однородные цвета, мало узлов, нет градиентов. Именно это делает PixelToPath с режимами Плакат или Черно-белый.

1. В Canva откройте дизайн. Левая панель → Загрузки → Загрузить файлы. Выберите ваш .svg (менее 3 МБ; экспорт из PixelToPath значительно меньше).
2. Как только файл окажется в загрузках, перетащите его на страницу. Измените его размер за маркеры: вектор остается четким, в том числе в формате истории или A4.
3. Щелкните SVG. На панели инструментов появятся цветовые палитры, по одной для каждого оттенка файла. Щелкните по палитре, выберите новый цвет: Canva применит его ко всем фигурам этого оттенка.
4. Если цветовые палитры не появляются, SVG слишком сложный (градиенты, слишком много цветов, контуры типа Фото). Вернитесь в PixelToPath, переключитесь на Плакат или Черно-белый, экспортируйте и импортируйте снова.

Canva рекомендует профиль SVG 1.1, сгруппированные фигуры одного цвета и отсутствие текстур. Пресеты логотипов PixelToPath уже соответствуют этим ограничениям. Нет необходимости использовать Illustrator для «подготовки» файла.

WordPress: как разрешить загрузку SVG без создания уязвимостей

По умолчанию WordPress запрещает SVG, и это не прихоть. SVG — это XML: он может содержать JavaScript, внешние сущности, полезную нагрузку XSS. Посетитель или скомпрометированный аккаунт редактора, загружающий вредоносный SVG, может выполнить код в админке. Отсюда и блокировка. Нужно разрешить формат и очистить файл.

Не просто добавляйте image/svg+xml в functions.php. Без очистки файла вы открываете уязвимость. Безопасный метод: поддерживаемый плагин, который очищает скрипты, события onload и XML-сущности. Safe SVG (10up), более миллиона установок.

1. В админке WordPress: Плагины → Добавить новый. Ищите Safe SVG (автор: 10up). Установите и активируйте.
2. Перейдите в Настройки → Медиафайлы. Ограничьте загрузку SVG для администраторов (или доверенных ролей). Не открывайте формат для всех аккаунтов Авторов, если на сайте несколько участников.
3. Медиафайлы → Добавить новый. Загрузите .svg от PixelToPath. Плагин очищает его при импорте и показывает превью в медиабиблиотеке, чего WordPress не делает изначально.
4. В записи или на странице вставьте блок Изображение и выберите SVG. Для логотипа в шапке используйте Настроить / Свойства сайта или блок Изображение в шаблоне темы (редактор сайта).
5. Вариант для разработчиков: не используйте медиабиблиотеку. Поместите файл в тему (assets/logo.svg) и ссылайтесь на него в шаблоне, или встройте его (inline) для стилизации в CSS. Нет загрузки, следовательно, нет поверхности атаки через медиабиблиотеку.

Safe SVG также может ограничить права на загрузку. Обновляйте плагин: очистка файла — это настоящий контроль, а не просто галочка «разрешить SVG».

Какой SVG от PixelToPath вставлять в эти инструменты?

Редактор принимает то, что вы ему даете. Неправильный пресет проявится при импорте: слишком много фигур, невозможность изменить цвета, отклоненный файл.

• Логотип, иконка, надпись: Черно-белый или Плакат. Это однородные цвета, Figma и Canva перекрашивают их в один клик.
• Избегайте Фото, если планируете менять цвета. Этот режим создает множество мелких фигур; Canva часто не показывает полезных цветовых палитр.
• Обрежьте оригинал перед конвертацией: меньше фона, меньше узлов, более читаемый SVG в слоях Figma.
• Один вариант для каждого использования: монохромный SVG для Figma (фирменный стиль), цветной SVG для Canva (пост), тот же очищенный файл для WordPress (шапка).

Где этот процесс меняет повседневную работу

Как только SVG оказывается в инструменте, вы перестаете конвертировать для каждой вариации:

• Фирменный стиль Figma: PNG клиента становится компонентом, который вы перекрашиваете (основной, инвертированный, монохромный) без перерисовки
• Публикации Canva: один SVG, шесть цветов кампании, четкие истории и карусели
• Логотип WordPress: файл в шапке, четкий на мобильных устройствах и Retina, легче, чем старый PNG
• Результат для фрилансера: вы отдаете SVG плюс инструкцию для Figma / Canva. Клиент больше не заблокирован
• Иконки интерфейса: импортируйте их в Figma пачкой, выровняйте по сетке 24 px, экспортируйте набор

Оставьте PNG для фотографий. Для всего, что должно менять цвет или оставаться четким, связки PixelToPath + Figma / Canva / WordPress будет достаточно.