PNG в SVG для Canva и Figma

Ваш логотип размывается при увеличении в Canva, или вам нужны настоящие векторные слои в Figma. Преобразуйте PNG в SVG с плоским цветом, соответствующий правилам загрузки Canva.

Перетащите ваш PNG сюда

Перетащите изображение или щелкните, чтобы выбрать файл.

Выбрать изображение

PNG, JPG, WEBP, BMP, GIF

Конвертер открывается с рекомендуемыми ниже настройками. Открыть конвертер без файла

Исходная растровая сетка

Плоская иконка ракеты на бирюзовом круге, сохранена в формате PNG

вектор SVG

Та же иконка, переведенная в SVG, как несколько плоских цветных фигур
Неотредактированный вывод SVGR с указанными ниже настройками: несколько плоских фигур, без живого текста и без градиентов, значительно ниже предела загрузки в 3 МБ в Canva.

Как конвертировать PNG в SVG для Canva или Figma

  1. Начните с самого чистого PNG. Используйте самую большую версию, которую у вас есть, обрезанную по рисунку. Плоские цвета и чёткие края хорошо отслеживаются.
  2. Upload and convert. Перетащите PNG-файл выше; также поддерживаются JPG, WEBP, BMP и GIF размером до 15 МБ. Пресет применяется, а предварительный просмотр бесплатен без регистрации.
  3. Check the preview. Ищите посторонние частицы, отсутствующие детали и лишние оттенки того же цвета и при необходимости отрегулируйте качество.
  4. Download the SVG. Скачайте его за один кредит. Для Canva убедитесь, что файл весит менее 3 МБ; если нет, снизьте качество и конвертируйте снова.
  5. Import it. В Canva добавьте его через ваши загрузки. В Figma перетащите SVG на холст.

Рекомендуемые настройки

Тип изображенияДизайнДизайн подходит для плоских цветовых график, таких как иконки, логотипы и значки: жесткие края, плоские заливки и отсутствие обрезанных плиток в файле.
Качество5/105 баланс между детализацией и размером файла; уменьшите его, если SVG превышает лимит 3 МБ в Canva, увеличьте для тонких деталей в Figma.
Распознать текстВыкл.Выключено, поэтому текст обводится как фигуры: Canva просит расширить текст, а шрифт логотипа сохраняет свой точный дизайн.
Прозрачный фонНаOn, поэтому внешний фон удаляется, а графика размещается на любом фоне Canva или Figma.
Объединить контурыВыкл.Не оказывает влияния на тип дизайна (применяется только к типам фото), поэтому оставьте его выключенным.

Почему PNG становится размытым в Canva и Figma

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

Также полезно создать логотип на бесплатном плане Canva. Загрузка SVG-файла в Canva не ограничивается платной подпиской, но скачивание дизайна в формате SVG доступно только для платных планов. Скачайте его в формате PNG, а затем выполните конвертацию PNG в SVG в Canva по этой ссылке.

Правила Canva для загрузки SVG

В центре помощи Canva перечислены несколько требований к загрузке SVG. Вот как каждое из них соотносится с SVGR.

Требования к загрузке SVG в Canva и как их выполнить
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 МБ. Конвертация и предварительный просмотр бесплатны и не требуют регистрации; для скачивания требуется один кредит.

Связанные сценарии использования

Логотипы для печатиПреобразуйте логотип веб-сайта или подписи электронной почты в векторный файл, запрошенный вашим принтером.логотипы ИИВекторизуйте логотип из ChatGPT, Gemini, Midjourney или Looka, чтобы он мог масштабироваться для печати и вывесок.Эскизы и рисункиПревратите наброски чернилами, линейные рисунки и детские рисунки в масштабируемый SVG для мерча и печати.Фото в векторную графикуПревратите фотографию в смелое стилизованное векторное искусство для постеров, портретов и мерча.

Готовы конвертировать?

Конвертация и предварительный просмотр бесплатны, без необходимости регистрации. Скачивание SVG или PDF использует один кредит.