Преобразовать PNG в SVG Portable Network Graphics ↔ Scalable Vector Graphics Бесплатно Онлайн Безопасно

Почему люди конвертируют PNG в SVG

PNG — это сетка цветных точек. SVG — рисунок, описанный фигурами. Разница определяет, что с ними можно делать: у PNG фиксированный размер, и при увеличении он размывается, а SVG можно растянуть до размера стены здания, и он остаётся чётким. Логотипы, значки и штриховые иллюстрации часто встречаются только в виде PNG, потому что так их сохранили или прислали, и тогда возникает необходимость использовать их в большем размере, перекрасить, вырезать на плоттере или виниловом резаке или поместить на сайт, просящий SVG. Вот почему люди конвертируют PNG в SVG: у них есть картинка, а нужен рисунок.

Важно честно сказать, что такая конвертация может и чего не может. Превращение пикселей обратно в фигуры — не восстановление исходного рисунка, которого больше нет. Это догадка, сделанная по тому, где заканчиваются области плоского цвета. Для логотипа, значка или штриховой графики догадка часто близка к верной. Для фотографии она почти бесполезна. Эта страница предлагает два варианта и говорит, чего стоит каждый, прежде чем вы потратите время: можно позволить картинке стать фигурами путём трассировки или сохранить картинку в точности как пришла, обёрнутой в SVG.

Эта страница конвертирует PNG в SVG в вашем браузере. Ваша картинка не загружается на сервер, что важно для логотипов и проектов, ещё не ставших публичными. Ниже вы узнаете, как работает трассировка, как выбрать число цветов, что сохраняется и когда лучший ответ — вообще не трассировать.

Как работает конвертация

Два варианта того, что станет с картинкой

Вы выбираете, что станет с картинкой: она превратится в фигуры или останется в точности как пришла. Первое — трассировка. Картинка анализируется, находятся области одного цвета, а их границы записываются как фигуры, залитые цветами, которые вы запросили. Второе — обёртывание: картинка помещается в файл SVG без изменений, так что снаружи файл — SVG, а внутри те же пиксели.

Трассировка — догадка, а не восстановление

Трассировка находит, где заканчиваются плоские области цвета, и записывает эти границы как фигуры. Для логотипа, значка или штриховой графики она близка к верной, а для фотографии почти бесполезна: получается плакат из пятен. Мягкие края и градиенты становятся жёсткими ступенями между запрошенными вами цветами. Чем больше цветов вы разрешаете, тем ближе результат к оригиналу и тем тяжелее файл.

Сохранение картинки

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

Что сохраняется

Прозрачность, какой бы вариант вы ни выбрали

Прозрачность сохраняется, какой бы вариант вы ни выбрали: просвечивающий фон остаётся пустым, а не белеет. Логотип без фона остаётся логотипом без фона, готовым лечь на любой цвет.

Пропорции и размер

Трассировка сохраняет пропорции рисунка и его собственный размер в пикселях в ширине и высоте SVG, так что он ложится в макет в том размере, который был. Картинка 600 на 300 пикселей даёт SVG, объявленный как 600 на 300, и его можно затем свободно масштабировать.

Что стоит знать, прежде чем конвертировать PNG в SVG

Лучше всего работает с плоским цветом

Логотипы, значки, простые иллюстрации, подписи, печати, схемы и штриховая графика — подходящий материал. Всё, что состоит из областей плоского цвета с чистыми границами, трассируется хорошо. Фотографии, текстуры и мягкие градиенты — нет.

Большие картинки читаются в уменьшенном размере

Картинки больше 1000 пикселей по длинной стороне читаются в этом размере. SVG по-прежнему несёт исходные размеры и, будучи векторным, масштабируется обратно. Так что очень большой PNG — не проблема, но самые мелкие детали при чтении могут потеряться.

Меньше цветов — чище фигуры

Выберите число цветов под картинку. Двухцветному логотипу нужно два-три цвета. Многоцветной иллюстрации нужно больше. Слишком много цветов даёт шумные фигуры; слишком мало сливает различные области.

Как конвертировать PNG в SVG здесь

Добавьте картинку

Перетащите PNG на страницу или выберите его на устройстве. Он читается внутри вашего браузера и не загружается.

Выберите трассировку или сохранение и цвета

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

Конвертируйте и сравните

Нажмите кнопку и скачайте SVG. Откройте его в браузере и приблизьте. Хорошая трассировка остаётся гладкой. Сравните её с PNG бок о бок, а если не так, подправьте цвета и попробуйте снова.

Ближе о PNG и SVG

Растр и вектор

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

Почему трассировка не может восстановить оригинал

Когда логотип сохраняли как PNG, его кривые превратились в точки, и на краях часть информации потерялась. Трассировка читает точки и предлагает кривые, проходящие через них. Предложение часто очень хорошее, но это не оригинальная кривая. Если исходный SVG существует, используйте его.

Когда избегать трассировки

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

Частые ситуации подробно

Логотипы, существующие только как PNG

Клиент присылает логотип в PNG, а вам нужен он побольше или в другом цвете. Конвертируйте PNG в SVG, проверьте результат и доработайте в программе для рисования. Для простого логотипа результат может быть отличным.

Резка и гравировка

Плоттеры, виниловые резаки и лазерные граверы работают по векторным контурам. Трассированный SVG силуэта или печати даёт им то, что нужно.

Значки и простые иллюстрации

Плоские значки трассируются почти идеально. Затем их можно перекрасить, масштабировать и использовать в вебе без потерь.

Подписи и печати

Подпись, отсканированную или сфотографированную на белом фоне, можно трассировать в одноцветный SVG, который чисто масштабируется в документе. Следите, чтобы использовать только свои подписи.

Практические советы перед конвертацией PNG в SVG

Начните с самого большого и чистого PNG, который у вас есть

Чем больше пикселей и чище края, тем лучше трассировка. Маленькая размытая картинка даёт комковатый результат.

Сначала уберите шум

Крапинки, случайные точки и артефакты сжатия становятся лишними фигурами. Если можете, очистите картинку в редакторе, прежде чем конвертировать PNG в SVG.

Используйте высокий контраст

Разделённые цвета трассируются хорошо. Картинка, в которой две области почти одного оттенка, может слить их в одну.

Храните PNG

PNG — источник. Если трассировка нехороша, он понадобится, чтобы попробовать снова с другими настройками.

Вопросы, которые задают перед конвертацией

Получу ли я обратно мой исходный вектор?

Нет. Трассировка — догадка, а не восстановление. Она предлагает фигуры, следующие границам цветов на картинке.

Почему моя фотография выглядит как плакат?

Потому что в фотографии нет плоских областей, которые можно найти. Трассировка превращает её в пятна цвета. Оставляйте фотографии как пришли.

Сохранится ли прозрачность?

Да, какой бы вариант вы ни выбрали. Просвечивающий фон остаётся пустым.

Что делает сохранение картинки?

Оно даёт файл, который снаружи SVG, а внутри те же пиксели. Это полезно, когда что-то принимает только .svg.

Загружается ли моя картинка?

Нет. Конвертация выполняется в вашем браузере, и картинка никогда не покидает ваше устройство.

Можно ли вернуться к PNG?

Да. SVG в PNG рисует фигуры в выбранном вами размере.

Разумный выбор, когда вы конвертируете PNG в SVG

Трассировать или сохранить?

Трассируйте плоскую графику. Сохраняйте фотографии и всё подробное. Если не уверены, попробуйте трассировку и посмотрите на результат рядом с оригиналом.

Другие отправные точки

Если ваша картинка — JPG, так же работает JPG в SVG, хотя шум сжатия требует внимания. Для файла значка ICO в SVG читает самый большой размер внутри него.

Храните то, с чего начали

Держите PNG рядом с SVG. Это разные вещи, и у каждой своё применение.

Как получить хороший результат после конвертации

Откройте в программе для рисования

Посмотрите на фигуры и цвета. Удалите случайные крапинки, объедините фигуры, которые должны быть одной, и сгладьте кривые, получившиеся комковатыми.

Проверьте в нескольких размерах

Приближайте и отдаляйте. Хорошая трассировка держит форму в любом размере.

Упростите для веба

Трассированный SVG может содержать много точек. Инструменты, упрощающие контуры, могут значительно уменьшить файл без заметных изменений.

Подготовка PNG, чтобы он хорошо трассировался

Сведите цвета

Если у картинки слабый градиент или шум в том, что должно быть плоскими областями, сначала уменьшите число цветов в редакторе. Трассировка будет чище, когда вы конвертируете PNG в SVG.

Обрежьте близко

Уберите пустые поля и всё, что не относится к рисунку. Меньше трассировать — меньше случайных фигур.

Сначала проверьте на небольшом фрагменте

Если картинка сложная, сначала трассируйте обрезанную часть. Быстрый взгляд покажет, верны ли настройки.

Как получить лучшую трассировку при конвертации PNG в SVG

Начните с ожидаемых цветов

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

Следите за краями

Граница между двумя цветами в PNG обычно — мягкая линия промежуточных оттенков, потому что картинку сглаживали при рисовании. Трассировке приходится решать, где проходит край внутри этой мягкой линии. Она выбирает середину, что почти всегда верно, но очень тонкая линия может разбиться на куски или утолщиться. Если линии в вашем рисунке шириной всего в пиксель-два, начните с увеличенной версии картинки.

Подумайте о белом

Белый может быть цветом рисунка или пустым фоном. Если у вашего PNG прозрачный фон, он остаётся пустым, и ничего делать не нужно. Если фон — белая бумага, без прозрачности, трассировка включит его как белую фигуру позади рисунка, которую вы, возможно, захотите удалить в программе для рисования, чтобы логотип чисто ложился на другие цвета.

Используйте SVG в тех размерах, которых он заслуживает

Главное преимущество результата — он масштабируется. Используйте его для плаката, вывески, вышитой нашивки или фавикона и радуйтесь, что не нужно просить файл побольше. Когда снова нужна картинка из пикселей, SVG в PNG рисует фигуры в любом выбранном вами размере.

Сравните с перерисовкой

Для важного логотипа трассировка может быть отправной точкой, а не концом. Дизайнер может поместить трассированные фигуры на слой, перерисовать кривые с чистыми точками и получить файл, с которым приятно работать. Если логотип — лицо компании, этот час потрачен не зря. Для повседневных нужд хорошей трассировки достаточно.

Будьте осторожны с товарными знаками и чужими работами

Трассировка логотипа или рисунка не даёт прав на него. Используйте конвертацию для рисунков, которыми вы владеете или на которые у вас есть разрешение. Для собственных знаков это удобный способ обновить старые картинки.

Сохраняйте понравившиеся настройки

Когда вы найдёте число цветов, которое работает для определённого вида рисунков, запишите его. В следующий раз, когда вы будете конвертировать PNG в SVG для похожего логотипа или значка, вы начнёте с настройки, о которой знаете, что она даёт чистые фигуры.

Приватность и обращение

Почему локальная конвертация важна для рисунков

Логотипы и проекты могут быть конфиденциальными до публикации. Многие онлайн-конвертеры загружают ваш файл на сервер, обрабатывают его и присылают результат, и какое-то время копия живёт на машине, которую вы не контролируете. Здесь работу выполняет ваш собственный браузер, поэтому картинка остаётся на вашем устройстве.

Что происходит, когда вы уходите

Когда вы закрываете страницу, конвертированный файл пропадает из браузера, поэтому сначала скачайте его. Ничто о вашей картинке не сохраняется.

Если что-то идёт не так

Трассировка полна крапинок

В картинке был шум. Очистите её в редакторе или уменьшите число цветов.

Фигуры слишком грубые

Увеличьте число цветов или начните с более крупного PNG.

Страница зависает на большой картинке

Всё выполняется на вашем устройстве, а большой картинке нужна память. Попробуйте ещё раз на компьютере или сначала уменьшите картинку.

Связанные инструменты

То же семейство инструментов охватывает соседние задачи. Для JPG используйте JPG в SVG, а для файла значка — ICO в SVG. Чтобы вернуться к пикселям, SVG в PNG, SVG в JPG и SVG в ICO рисуют фигуры в выбранном вами размере. Векторная страница для печати получается из SVG в PDF, а более лёгкий PNG — из сжатия PNG.

Разобранный пример

Допустим, небольшая фирма присылает вам свой логотип в виде PNG 500 на 500 пикселей: синий щит с белой буквой. Он нужен вам для баннера шириной два метра. Вы перетаскиваете PNG сюда, выбираете трассировку с тремя цветами и нажимаете кнопку. Через мгновение вы скачиваете SVG с теми же пропорциями, в котором щит и буква — чистые фигуры. Вы открываете его в программе для рисования, удаляете две случайные крапинки и масштабируете под баннер. Края остаются чёткими. PNG остаётся в вашей папке.

Короткий контрольный список

Перед конвертацией

Проверьте, что картинка — плоский рисунок. Уберите шум и обрежьте близко. Храните PNG.

Во время конвертации

Выберите трассировку или сохранение и задайте цвета. Оставайтесь на странице, пока файл не будет готов.

После конвертации

Откройте SVG, приблизьте, сравните с PNG и приведите в порядок в программе для рисования.

Частые ошибки

Трассировка фотографий

Фотография становится плакатом из пятен. Оставляйте её как пришла.

Ожидание исходных кривых

Трассировка — догадка. Если исходный SVG существует, используйте его.

Слишком много цветов

Больше цветов дают шумные фигуры. Используйте столько, сколько нужно рисунку, и не больше.

Ваша картинка остаётся на вашем устройстве

Конвертация происходит локально. Ваша картинка читается вашим собственным браузером, там же трассируется и возвращается вам как SVG. Ничего не загружается, поэтому копия не оказывается на сервере и никто другой не может её увидеть. Для неопубликованных рисунков это безопасный способ конвертировать PNG в SVG.

Итог

Чтобы конвертировать PNG в SVG здесь, перетащите картинку, выберите, что с ней станет, и нажмите кнопку. Вы выбираете: картинка превращается в фигуры или остаётся в точности как пришла, а чего стоит каждый вариант, написано на этой странице, прежде чем вы потратите время. Прозрачность сохраняется, какой бы вариант вы ни выбрали, а трассировка сохраняет пропорции рисунка и его собственный размер в пикселях в ширине и высоте SVG. Трассировка — догадка, а не восстановление: она находит, где заканчиваются плоские области цвета, и записывает эти границы как фигуры, что близко к верному для логотипа, значка или штриховой графики и почти бесполезно для фотографии. Картинки больше 1000 пикселей по длинной стороне читаются в этом размере.