Як імпортувати та редагувати файли SVG у Figma, Canva або WordPress?

У вас є SVG. Що далі?

Більшість конвертерів зупиняються на кнопці Завантажити. Але файл не має сенсу, якщо він залишається в папці Завантаження. Дизайнер відкриває його у Figma, щоб застосувати брендбук. SMM-менеджер додає його в Canva для публікації. Інтегратор розміщує його у WordPress для логотипа в шапці. Саме цей наступний крок доводить, що PixelToPath вписується в реальний робочий процес, а не просто демо.

SVG від PixelToPath – це не статичне зображення. Це набір контурів: кожна фігура має заливку, іноді обводку. Змінити синій колір логотипа на бордовий, виділити іконку, збільшити для сторіз 1080x1920: усе це робиться в інструменті, яким ви вже користуєтеся, без необхідності відкривати Illustrator.

Чому Figma, Canva та WordPress люблять цей формат

PNG і JPG після імпорту є растровими зображеннями (bitmaps). Щоб змінити колір логотипа 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. Перетягніть файл з провідника прямо на полотно (canvas). Або: Файл → Імпорт, або 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. Для логотипа в шапці використовуйте Налаштування (Customizer) / Ідентичність сайту (Site Identity) або блок Зображення в шаблоні теми (редактор сайту).
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.