Как преобразовать изображение PNG в SVG? [закрыто]


266

Как преобразовать изображение PNG в SVG?


21
Программно или нет? Какой язык, платформа?
Майкл Петротта

Через какое-то приложение или через команды операционной системы? Если через операционную систему, не могли бы вы сказать, какая операционная система .. Спасибо
Mahesh Velaga

Ответы:


130

Существует веб-сайт, где вы можете загрузить свое изображение и посмотреть результат.

http://vectormagic.com/home

Но если вы хотите скачать свое svg-изображение, вам необходимо зарегистрироваться. (Если вы зарегистрируетесь, вы получите 2 изображения бесплатно)


122

potraceникак не поддерживает PNG в качестве входного файла, но PNM .
Поэтому сначала convertиз PNG в PNM:

convert file.png file.pnm        # PNG to PNM
potrace file.pnm -s -o file.svg  # PNM to SVG

Объяснить варианты

  • potrace -s=> Выходной файл S VG
  • potrace -o file.svg => Записать вывод в file.svg

пример

Входной файл = 2017.png Входной файл

convert 2017.png 2017.pnm

Временный файл = 2017.pnm

potrace 2017.pnm -s -o 2017.svg

Выходной файл = 2017.svg Выходной файл

скрипт

ykarikos предлагает улучшенный скрипт png2svg.sh :

#!/bin/bash

File_png="${1?:Usage: $0 file.png}"

if [[ ! -s "$File_png" ]]; then
  echo >&2 "The first argument ($File_png)"
  echo >&2 "must be a file having a size greater than zero"
  ( set -x ; ls -s "$File_png" )
  exit 1
fi

File="${File_png%.*}"

convert "$File_png" "$File.pnm"        # PNG to PNM
potrace "$File.pnm" -s -o "$File.svg"  # PNM to SVG
rm "$File.pnm"                         # Remove PNM

Однострочная команда

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

( set -x ; for f_png in *.png ; do f="${f_png%.png}" ; convert "$f_png" "$f.pnm" && potrace "$f.pnm" -s -o "$f.svg" ; done )

Смотрите также

Смотрите также это хорошее сравнение растровых и векторных преобразователей в Википедии.


2
Изображение теряет цвет при преобразовании из PNM в SVG с использованием Potrace. Есть ли способ сохранить цвет?
Кодер

1
Привет @mundella. Я всегда использовал potraceдля черно-белых иконок. Спасибо за ваш отзыв. Но извините, не знаю, как сохранить цвета ... Хо! У меня есть идея: если ваше исходное изображение имеет несколько цветов (скажем, три уникальных цвета), вы можете создать три исходных изображения (по одному для каждого цвета). Затем конвертируйте в SVG. И наконец, объедините три SVG-контента в один файл (SVG основан на XML). Надеюсь, что это может помочь ... Ура ;-)
olibre

@olibre Есть ли какая-либо платформа прагматично делать то же самое
Ами Камбой

1
Привет @AmiKamboj. Я не уверен, чтобы понять ваш вопрос. Команды convertи potraceдоступны на многих платформах. Я использую компьютеры на базе Linux. Я только что использовал эти команды вчера, чтобы создать SVG из отсканированной бумаги. Вы можете увидеть результат: cpp-frug.github.io/images/Cpp-President-2017.svg Пожалуйста, объясните больше о вашей цели. Что ты хочешь / удивляешься? Какова ваша потребность / желание? Приветствия ;-)
olibre

1
Я использовал почти каждый онлайн конвертер x в svg. Пакет potrace npm вырвал их всех из воды. Это круто
четверг

59

Png - это стиль растрового изображения, а SVG - это векторный графический дизайн, который поддерживает растровые изображения, поэтому он не должен преобразовывать изображение в векторы, а просто изображение, встроенное в векторный формат. Вы можете сделать это, используя http://www.inkscape.org/, который является бесплатным. Он будет встраивать его, однако он также имеет движок, похожий на Live Trace, который при желании попытается преобразовать его в пути (используя potrace). См живой след в Adobe Illustrator (коммерческий) является примером:

http://graphicssoft.about.com/od/illustrator/ss/sflivetrace.htm


1
Я использовал прямую трассировку в Inkscape для воссоздания логотипов с давно утерянными оригиналами. Если только последняя версия не внесла некоторые улучшения, это будет хит или промах. Сказав это, я также вручную отследил некоторые логотипы в Inkscape и справился довольно хорошо.
AnonJr

12
Вот объяснение, как это сделать в Inkscape: wiki.inkscape.org/wiki/index.php/Potrace
Сегал-Халеви,

отличный комментарий. Мы заметили, что iOS 7.1 Safari не будет отображать изображения, встроенные в svg, в то время как у Chrome с этим нет
проблем

28

Вы можете посмотреть на Potrace .


1
этот Potrace очень точен, когда вы знаете, как его использовать: но он не многоцветный 1.) конвертирует ваш файл в BMP 2.) (для точной части) конвертирует bmp в высокое разрешение (растягивает его) 3.) раскрашивает фигуры Вы хотите провести черное 4.) конвертировать 5.) изменить ширину и высоту на 6.) оценить точную трассировку.
PauAI

18

Легко

  1. Загрузите Inkscape (это совершенно бесплатно)
  2. Следуйте инструкциям в этом коротком видео YouTube

Как вы увидите, если вы хотите сделать много других умных вещей .svg, вы можете сделать это и с помощью Inkscape.

Нетехническое наблюдение: я лично предпочитаю этот метод более «бесплатным» предложениям на сайте, потому что, помимо частой необходимости регистрации, путем загрузки изображения, с практической точки зрения, его передают владельцу сайта.


1
Почему отрицательный голос? Я использую этот подход очень успешно. По крайней мере, будьте любезны объяснить, почему люди могут извлечь выгоду из вашего понимания.
Панчо

5
Следование этим инструкциям только оборачивает изображение в SVG XML - оно ничего не преобразует в данные пути.
Роберт

@ Роберт - спасибо за информацию, я был в блаженном неведении, так как она отлично работала для моих целей. Это, однако, не умаляет тот факт, что Inkscape может выполнить полное преобразование PNG в SVG - и многое другое. Чтобы проиллюстрировать это всем, я исправил свой ответ, включив короткий пояснительный видеоклип.
Панчо

Это действительно так? Я проверил сгенерированный SVG, и он, кажется, содержит данные о пути, в отличие от метода mobilefish ...
dario_ramos

Есть некоторые люди, которые время от времени опровергают это без какой-либо оправданной причины, и я начинаю формировать мнение, что это вредоносно. Если причина действительно есть - не проблема, перестаньте быть ленивым и добавьте ценность этому сообществу, предоставив его.
Панчо

15

с Adobe Illustrator:

Откройте Adobe Illustrator. Нажмите «Файл» и выберите «Открыть», чтобы загрузить файл .PNG в программу. При необходимости отредактируйте изображение, прежде чем сохранять его как файл .SVG. Нажмите «Файл» и выберите «Сохранить как». Создайте новое имя файла или используйте существующее имя. Убедитесь, что выбран тип файла SVG. Выберите каталог и нажмите «Сохранить», чтобы сохранить файл.

или

онлайн-конвертер http://image.online-convert.com/convert-to-svg

Я предпочитаю ИИ, потому что вы можете вносить любые необходимые изменения

удачи


3
+1 для online-convert.com. Попробовал это сейчас с парой монохромных силуэтов .. выполненных безупречно .. Также, кажется, совершенно бесплатно.
НедР

Да, один из лучших конвертеров ... Спасибо
JayD

1
Я даже не подозревал, что Illustrator это приготовил. Имея все как .ai, это сэкономит мне массу времени.
Дойл Льюис

10

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

Лично у меня были удовлетворительные результаты с Vector Magic

Тем не менее, это не идеально.


9

Примечание для тех , используя Potrace и ImageMagick , преобразовывая PNG изображения с прозрачностью в РРМ , кажется, не работают очень хорошо. Вот пример, который использует -flattenфлаг convertдля обработки этого:

sudo apt-get install potrace imagemagick
convert -flatten input.png output.ppm
potrace -s output.ppm -o output.svg
rm output.ppm

Другим интересным явлением является то, что вы можете использовать PPM (256 * 3 цвета, т.е. RGB), PGM (256 цветов, т.е. оттенки серого) или PBM (2 цвета, т.е. только белый или черный) в качестве формата ввода. Из моих ограниченных наблюдений может показаться, что на изображениях с сглаживанием PPM и PGM (которые, насколько я вижу, дают идентичные SVG ) уменьшают цветную область, а PBM расширяет цветную область (хотя и немного). Предположительно, это разница между pixel > (256 / 2)тестом и pixel > 0тестом. Вы можете переключаться между тремя, изменяя расширение файла, т.е. следующее использование PBM :

sudo apt-get install potrace imagemagick
convert -flatten input.png output.pbm
potrace -s output.pbm -o output.svg
rm output.pbm

7

Вы также можете попробовать http://image.online-convert.com/convert-to-svg

Я всегда использую это для своих нужд.


Я действительно работаю как шарм даже в сложных изображениях. Я действительно советую этот инструмент.
Atıfcan Ergin

К сожалению, у меня не получилось.
adamj

Не работает хорошо, если изображение имеет прозрачность
Genaut

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

@thednp мое изображение получилось черно-белым
iOSAndroidWindowsMobileAppsDev

7

Я только нашел этот вопрос и ответы, поскольку я пытаюсь сделать то же самое! Я не хотел использовать некоторые другие упомянутые инструменты. (Не хочу отдавать мою электронную почту и не хочу платить). Я обнаружил, что Inkscape (v0.91) может сделать довольно хорошую работу. Этот урок быстро и легко понять.

Это так же просто, как выбрать ваше растровое изображение в Inkskape и Shift + Alt + B.

Обнаружение кромок с помощью растрового инструмента Inksape Trace на основе potrace


4

В зависимости от того, почему вы хотите конвертировать из .png в .svg, вам, возможно, не придется проходить через эту проблему. Преобразование из .png (растрового) в .svg (векторный) может быть затруднительным, если вы не очень хорошо знакомы с доступными инструментами или если вы не являетесь графическим дизайнером по профессии.

Если кто-то отправляет вам большой файл высокого разрешения (например, 1024x1024), вы можете изменить его размер практически до любого размера, который вы хотите в GIMP. Часто возникают проблемы с изменением размера изображения, если разрешение (количество пикселей на дюйм) слишком низкое. Чтобы исправить это в GIMP, вы можете:

  1. File -> Open: ваш файл .png
  2. Image -> Image Properties: проверьте разрешение и цветовое пространство. Вы хотите разрешение около 300 пикселей на дюйм. В большинстве случаев вы хотите, чтобы цветовое пространство было RGB.
  3. Image -> Mode: установить в RGB
  4. Image -> Scale Image: оставьте один размер, установите и разрешение Y до 300 или больше. Хит Масштаб.
  5. Image -> Scale Image: теперь разрешение должно быть 300, и теперь вы можете изменить размер изображения практически до любого желаемого размера.

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


2

Я предполагаю, что вы хотите написать программное обеспечение для этого. Чтобы сделать это наивно, вы просто должны найти линии и задать векторы. Чтобы сделать это разумно, вы пытаетесь разместить фигуры на чертеже (примерка модели). Кроме того, вы должны попытаться определить растровые области (области, которые вы не можете смоделировать с помощью шамов или наложения текстур. Я бы не рекомендовал идти по этому пути, поскольку это займет довольно много времени и потребует немного знаний в области графики и компьютерного зрения. Тем не менее, выходные данные будут намного масштабнее, чем исходные.


2

http://online-converting.com/image/convert-to-svg/ хорошо работал для преобразования в SVG


это удаляет любой цвет с изображения, та же проблема, что и potraceв командной строке - заставляет меня задуматься, что сайт использует внутренне ...
SSC

0

Этот инструмент работает очень хорошо прямо сейчас.

http://www.mobilefish.com/services/image2svg/image2svg.php


17
Это встраивает изображение в SVG, а не в реальную векторную графику
Paul Gobée

Это преобразовало один из моих цветных png-файлов, в которые другие онлайн-конвертеры не смогли конвертировать должным образом. Я думал, что это работает, так как я могу открыть его в браузере, но когда я попытался открыть его на другом инструменте, он имеет ошибку. Возможно из-за комментария, изложенного выше.
Вид

-1

Если вы работаете в какой-то системе Linux, imagemagick идеально подходит. Т.е.

convert somefile.png somefile.svg

Это работает с кучами разных форматов.

Однако для других носителей, таких как видео и аудио (ffmpeg) , вы точно указали png для svg; Это все еще связано со СМИ.

ffmpeg -i somefile.mp3 somefile.ogg

Просто совет, если вы хотите просмотреть много файлов; цикл с использованием основных трюков с оболочкой ..

for f in *.jpg; do convert $f ${f%jpg}png; done

Это удаляет JPG и добавляет PNG, который говорит конвертировать, что вы хотите.


2
Imagemagick работает на других платформах, а не только на Linux.
Лунатик

25
Технически это работает, однако сгенерированный SVG-файл на самом деле не является векторной графикой - он просто содержит исходное растровое изображение «как есть». Таким образом, когда вы увеличиваете его, вы все равно получаете ухудшенное качество растрового изображения.
Эрель Сегал-Халеви

7
@archeyDevil нет, это не «преобразование» в SVG, это «встраивание» растрового изображения в пустой SVG. Бесполезно никому.
Адам

4
@archeyDevil Название вопроса: "конвертировать ... в SVG". Ваш ответ не конвертируется. Это встраивает. PNG - растровый формат, SVG - векторный формат. Огромная разница. Встраивание бесполезно и не заслуживает такого вопроса ИМХО
Адам

3
Я знаю, что это не конвертируется. Я сделал однако; опубликуйте это для тех, кто не нуждается в переносе векторов, а просто нуждается в быстрой и грязной смене типов файлов.
DarkFox
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.