Як перетворити зображення 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 Чи є платформа прагматично робити те саме
Амі Камбой

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

1
Я використовував майже кожен онлайн-конвертер x для svg там. Пакет potrace npm вивів їх усіх з води. Це приголомшливо.
tsteve

59

Png - це стиль зображення растрового зображення, а SVG - векторний графічний дизайн, який підтримує растрові карти, тому це не так, як якщо б воно перетворювало зображення у вектори, а саме зображення, вбудоване у векторний формат. Це можна зробити за допомогою http://www.inkscape.org/ яка безкоштовна. Він буде вбудовувати його, однак у нього також є двигун, подібний до Live Trace, який намагатиметься перетворити його на шляхи, якщо хочете (використовуючи trace). Дивіться живий слід у Adobe illustrator (комерційний):

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


1
Я використовував живий слід у Inkscape для відновлення логотипів із давно втраченими оригіналами. Якщо остання версія не внесла певних вдосконалень, це трохи удари або пропустіть. Сказавши це, я також вручну відшукав деякі логотипи в Inkscape і керував цілком чудово.
AnonJr

12
Ось пояснення, як це зробити в Inkscape: wiki.inkscape.org/wiki/index.php/Potrace
Segal-Halevi

чудовий коментар. Ми помітили, що iOS 7.1 Safari не відображатиме зображення, вбудовані в svg's, поки у Chrome немає проблем з цим
ProblemsOfSumit

28

Ви можете поглянути на potrace .


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

18

Легко

  1. Завантажте Inkscape (це абсолютно безкоштовно)
  2. Дотримуйтесь інструкцій у цьому короткому відео на YouTube

Як ви побачите, якщо ви хочете зробити багато інших розумних речей .svg, ви можете це зробити і за допомогою Inkscape.

Нетехнічне спостереження: я особисто віддаю перевагу цьому методу над "безкоштовними" пропозиціями веб-сайтів, оскільки, окрім часто вимагаючої реєстрації, завантажуючи зображення, в усіх практичних умовах, ви надаєте зображення власнику веб-сайту.


1
Чому потік? Я дуже успішно використовую цей підхід. Принаймні, будьте ласкаві пояснити, чому люди можуть отримати користь від вашої думки.
Панчо

5
Дотримуючись цих вказівок, обертайте зображення лише SVG XML - він нічого не конвертує в дані шляху.
Роберт

@Robert - спасибі за інформацію, я був блаженно невідомий, як це добре працювало для моїх цілей. Це, однак, не шкодить тому, що Inkscape здатний здійснити повне перетворення PNG у SVG - та багато іншого. Для ілюстрації для всіх, хто цікавиться, я змінив свою відповідь, щоб включити короткий пояснювальний відеоролик.
Панчо

Це справді так? Я перевірив згенерований SVG і, схоже, має дані про шлях, на відміну від методу mobilefish ...
dario_ramos

Є люди, які час від часу заперечують це без будь-якої виправданої причини, і я починаю формувати думку, що це шкідливо. Якщо дійсно є причина - немає проблем, перестаньте лінуватися і додайте певну цінність цій спільноті, надаючи її.
Панчо

15

з ілюстратором adobe:

Відкрийте Adobe Illustrator. Клацніть "Файл" і виберіть "Відкрити", щоб завантажити файл .PNG у програму. Відредагуйте зображення за потребою, перш ніж зберегти його як файл .SVG. Клацніть «Файл» та виберіть «Зберегти як». Створіть нове ім’я файлу або використовуйте існуюче ім’я. Переконайтеся, що вибраний тип файлу є SVG. Виберіть каталог і натисніть "Зберегти", щоб зберегти файл.

або

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

Я віддаю перевагу AI, тому що ви можете внести будь-які необхідні зміни

Щасти


3
+1 для online-convert.com. Спробував це зараз з парою монохромних силуетів .. виконуються бездоганно .. Також, здається, абсолютно безкоштовно.
нед

Так, один з кращих конвертерів ... Дякую
JayD

1
Я не розумів, що Illustrator підготував це. Отримавши все як .ai, це заощадить мені тону часу.
Doyle Lewis

10

На мій подив, пошуки виявляється, можуть обробляти лише чорно-білі. Це може бути добре для випадку, але деякі можуть вважати відсутність відстеження кольору проблематичним.

Особисто я мав задовільні результати з Vector Magic

Все-таки це не ідеально.


9

Примітка для тих, хто використовує potrace та imagemagick , перетворення PNG- зображень із прозорості в PPM, здається, не дуже добре працює. Ось приклад, який використовує -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

Не добре працювати, якщо зображення має прозорість
Генаут

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

@thednp моє зображення вийшло чорно-білим
iOSAndroidWindowsMobileAppsDev

7

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

Це так само просто, як вибір вашої растрової карти в Inkskape та Shift + Alt + B.

Виявлення країв за допомогою інструменту растрового зображення Inksape Trace на основі пошуку


4

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

Якщо хтось надсилає вам великий файл з високою роздільною здатністю (наприклад, 1024x1024), ви можете змінити його розмір майже до будь-якого розміру, який ви хочете в GIMP. Часто у вас виникнуть проблеми із зміною розміру зображення, якщо роздільна здатність (кількість пікселів на дюйм) занадто низька. Щоб виправити це в GIMP, ви можете:

  1. File -> Open: ваш .png файл
  2. Image -> Image Properties: перевірити роздільну здатність та кольоровий простір. Ви хочете роздільну здатність близько 300 ppi. У більшості випадків потрібно, щоб кольоровий простір був 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, а не в реальній векторній графіці
Пол Гобе

Це перетворило один із моїх кольорових 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.
Lunatik

25
Це технічно працює, однак, генерований SVG-файл насправді не є векторною графікою - він просто містить оригінальну растрову карту "як є". Таким чином, збільшуючи його, ви все одно отримуєте погіршену якість растрового зображення.
Ерел Сегал-Халеві

7
@archeyDevil ні, це не "перетворення" на SVG, це "вбудовування" растрової карти у порожній SVG. Нікому не корисно.
Адам

4
@archeyDevil Назва питання "перетворити ... на SVG". Ваша відповідь не конвертує. Він вбудовується. PNG - це растровий формат, SVG - векторний формат. Масова різниця. Вбудовування марно і не варте запитання про ІМХО
Адам

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