Bei PNG zu SVG dreht sich alles um Bildverfolgung und Vektorisierung – die Konvertierung eines Rasterbilds (jpg/png) in ein Vektorbild (svg).
Wenn Sie von der Vielfalt der Optionen überwältigt sind, ist der allgemeine Konsens:
Um optimale Ergebnisse mit Bildern mit niedriger Auflösung zu erzielen, verarbeiten Sie diese mit einem KI-Bild-Upscaler vor und vektorisieren Sie sie anschließend.
Viele der unten aufgeführten Apps enthalten keine Befehlszeilenversionen und lassen sich nicht online hosten. Sie sind jedoch mit Apps wie Keyboard Maestro und AutoHotkey skriptfähig.
Um Ihren eigenen Konverter online zu hosten, sehen Sie sich die Open-Source-Spezifikationen und Codebeispiele unten an.
Ich bin immer auf der Suche nach alternativer Vektorisierungssoftware! Erstellen Sie ein GitHub-Problem und ich füge es der Liste hinzu.
Das ursprüngliche Ziel dieses Dokuments bestand darin, eine Spezifikation für serverlose NodeJS-Funktionen zum Konvertieren von Rasterbildern in SVG zu skizzieren und eine Verknüpfung zu anderen Repositorys für Implementierungen herzustellen.
Daher dient der Rest des Dokuments als einfache Spezifikation dafür, wie Anfragen und Antworten für die Konvertierung zwischen Rasterbildern und SVG strukturiert sein sollten. Sehen Sie sich die zugehörigen Repositorys für Implementierungen der Spezifikation an.
Bildverfolgung
Serverlos
function ImageInput ( ) {
const [ files , setFiles ] = React . useState < File [ ] > ( ) ;
const onSubmit = ( event ) => {
event . preventDefault ( ) ;
if ( ! files ?. length ) return ;
async function getSvg ( ) {
try {
const formData = new FormData ( ) ;
files . forEach ( ( file , index ) =>
formData . append ( `image- ${ index } ` , file , file . name )
) ;
const response = await axios . post ( url , formData , {
headers : {
"Content-Type" : "multipart/form-data" ,
} ,
} ) ;
} catch ( error ) {
console . log ( error )
}
}
getSvg ( ) ;
} ;
return (
< form onSubmit = { onSubmit } >
< input
id = "file"
name = "file"
type = "file"
multiple
required
accept = "image/jpeg, image/png, image/webp, image/gif, image/svg+xml, image/heic"
onChange = { ( event ) => {
const files = Array . from ( event . target . files ) ;
if ( files ?. length ) {
setFiles ( files ) ;
}
} }
/ >
< / form >
) ;
}{
"algorithm" : " imagetracerjs " ,
"files" : [
{
"fieldName" : " image-1 " ,
"originalName" : " demo-one.png " ,
"svg" : " <svg>…</svg> "
},
{
"fieldName" : " image-2 " ,
"originalName" : " demo-two.jpg " ,
"svg" : " <svg>…</svg> "
}
]
}Um die weitere Entwicklung dieses Projekts zu unterstützen, denken Sie über eine Spende nach.
Beiträge willkommen.
