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 не ограничивается платной подпиской, но скачивание дизайна в формате SVG доступно только для платных планов. Скачайте его в формате PNG, а затем выполните конвертацию PNG в SVG в Canva по этой ссылке.
Правила 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 накладывает фигуры друг на друга, а не вырезает в них отверстия. Счётчик буквы «О» или отверстие внутри кольца — это фигура цвета фона, расположенная поверх сплошной фигуры, поэтому в Figma вы увидите перекрывающиеся слои. Это выглядит правильно на соответствующем фоне, но проявляется на любом другом цвете.
Чтобы вырезать отверстие, выберите верхнюю форму вместе с нижней и примените операцию «Вычитание» из булевых операций Figma.
Текст: отслеженные контуры или живой текст?
При отключенном распознавании текста буквы обводятся как фигуры. Это выглядит точно так же, как оригинал, и работает в обоих приложениях, но вы не можете переписать его.
При включённой опции обнаруженный текст преобразуется в живой SVG-текст, а SVGR также выполняет цветовую оптимизацию, которая может добавлять градиентные заливки. В Canva требуется, чтобы текст был разбит на кривые, поэтому там эту функцию следует отключить. Figma импортирует SVG-текст как живой текст, но с ограничениями: игнорируется прозрачность текста, размеры шрифтов в em считываются как пиксели, а межбуквенный интервал для отдельных текстовых фрагментов игнорируется.
Для логотипов отключите функцию «Распознавание текста». Если вам нужны редактируемые заголовки, введите их в Figma с правильным шрифтом.
Границы познания
- Конвертация PNG в SVG для Canva и Figma подходит для плоской графики, но не для фотографий. Отфотошопленная фотография превращается в большой и сложный файл; для Canva загружайте саму фотографию в формате JPG или PNG.
- Мягкие PNG-файлы могут содержать почти идентичные цвета, например, несколько оттенков, близких к чёрному. Перекрасьте их в один цвет в Figma или другом редакторе, если вам нужна чистая палитра.
- То, как Canva позволяет перекрасить загруженный SVG-файл, зависит от самого файла, и мы не проверяли это на каждом дизайне. Загрузите один тестовый файл, прежде чем создавать шаблон на его основе.
- В Canva также важно расположение фигур друг над другом. При прозрачном фоне внутренняя часть буквы «О» сохраняет свой исходный цвет фона и выглядит как пятно на любом другом цвете. Вырежьте эти отверстия в Figma или с помощью функции «Путь > Разность» в 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 использует один кредит.