Come convertire un'immagine PNG in un SVG? [chiuso]


266

Come convertire un'immagine PNG in un SVG?


21
Programmaticamente o no? Quale lingua, piattaforma?
Michael Petrotta,

Tramite alcune applicazioni o i comandi del sistema operativo? Se attraverso il sistema operativo potresti dire quale sistema operativo .. Grazie
Mahesh Velaga,

Risposte:


130

C'è un sito web dove puoi caricare la tua immagine e vedere il risultato.

http://vectormagic.com/home

Ma se vuoi scaricare la tua immagine svg, devi registrarti. (Se ti registri, ottieni 2 immagini gratis)


122

potracenon supporta PNG come file di input, ma PNM .
Pertanto, prima convertda PNG a PNM:

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

Spiega le opzioni

  • potrace -s=> Il file di output è S VG
  • potrace -o file.svg => Scrivi output su file.svg

Esempio

File di input = 2017.png File di input

convert 2017.png 2017.pnm

File temporaneo = 2017.pnm

potrace 2017.pnm -s -o 2017.svg

File di output = 2017.svg File di uscita

copione

ykarikos propone uno script png2svg.sh che ho migliorato:

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

Comando su una riga

Se vuoi convertire molti file, puoi anche usare il seguente comando a una riga:

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

Guarda anche

Vedi anche questo buon confronto tra convertitori raster e vettoriali su Wikipedia.


2
L'immagine perde colore quando viene convertita da pnm a svg usando potrace. C'è un modo per preservare il colore?
Coder

1
Ciao @mundella. Ho sempre usato potraceicone in bianco e nero. Grazie per il tuo feedback Ma scusami non ho idea di come conservare i colori ... Ho! Ho un'idea: se l'immagine originale ha pochi colori (diciamo tre colori unici), puoi creare tre immagini iniziali (una per ogni colore). Quindi converti in SVG. E infine, unisci i tre contenuti SVG in un file (SVG è basato su XML). Spero che questo possa aiutare ... Saluti ;-)
olibre

@olibre Esiste una piattaforma per fare pragmaticamente le stesse cose
Ami Kamboj,

1
Ciao @AmiKamboj. Non sono sicuro di capire la tua domanda. I comandi converte potracesono disponibili su molte piattaforme. Sto usando computer basati su Linux. Ho appena usato questi comandi ieri per produrre un file SVG da un documento scansionato. Puoi vedere il risultato: cpp-frug.github.io/images/Cpp-President-2017.svg Spiega di più sul tuo target. Cosa vuoi / chiedo? Qual è il tuo bisogno / desiderio? Saluti ;-)
olibre

1
Ho usato quasi tutti i convertitori online x in svg là fuori. Il pacchetto npm potrace li ha fatti esplodere dall'acqua. È meraviglioso.
tsteve

59

Un png è uno stile di immagine bitmap e un SVG è un disegno grafico basato su vettori che supporta bitmap, quindi non è come se convertisse l'immagine in vettori, ma solo un'immagine incorporata in un formato basato su vettori. Puoi farlo usando http://www.inkscape.org/ che è gratuito. Lo incorporerebbe, tuttavia ha anche un motore come Live Trace che proverà a convertirlo in percorsi se lo si desidera (utilizzando Potrace). Vedere la traccia dal vivo in Adobe Illustrator (commerciale) è un esempio:

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


1
Ho usato la traccia live in Inkscape per ricreare loghi con originali persi da tempo. A meno che l'ultima versione non abbia apportato alcuni miglioramenti, è un po 'incostante. Detto questo, ho anche rintracciato manualmente alcuni loghi in Inkscape e gestito abbastanza bene.
AnonJr

12
Ecco una spiegazione su come farlo in Inkscape: wiki.inkscape.org/wiki/index.php/Potrace
Erel Segal-Halevi,

ottimo commento. Abbiamo notato che iOS 7.1 Safari non visualizzerà le immagini incorporate in svg mentre Chrome non ha un problema con esso
ProblemsOfSumit

28

Potresti voler guardare Potrace .


1
questo Potrace è molto preciso quando sai come usarlo: ma non è multicolore 1.) converti il ​​tuo file in BMP 2.) (per la parte accurata) converti bmp in alta risoluzione (strech it) 3.) colora le forme si desidera tracciare in nero 4.) convertire 5.) modificare larghezza e altezza in originale 6.) apprezzare la traccia accurata.
PauAI,

18

Facile

  1. Scarica Inkscape (è completamente gratuito)
  2. Segui le istruzioni in questo breve video di YouTube

Come vedrai, se vuoi fare molte altre cose intelligenti .svg puoi farlo anche con Inkscape.

Un'osservazione non tecnica: personalmente preferisco questo metodo rispetto alle offerte di siti Web "gratuite" perché, oltre a richiedere spesso la registrazione, caricando l'immagine, in termini pratici, si sta dando l'immagine al proprietario del sito Web.


1
Perché il downvote? Uso questo approccio con molto successo. Almeno avere la cortesia di spiegare perché così le persone possano trarre vantaggio dalle tue intuizioni.
Pancho,

5
Seguendo queste istruzioni si avvolge l'immagine solo con SVG XML - non converte nulla in dati di percorso.
Robert,

@Robert - grazie per l'informazione, ero beatamente ignorante perché funzionava bene per i miei scopi. Ciò non toglie tuttavia al fatto che Inkscape sia in grado di eseguire una conversione completa da PNG a SVG - e molto altro. Per illustrare a chiunque fosse interessato ho modificato la mia risposta per includere un breve video esplicativo.
Pancho,

È davvero così? Ho controllato l'SVG generato e sembra che abbia i dati del percorso, a differenza del metodo mobilefish ...
dario_ramos

Ci sono alcune persone che effettuano il downgrade di volta in volta senza alcuna causa giustificabile e sto iniziando a formulare l'opinione che sia dannoso. Se c'è davvero una ragione - nessun problema, smetti di essere pigro e aggiungi un po 'di valore a questa comunità fornendola.
Pancho,

15

con Adobe Illustrator:

Apri Adobe Illustrator. Fai clic su "File" e seleziona "Apri" per caricare il file .PNG nel programma. Modifica l'immagine come necessario prima di salvarla come file .SVG. Fai clic su "File" e seleziona "Salva con nome". Crea un nuovo nome di file o usa il nome esistente. Assicurarsi che il tipo di file selezionato sia SVG. Scegli una directory e fai clic su "Salva" per salvare il file.

o

convertitore online http://image.online-convert.com/convert-to-svg

preferisco l'IA perché puoi apportare qualsiasi modifica necessaria

in bocca al lupo


3
+1 per online-convert.com. Ho provato ora con un paio di sagome monocromatiche ... eseguite in modo impeccabile .. Sembra anche essere completamente gratuito.
nedR,

Sì, uno dei migliori convertitori ... Grazie
JayD,

1
Non mi ero reso conto che Illustrator avesse cucinato tutto questo. Avere già tutto come .ai, questo mi farà risparmiare un sacco di tempo.
Doyle Lewis,

10

Con mia sorpresa, a quanto pare, può solo elaborare il bianco e nero. Questo potrebbe andare bene per il tuo caso d'uso, ma alcuni potrebbero considerare problematica la mancanza di tracciamento del colore.

Personalmente, ho avuto risultati soddisfacenti con Vector Magic

Non è ancora perfetto.


9

Una nota per coloro che usano potrace e imagemagick , la conversione di immagini PNG con trasparenza in PPM non sembra funzionare molto bene. Ecco un esempio che utilizza il -flattenflag on convertper gestire questo:

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

Un altro fenomeno interessante è che è possibile utilizzare PPM (256 * 3 colori, cioè RGB), PGM (256 colori, cioè scala di grigi) o PBM (2 colori, cioè solo bianco o nero) come formato di input. Dalle mie osservazioni limitate, sembrerebbe che sulle immagini anti-aliasing, PPM e PGM (che producono SVG identici per quanto posso vedere) riducano l'area colorata e PBM espande l'area colorata (anche se solo un po '). Presumibilmente questa è la differenza tra un pixel > (256 / 2)test e un pixel > 0test. È possibile alternare tra i tre modificando l'estensione del file, ad es. il seguente uso PBM :

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

7

Puoi anche provare http://image.online-convert.com/convert-to-svg

Lo uso sempre per le mie esigenze.


Funziona davvero come un incanto anche nelle immagini complesse. Consiglio davvero questo strumento.
Atıfcan Ergin,

Purtroppo non ha funzionato per me.
Adam

Non funziona bene se l'immagine ha la trasparenza
Genaut,

Non puoi aspettarti che la sceneggiatura ti scatti una foto e di conseguenza ottenga un SVG perfettamente stratificato, non esiste nulla del genere. Se hai una forma semplice e vuoi ottenere il / i percorso / i, lo fa. Ho creato molte icone di font con quella pagina e non ho mai fallito per me.
thednp

@thednp la mia immagine è venuta fuori in bianco e nero
iOSAndroidWindowsMobileAppsDev

7

Ho appena trovato questa domanda e le risposte mentre sto cercando di fare la stessa cosa! Non volevo usare alcuni degli altri strumenti citati. (Non voglio dare via la mia e-mail e non voglio pagare). Ho scoperto che Inkscape (v0.91) può fare un ottimo lavoro. Questo tutorial è rapido e facile da capire.

È semplice come selezionare la tua bitmap in Inkskape e Shift + Alt + B.

Edge Detection con lo strumento bitmap di Inksape Trace basato su potrace


4

A seconda del motivo per cui vuoi convertire da .png a .svg, potresti non dover affrontare il problema. La conversione da .png (raster) a .svg (vettoriale) può essere una seccatura se non si ha molta familiarità con gli strumenti disponibili o se non si è un graphic designer di professione.

Se qualcuno ti invia un file di grandi dimensioni e ad alta risoluzione (ad esempio 1024x1024), puoi ridimensionarlo fino a qualsiasi dimensione desiderata in GIMP. Spesso, si avranno problemi nel ridimensionamento di un'immagine se la risoluzione (numero di pixel per pollice) è troppo bassa. Per correggere ciò in GIMP, puoi:

  1. File -> Open: il tuo file .png
  2. Image -> Image Properties: controlla la risoluzione e lo spazio colore. Volete una risoluzione di circa 300 ppi. Nella maggior parte dei casi si desidera che lo spazio colore sia RGB.
  3. Image -> Mode: impostato su RGB
  4. Image -> Scale Image: lascia da solo le dimensioni, imposta e risoluzione Y su 300 o superiore. Hit Scale.
  5. Image -> Scale Image: la risoluzione ora dovrebbe essere 300 e ora puoi ridimensionare l'immagine fino a quasi tutte le dimensioni che desideri.

Non è facile come ridimensionare un file .svg, ma sicuramente più facile e veloce rispetto al tentativo di convertire un .png in un .svg, se hai già un'immagine grande e ad alta risoluzione.


2

Presumo che tu voglia scrivere software per farlo. Per farlo in modo ingenuo, dovresti semplicemente trovare le linee e impostare i vettori. Per farlo in modo intelligente, si tenta di adattare le forme al disegno (adattamento del modello). Inoltre, dovresti tentare di accertare le regioni bitmap (regioni che non puoi modellare attraverso vergogna o applicare trame. Non consiglierei di seguire questa strada in quanto richiederà un po 'di tempo e richiede un po' di conoscenza della grafica e della visione artificiale. Tuttavia, l'output sarà molto e scalerà molto meglio dell'output originale.



0

Questo strumento sta funzionando molto bene in questo momento.

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


17
Questo incorpora l'immagine in svg, non una vera grafica vettoriale
Paul Gobée,

Questo ha convertito uno dei miei png colorati in cui altri convertitori online non sono stati in grado di convertire correttamente. Ho pensato che funzionasse da quando posso aprirlo nel browser ma quando ho provato ad aprirlo su un altro strumento, si è verificato un errore. Forse a causa del commento sopra indicato.
Vida,

-1

Se usi un sistema Linux, imagemagick è perfetto. ie

convert somefile.png somefile.svg

Funziona con un sacco di formati diversi.

Per altri media come l'uso di video e audio (ffmpeg) , tuttavia, so che hai chiaramente indicato png in svg; È ancora relativo ai media.

ffmpeg -i somefile.mp3 somefile.ogg

Solo un consiglio per se si desidera esaminare molti file; un ciclo usando i trucchi di base della shell ..

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

Ciò rimuove il jpg e aggiunge png che dice a convertire ciò che vuoi.


2
Imagemagick funziona su altre piattaforme, non solo su "Linux".
Lunatik,

25
Funziona tecnicamente, tuttavia, il file svg generato non è in realtà una grafica vettoriale - contiene solo la bitmap originale "così com'è". Pertanto, quando lo si ingrandisce, si ottiene comunque la qualità degradata di un'immagine raster.
Erel Segal-Halevi,

7
@archeyDevil no, questo non significa "convertire" in SVG, ma "incorporare" la bitmap in un SVG vuoto. Non serve a nessuno.
Adam,

4
@archeyDevil Il titolo della domanda è "converti in SVG". La tua risposta non si converte. Incorpora. PNG è un formato bitmap, SVG è un formato vettoriale. Massiccia differenza. Incorporare è inutile e non degno di una domanda SO IMHO
Adam

3
Sono consapevole che non si converte. L'ho fatto comunque; pubblicare questo post per coloro che non necessitano di un vettore persay, ma hanno solo bisogno di un cambio rapido e sporco tra i tipi di file.
DarkFox,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.