Wie konvertiere ich ein PNG-Bild in ein SVG? [geschlossen]


266

Wie konvertiere ich ein PNG-Bild in ein SVG?


21
Programmatisch oder nicht? Welche Sprache, Plattform?
Michael Petrotta

Durch eine Anwendung oder durch Betriebssystembefehle? Wenn durch Betriebssystem könnten Sie bitte sagen, welches Betriebssystem .. Danke
Mahesh Velaga

Antworten:


130

Es gibt eine Website, auf der Sie Ihr Bild hochladen und das Ergebnis sehen können.

http://vectormagic.com/home

Aber wenn Sie Ihr SVG-Bild herunterladen möchten, müssen Sie sich registrieren. (Wenn Sie sich registrieren, erhalten Sie 2 Bilder kostenlos)


122

potraceunterstützt nicht PNG als Eingabedatei, sondern PNM .
Daher zuerst convertvon PNG zu PNM:

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

Optionen erklären

  • potrace -s=> Ausgabedatei ist S. VG
  • potrace -o file.svg => Ausgabe schreiben in file.svg

Beispiel

Eingabedatei = 2017.png Eingabedatei

convert 2017.png 2017.pnm

Temporäre Datei = 2017.pnm

potrace 2017.pnm -s -o 2017.svg

Ausgabedatei = 2017.svg Ausgabedatei

Skript

ykarikos schlägt ein Skript png2svg.sh vor , das ich verbessert habe:

#!/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

Einzeiliger Befehl

Wenn Sie viele Dateien konvertieren möchten, können Sie auch den folgenden einzeiligen Befehl verwenden:

( 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 )

Siehe auch

Siehe auch diesen guten Vergleich von Raster- zu Vektorkonvertern auf Wikipedia.


2
Das Bild verliert Farbe, wenn es mit Potrace von pnm in svg konvertiert wird. Gibt es eine Möglichkeit, Farbe zu bewahren?
Coder

1
Hallo @mundella. Ich habe immer potracefür Schwarz-Weiß-Symbole verwendet. Vielen Dank für Ihr Feedback. Aber leider keine Ahnung, wie man Farben bewahrt ... Ho! Ich habe eine Idee: Wenn Ihr Originalbild nur wenige Farben hat (sagen wir drei einzigartige Farben), können Sie drei Ausgangsbilder erstellen (eines für jede Farbe). Dann konvertieren Sie zu SVG. Und schließlich führen Sie die drei SVG-Inhalte in einer Datei zusammen (SVG ist XML-basiert). Hoffe das könnte helfen ... Prost ;-)
olibre

@olibre Gibt es eine Plattform, um pragmatisch die gleichen Dinge zu tun
Ami Kamboj

1
Hallo @AmiKamboj. Ich bin mir nicht sicher, ob ich Ihre Frage verstehe. Die Befehle convertund potracesind auf vielen Plattformen verfügbar. Ich benutze Linux-basierte Computer. Ich habe diese Befehle gestern gerade verwendet, um eine SVG aus einem gescannten Papier zu erstellen. Sie können das Ergebnis sehen: cpp-frug.github.io/images/Cpp-President-2017.svg Bitte erläutern Sie mehr über Ihr Ziel. Was willst / wunderst du dich? Was ist dein Bedürfnis / Wunsch? Prost ;-)
Olibre

1
Ich habe fast jeden Online-x-SVG-Konverter verwendet. Das Potrace Npm-Paket hat sie alle aus dem Wasser geblasen. Es ist toll.
Tsteve

59

Ein PNG ist ein Bitmap-Bildstil und ein SVG ist ein vektorbasiertes Grafikdesign, das Bitmaps unterstützt. Es ist also nicht so, als würde es das Bild in Vektoren konvertieren, sondern nur ein Bild, das in ein vektorbasiertes Format eingebettet ist. Sie können dies mit http://www.inkscape.org/ tun, das kostenlos ist. Es würde es einbetten, es hat jedoch auch eine Live Trace-ähnliche Engine, die versucht, es in Pfade umzuwandeln, wenn Sie dies wünschen (mithilfe von Potrace). Siehe Live-Trace in Adobe Illustrator (kommerziell) ist ein Beispiel:

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


1
Ich habe den Live-Trace in Inkscape verwendet, um Logos mit längst verlorenen Originalen neu zu erstellen. Sofern die neueste Version keine Verbesserungen vorgenommen hat, ist sie ein Hit-or-Miss. Allerdings habe ich auch einige Logos in Inkscape manuell nachverfolgt und es ganz gut geschafft.
AnonJr

12
Hier ist eine Erklärung, wie dies in Inkscape gemacht wird: wiki.inkscape.org/wiki/index.php/Potrace
Erel Segal-Halevi

toller Kommentar. Wir haben festgestellt, dass iOS 7.1 Safari keine in SVGs eingebetteten Bilder anzeigt, während Chrome kein Problem damit hat
ProblemsOfSumit

28

Vielleicht möchten Sie sich Potrace ansehen .


1
Dieser Potrace ist sehr genau, wenn Sie wissen, wie man ihn benutzt: aber er ist nicht mehrfarbig 1.) konvertieren Sie Ihre Datei in BMP 2.) (für den genauen Teil) konvertieren Sie bmp in eine hohe Auflösung (strecken Sie ihn) 3.) färben Sie die Formen Sie möchten in schwarz verfolgen 4.) konvertieren 5.) Breite und Höhe in Original ändern 6.) schätzen die genaue Verfolgung.
PauAI

18

Einfach

  1. Laden Sie Inkscape herunter (es ist völlig kostenlos)
  2. Folgen Sie den Anweisungen in diesem kurzen Youtube-Video

Wie Sie sehen werden, können Sie eine ganze Reihe anderer cleverer .svg-Sachen auch mit Inkscape machen.

Eine nicht-technische Beobachtung: Ich persönlich bevorzuge diese Methode gegenüber "kostenlosen" Website-Angeboten, da man das Bild, abgesehen davon, dass häufig eine Registrierung erforderlich ist, durch Hochladen des Bildes praktisch dem Eigentümer der Website übergibt.


1
Warum das Downvote? Ich benutze diesen Ansatz sehr erfolgreich. Erklären Sie zumindest höflich, warum Menschen von Ihren Erkenntnissen profitieren können.
Pancho

5
Das Befolgen dieser Anweisungen umschließt das Bild nur mit SVG-XML - es konvertiert nichts in Pfaddaten.
Robert

@ Robert - danke für die Info, ich war selig unwissend, da es für meine Zwecke gut funktionierte. Dies beeinträchtigt jedoch nicht die Tatsache, dass Inkscape eine vollständige Konvertierung von PNG in SVG durchführen kann - und vieles mehr. Zur Veranschaulichung für alle Interessierten habe ich meine Antwort dahingehend geändert, dass sie einen kurzen erklärenden Videoclip enthält.
Pancho

Ist das wirklich so? Ich habe das generierte SVG überprüft und es scheint Pfaddaten zu haben, im Gegensatz zur Mobilefish-Methode ...
dario_ramos

Es gibt einige Leute, die dies von Zeit zu Zeit ohne berechtigten Grund ablehnen, und ich fange an, mir die Meinung zu bilden, dass es böswillig ist. Wenn es wirklich einen Grund gibt - kein Problem - hören Sie auf, faul zu sein, und geben Sie dieser Community einen Mehrwert, indem Sie sie bereitstellen.
Pancho

15

mit Adobe Illustrator:

Öffnen Sie Adobe Illustrator. Klicken Sie auf "Datei" und wählen Sie "Öffnen", um die PNG-Datei in das Programm zu laden. Bearbeiten Sie das Bild nach Bedarf, bevor Sie es als SVG-Datei speichern. Klicken Sie auf "Datei" und wählen Sie "Speichern unter". Erstellen Sie einen neuen Dateinamen oder verwenden Sie den vorhandenen Namen. Stellen Sie sicher, dass der ausgewählte Dateityp SVG ist. Wählen Sie ein Verzeichnis und klicken Sie auf "Speichern", um die Datei zu speichern.

oder

Online-Konverter http://image.online-convert.com/convert-to-svg

Ich bevorzuge KI, weil Sie alle erforderlichen Änderungen vornehmen können

Viel Glück


3
+1 für online-convert.com. Versuchte es jetzt mit ein paar monochromen Silhouetten .. einwandfrei ausgeführt .. Auch scheint völlig kostenlos zu sein.
nedR

Ja, einer der besseren Konverter ... Danke
JayD

1
Ich wusste nicht, dass Illustrator dies gekocht hat. Wenn ich bereits alles als .ai habe, spare ich eine Menge Zeit.
Doyle Lewis

10

Zu meiner Überraschung Potrace nur Schwarzweiß verarbeiten. Das mag für Ihren Anwendungsfall in Ordnung sein, aber einige mögen das Fehlen einer Farbverfolgung als problematisch betrachten.

Persönlich habe ich mit Vector Magic zufriedenstellende Ergebnisse erzielt

Trotzdem ist es nicht perfekt.


9

Ein Hinweis für diejenigen, die Potrace und Imagemagick verwenden und PNG- Bilder mit Transparenz in PPM konvertieren , scheint nicht sehr gut zu funktionieren. Hier ist ein Beispiel, das das -flattenFlag verwendet convert, um dies zu handhaben:

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

Ein weiteres interessantes Phänomen ist, dass Sie PPM (256 * 3 Farben, dh RGB), PGM (256 Farben, dh Graustufen) oder PBM (2 Farben, dh nur Weiß oder Schwarz) als Eingabeformat verwenden können. Aus meinen begrenzten Beobachtungen geht hervor, dass PPM und PGM (die, soweit ich sehen kann , identische SVGs erzeugen) bei Bildern mit Anti-Aliasing den farbigen Bereich verkleinern und PBM den farbigen Bereich vergrößert (wenn auch nur geringfügig). Vermutlich ist dies der Unterschied zwischen einem pixel > (256 / 2)Test und einem pixel > 0Test. Sie können zwischen den drei wechseln, indem Sie die Dateierweiterung ändern, d. H. die folgenden verwenden PBM :

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

7

Sie können auch http://image.online-convert.com/convert-to-svg ausprobieren

Ich benutze es immer für meine Bedürfnisse.


Ich arbeite wirklich wie ein Zauber, selbst in komplexen Bildern. Ich rate dieses Tool wirklich.
Atıfcan Ergin

Hat bei mir leider nicht funktioniert.
Adamj

Funktioniert nicht gut, wenn das Bild transparent ist
Genaut

Sie können nicht erwarten, dass das Skript ein Foto von sich selbst macht und eine perfekt geschichtete SVG-Datei herausbringt. Es gibt so etwas nicht. Wenn Sie eine einfache Form haben und die Pfade erhalten möchten, ist dies der Fall. Ich habe mit dieser Seite eine Menge Schriftsymbole erstellt und bin für mich nie gescheitert.
thednp

@thednp mein Bild kam schwarz und weiß
iOSAndroidWindowsMobileAppsDev

7

Ich habe gerade diese Frage und Antworten gefunden, als ich versuche, dasselbe zu tun! Ich wollte einige der anderen genannten Tools nicht verwenden. (Ich möchte meine E-Mail nicht verraten und nicht bezahlen). Ich fand, dass Inkscape (v0.91) einen ziemlich guten Job machen kann. Dieses Tutorial ist schnell und einfach zu verstehen.

Es ist so einfach wie das Auswählen Ihrer Bitmap in Inkskape und Umschalt + Alt + B.

Kantenerkennung mit Inksape Trace-Bitmap-Tool basierend auf Potrace


4

Je nachdem warum Sie von .png nach .svg konvertieren möchten, müssen Sie möglicherweise keine Probleme lösen. Das Konvertieren von .png (Raster) in .svg (Vektor) kann schwierig sein, wenn Sie mit den verfügbaren Tools nicht sehr vertraut sind oder wenn Sie von Beruf kein Grafikdesigner sind.

Wenn Ihnen jemand eine große, hochauflösende Datei (z. B. 1024 x 1024) sendet, können Sie die Größe in GIMP auf nahezu jede gewünschte Größe ändern. Oft haben Sie Probleme, die Größe eines Bildes zu ändern, wenn die Auflösung (Anzahl der Pixel pro Zoll) zu niedrig ist. Um dies in GIMP zu korrigieren, können Sie:

  1. File -> Open: Ihre .png-Datei
  2. Image -> Image Properties: Überprüfen Sie die Auflösung und den Farbraum. Sie möchten eine Auflösung von ca. 300 ppi. In den meisten Fällen soll der Farbraum RGB sein.
  3. Image -> Mode: auf RGB einstellen
  4. Image -> Scale Image: Lassen Sie die Größe in Ruhe, stellen Sie die Y-Auflösung auf 300 oder höher ein. Hit Scale.
  5. Image -> Scale Image: Die Auflösung sollte jetzt 300 sein und Sie können das Bild jetzt auf so ziemlich jede gewünschte Größe verkleinern.

Nicht so einfach wie das Ändern der Größe einer .svg-Datei, aber definitiv einfacher und schneller als der Versuch, eine .png-Datei in eine .svg-Datei zu konvertieren, wenn Sie bereits ein großes Bild mit hoher Auflösung haben.


2

Ich gehe davon aus, dass Sie dazu Software schreiben möchten. Um es naiv zu machen, würden Sie einfach Linien finden und die Vektoren setzen. Um dies intelligent zu machen, versuchen Sie, Formen an die Zeichnung anzupassen (Modellanpassung). Darüber hinaus sollten Sie versuchen, Bitmap-Regionen zu ermitteln (Regionen, die Sie nicht durch Scham oder das Anwenden von Texturen modellieren können. Ich würde diese Route nicht empfehlen, da dies einige Zeit in Anspruch nimmt und ein wenig Grafik- und Computer-Vision-Kenntnisse erfordert. Die Ausgabe wird jedoch viel und skaliert viel besser als Ihre ursprüngliche Ausgabe.



0

Dieses Tool funktioniert momentan sehr gut.

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


17
Dies bettet das Bild in SVG ein, nicht in echte Vektorgrafiken
Paul Gobée

Dies konvertierte eine meiner farbigen PNGs, in die andere Online-Konverter nicht richtig konvertieren konnten. Ich dachte, es funktioniert, da ich es im Browser öffnen kann, aber als ich versuchte, es mit einem anderen Tool zu öffnen, ist ein Fehler aufgetreten. Vielleicht wegen des oben angegebenen Kommentars.
Vida

-1

Wenn Sie auf einem Linux-System arbeiten, ist imagemagick perfekt. Dh

convert somefile.png somefile.svg

Dies funktioniert mit Haufen verschiedener Formate.

Für andere Medien wie Videos und Audio (ffmpeg) weiß ich, dass Sie png zu svg klar angegeben haben; Es ist immer noch medienbezogen.

ffmpeg -i somefile.mp3 somefile.ogg

Nur ein Tipp, wenn Sie viele Dateien durchgehen möchten. eine Schleife mit grundlegenden Shell-Tricks ..

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

Das entfernt das JPG und fügt PNG hinzu, das konvertiert, was Sie wollen.


2
Imagemagick funktioniert auf anderen Plattformen, nicht nur auf 'Linux'.
Lunatik

25
Dies funktioniert technisch gesehen, die generierte SVG-Datei ist jedoch keine echte Vektorgrafik - sie enthält nur die ursprüngliche Bitmap "wie sie ist". Wenn Sie es also vergrößern, erhalten Sie immer noch die verschlechterte Qualität eines Rasterbildes.
Erel Segal-Halevi

7
@archeyDevil nein, das ist keine "Konvertierung" in SVG, das "Einbetten" der Bitmap in eine leere SVG. Kein Nutzen für irgendjemanden.
Adam

4
@archeyDevil Der Fragentitel lautet "konvertiere ... in SVG". Ihre Antwort wird nicht konvertiert. Es bettet ein. PNG ist ein Bitmap-Format, SVG ist ein Vektorformat. Massiver Unterschied. Das Einbetten ist nutzlos und verdient keine SO-Frage IMHO
Adam

3
Mir ist bewusst, dass es nicht konvertiert. Ich habe es jedoch getan; Veröffentlichen Sie dies für diejenigen, die kein Vektor-Persay benötigen, sondern nur einen schnellen und schmutzigen Wechsel zwischen den Dateitypen benötigen.
DarkFox
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.