PNG у SVG для Canva та Figma
Ваш логотип розмивається при збільшенні в Canva, або вам потрібні справжні векторні шари у Figma. Перетворіть PNG на SVG з плоским кольором, який відповідає правилам завантаження Canva.
Перетягніть ваш PNG сюди
Перетягніть зображення або клацніть, щоб вибрати файл.
Вибрати зображенняPNG, JPG, WEBP, BMP, GIF
Конвертер відкривається з рекомендованими нижче налаштуваннями. Відкрити конвертер без файлу
Вихідна растрова сітка
вектор SVG
Як конвертувати PNG у SVG для Canva або Figma
- Починайте з найчистішого PNG. Використовуйте найбільшу версію, яку маєте, обрізану до зображення. Плоскі кольори та чіткі краї добре відтворюються.
- Upload and convert. Перетягніть PNG-файл вище; також підходять JPG, WEBP, BMP та GIF розміром до 15 МБ. Пресет застосовується, а перегляд є безкоштовним без реєстрації.
- Check the preview. Шукайте сторонні плями, відсутні деталі та зайві відтінки того ж кольору та за потреби налаштуйте якість.
- Download the SVG. Завантажте його за один кредит. Для Canva переконайтеся, що файл важить менше 3 МБ; якщо ні, знизьте якість і конвертуйте знову.
- Import it. В Canva додайте його через ваші завантаження. У Figma перетягніть SVG на робочу область.
Рекомендовані налаштування
Чому PNG стає розмитим у Canva та Figma
PNG — це сітка пікселів. Збільште її для банера в Canva або великої рамки у Figma, і краї стануть м'якими та зубчастими. Перетворення PNG на SVG для Canva та Figma замінює пікселі векторними фігурами, тому графіка залишається чіткою за будь-якого розміру.
Це також допоможе, якщо ви створили логотип на безкоштовному плані Canva. Завантаження SVG-файлу до Canva не обмежується Pro-планом, але завантаження вашого дизайну у форматі SVG є функцією платного плану. Завантажте його як PNG, а потім виконайте крок перетворення Canva PNG у SVG тут.
Правила Canva для завантаження SVG
У центрі допомоги Canva перелічено кілька вимог до завантаження SVG-файлів. Ось як кожна з них відповідає SVGR.
| Canva asks for | How to get there in SVGR |
|---|---|
| A file under 3 MB | Перемістіть якість до меншого файлу або обріжіть джерело лише до художнього оформлення |
| SVG 1.1 | Це не налаштування в SVGR; якщо Canna відхиляє файл, спочатку перевірте рядки розміру та градієнта |
| Розгорнути всі штрихи, шляхи та текстові поля | Вивід складається з заповнених фігур без контурів; залиште розпізнавання тексту вимкненим, щоб не додавати живий текст |
| Уникайте використання текстур і градієнтів | За умови вимкнення типів дизайну та розпізнавання тексту SVGR відтворює плоскі кольори; починайте з плоского мистецтва, оскільки градієнт у вихідному файлі перетворюється на смуги кольорів |
Те, що ви побачите, коли імпортуєте SVG у Figma
Figma імпортує SVG як векторні шари, тому ви можете виділяти, змінювати колір і змінювати розмір фігур безпосередньо. Ось у чому суть перетворення PNG у Figma на SVG: ви отримуєте редаговані фігури замість плоского зображення.
SVGR накладає фігури одна на одну, а не вирізає отвори. Лічильник літери O або проміжок всередині кільця — це фігура кольору фону, яка знаходиться поверх суцільної фігури, тому у Figma ви побачите перекриття шарів. Це виглядає правильно на відповідному фоні, але помітно на будь-якому іншому кольорі.
Щоб створити справжній отвір, виберіть верхню форму разом із нижньою та застосуйте операцію "Відняти" з булевих операцій Figma.
Текст: відстежені контури чи живий текст?
За умови вимкненого розпізнавання тексту, літери відтворюються як фігури. Виглядає точно так само, як оригінал, і працює в обох програмах, але ви не можете редагувати його.
За наявності цього налаштування виявлений текст стає живим SVG-текстом, а SVGR також виконує кольорове уточнення, що може додати градієнтні заливки. Canva вимагає, щоб текст був розгорнутий, тому там цей параметр слід залишити вимкненим. Figma імпортує SVG-текст як живий текст, але з недоліками: прозорість тексту ігнорується, розміри шрифтів, задані в em, читаються як пікселі, а інтервал між літерами для окремих текстових блоків ігнорується.
Для логотипів вимкніть розпізнавання тексту. Якщо вам потрібні редаговані заголовки, перепишіть їх у Figma правильним шрифтом.
Межі пізнання
- Конвертація PNG у SVG для Canva та Figma підходить для плоскої графіки, а не для фотографій. Відсканована фотографія стає великим і складним файлом; для Canva завантажте саму фотографію у форматі JPG або PNG.
- М'які PNG-зображення можуть мати майже однакові кольори, наприклад, кілька відтінків майже чорного. Перекрасте їх в один колір у Figma або іншому редакторі, якщо вам потрібна чиста палітра.
- Те, як Canva дозволяє перекрашувати завантажений SVG, залежить від файлу, і ми не перевіряли це на кожному дизайні. Завантажте один тестовий файл, перш ніж створювати шаблон на його основі.
- У Canva також важливим є накладання фігур. За прозорого фону внутрішня частина літери «О» зберігає свій початковий колір тла і виглядає як пляма на будь-якому іншому кольорі. Виріжте ці отвори у Figma або за допомогою Path > Difference (Різниця) у Inkscape перед завантаженням.
- Прозорий фон видаляє форму, намальовану кольором, що знаходиться в кутах зображення, — саме це люди мають на увазі під «фоном». Якщо ваше зображення виходить за межі всіх чотирьох кутів або кути мають різні кольори, нічого не видаляється, і фон залишається — надайте зображенню рівномірний відступ по краях і повторіть конвертацію. Області, повністю оточені зображенням, ніколи не видаляються, а PNG, який уже має канал прозорості, залишається без змін.
- Криві відтворюються як багато коротких прямих відрізків. Відтворені з маленького зображення, вони можуть виглядати трохи кутовими при збільшенні, тому починайте з найбільшої копії, яка у вас є.
Часто задавані запитання
Чи можу я завантажити SVG до Canva за безкоштовним планом?
Так. Завантаження SVG-файлів не обмежується тарифом Pro; завантаження вашого дизайну у форматі SVG є функцією платного тарифу. Зберігайте розмір файлу до 3 МБ.
Чому мій SVG не виглядає правильно в Canva?
Canva запитує файли SVG 1.1 розміром до 3 МБ, зі зведеними штрихами, шляхами та текстом і без текстур або градієнтів. Спочатку перевірте наявність живого тексту та градієнтних заповнень: знову конвертуйте, вимкнувши функцію «Розпізнавання тексту», виходячи з плоского кольору.
Чому на Figma фігури накладаються одна на одну?
SVGR складає фігури: отвір у літері або кільці — це фігура кольору фону, накладена на суцільну фігуру. Виділіть обидва і використовуйте «Відняти», щоб перетворити її на справжній отвір.
Can I edit the text?
За умови вимкненої функції "Розпізнавання тексту" текст перетворюється на фігури: ви можете змінити його колір та форму, але не редагувати вміст. Якщо функцію увімкнути, Figma імпортує текст як живий, хоча й ігнорує прозорість тексту та деякі параметри міжлітерного інтервалу. У Canva текст має бути розгорнутий, тому там цю функцію слід залишити вимкненою.
Is the file too big?
Ліміт Canva для завантаження SVG-файлів становить 3 МБ. Перемістіть якість у бік «Менший файл», обріжте до малюнка або зменште кількість кольорів у вихідному файлі, а потім конвертуйте знову.
Чи можу я векторизувати зображення для Canva, якщо це JPG або скріншот?
Так. SVGR приймає PNG, JPG, WEBP, BMP та GIF розміром до 15 МБ. Конвертування та перегляд безкоштовні без реєстрації; завантаження коштує один кредит.
Пов'язані сценарії використання
Готові конвертувати?
Конвертування та перегляд безкоштовні, без необхідності облікового запису. Завантаження SVG або PDF використовує один кредит.