Ein Logo kommt in zwei Dateien an: logo.svg Bei 3 KB und logo.png Bei 40 KB. sehen beide in einem Browser-Tab gleich aus Blasen Sie sie auf, um einen Beamer-Bildschirm zu füllen und nur einer bleibt scharf Versuchen Sie, sie in ein soziales Profil hochzuladen und nur der andere wird akzeptiert Und wenn Sie nur den PNG haben, die Tools, die versprechen, & quot; PNG in SVG" umzuwandeln; geben Sie etwas zurück, das technisch gesehen ein SVG ist, aber nicht die Datei, die Ihr Designer gemacht hätte.
Diese Anleitung erklärt den Unterschied zwischen den beiden Formaten in Bezug darauf, was jede Datei speichert, wann welche zu verwenden ist, was passiert, wenn Sie eine SVG in Pixel rendern, und was die Rückverfolgung eines PNG in Vektorformen wiederherstellen kann und was nicht Es enthält reelle Zahlen aus der Tracing-Engine hinter den Toolz-Konvertern und sitzt unter der Bildwerkzeuge Hubdrohen
tl; dr: SVG ist ein Vektorformat: es speichert Formen als Geometrie, skaliert also auf jede beliebige Größe ohne Unschärfe und ist ideal für Logos, Symbole und Diagramme PNG ist ein Rasterformat: Es speichert ein festes Raster von Pixeln, verlustfrei, das zu Screenshots, detaillierten Grafiken und überall dort passt, wo nur Bilder akzeptiert werden Der Wechsel von SVG zu PNG ist genau in der von Ihnen gewählten Größe; Verwenden Sie die SVG-zu-PNG-Wandler Bei 2 x oder 4 x für scharfe Ausgabe Der Wechsel von PNG zu SVG ist Tracing, das Formen aus Pixeln neu erstellt und kein ursprüngliches Design wiederherstellt Es funktioniert für flache Logos und Linienzeichnungen und scheitert auf Fotos Alle Konvertierungen hier laufen clientseitig, nichts hochgeladen, kostenlos, keine Anmeldung.
Was ist der Unterschied zwischen SVG und PNG?
SVG beschreibt ein Bild als Anleitung zum Zeichnen, während PNG die fertige Zeichnung als Pixel speichert Alles weitere an den beiden Formaten folgt aus diesem einen Unterschied.
Eine SVG-Datei, definiert durch den W3C in Skalierbare Vektorgrafiken (SVG) 2XML-Text ist, listet Pfade, Kreise, Rechtecke, Farbverläufe und Text auf, jeweils mit Koordinaten und Farben Nichts darin sagt aus, wie viele Pixel das Bild hat Wenn ein Browser es anzeigt, arbeitet der Renderer aus, welche Pixel jede Form mit der Größe auf dem Bildschirm abdeckt, weshalb die gleiche Datei auf einem Telefon und auf einem 5 K-Monitor knackig ist.
Eine PNG-Datei, die vom W3 C als angegeben wird Tragbare Netzwerkgrafiken Und als ISO/IEC 15948 veröffentlicht, ist ein Raster aus farbigen Pixeln, die mit DEFLATE komprimiert wurden Die Komprimierung ist verlustfrei, also sind die Pixel, die Sie dekodieren, genau die Pixel, die gespeichert wurden Ein PNG kann einen vollen Alphakanal tragen und bis zu 16 Bit pro Kanal Was es nicht kann, ist Details hinzufügen: Ein 512 x 512 PNG, das bei 2048 x 2048 angezeigt wird, hat jedes Pixel über einen 4 x 4 Block gestreckt, und Kanten werden weich oder blockig.
Hier ist das gleiche einfache Abzeichen wie bei SVG Quelle:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
Diese vier Markup-Zeilen sind das ganze Bild, und sie bleiben vier Zeilen, egal ob Sie es mit 240 Pixeln Breite oder 24.000 anzeigen. Die PNG-Version desselben Abzeichens mit 240 x 80 fasst 19.200 Pixel und mit 960 x 320 fasst es 307.200.
SVG vs PNG: welches Format soll ich verwenden?
Verwenden Sie SVG für alles, was aus Formen besteht, die skaliert werden müssen, und PNG für alles, was aus Pixeln besteht oder irgendwo hingeht, wo nur Rasterbilder akzeptiert werden. Diese Tabelle stellt sie nebeneinander:
| Eigentum | SVG | PNG |
|---|---|---|
| Bildmodell | Vektor: Pfade, Formen, Text | Raster: Festes Pixelraster |
| serienmäßig | W3C SVG 2 | W3 C PNG, ISO/IEC 15948 |
| Schuppung | Scharf in jeder Größe | Unschärfen oder Blöcke bei Vergrößerung |
| Kompression | Text; gzip auf dem Server | VerlustfreiES DEFLAT |
| Transparenz | ja | Ja, volle Alpha |
| Dateigröße für ein Logo | Normalerweise ein paar KB | Wächst mit Pixelabmessungen |
| Dateigröße für ein Foto | Unpraktisch | Groß, aber vernünftig |
| Nach Export editierbar | Ja, Formen und Farben in einem Vektoreditor | Nur Pixel für Pixel |
| Text drinnen | Kann wählbar und durchsuchbar bleiben | Zu Pixeln gebacken |
| Skripte enthalten kann | Ja, das ist ein Sicherheitsanliegen | kein |
| Akzeptiert durch Social Uploads, Office-Apps, E-Mail | Oft nicht | fast immer |
| am besten für | Logos, Symbole, Diagramme, Diagramme, UI-Illustrationen | Screenshots, detaillierte Grafiken, Anlagevermögen |
Eine praktische Regel: Behalten Sie die SVG als Ihren Master für jeden Vektor, und exportieren Sie PNGs aus ihr in den Größen, die jedes Ziel benötigt Behalten Sie niemals nur den PNG eines Logos, denn das Zurückdrehen von Pixeln in Formen ist auf eine Weise verlustbehaftet, die Formen in Pixel verwandelt, nicht.
Bei Fotografien ist keines der beiden Formate die richtige Wahl für die Lieferung Ein Foto in PNG ist groß, und ein Foto in SVG ist entweder ein in XML verpacktes PNG oder eine nachgezeichnete Näherung JPEG, WebP oder AVIF werden für diesen Auftrag gebaut; Was WebP ist und wann man es nutzt Die Fotoseite abdeckt.
Warum verweigern so viele Orte SVG-Uploads?
Denn ein SVG ist ein Dokument, das aktiven Inhalt enthalten kann, nicht nur ein Bild Die SVG-Spezifikation erlaubt <script> Elemente, Event-Handler-Attribute wie z onloadLinks zu externen Ressourcen und eingebettetem HTML durch <foreignObject>. Auf einer Seite, die einen SVG-Upload akzeptiert und später von ihrer eigenen Domain aus bedient, könnte am Ende jemand anderes laufen.' s JavaScript für jeden Besucher, der die Datei direkt öffnet.
SVG sicher zu sanisieren ist möglich, aber fummelig, so viele Plattformen nehmen den einfacheren Weg: Profilbilder, Marktplatzeinträge, Anzeigennetzwerke, viele CMS-Mediatheken und die meisten E-Mail-Clients akzeptieren nur Rasterformate Office-Dokumente und Chat-Apps haben auch lückenhafteren Support.
Das ist der häufigste Grund, SVG in PNG umzuwandeln. Ein Browser, der ein SVG als Bild zeichnet, ist der sichere Fall, da ein SVG über ein geladenes Bild geladen wird <img> Element oder auf eine Leinwand darf keine Skripte ausführen oder externe Dateien abrufen Die Toolz-Konverter rendern SVGs genau so, was es sicher macht, eine Datei aus einer unbekannten Quelle zu konvertieren.
Wie konvertiert man SVG in PNG, ohne an Qualität zu verlieren?
Rendern Sie den SVG in der Pixelgröße, die Sie benötigen, oder größer, und skalieren Sie den PNG danach nie mehr, denn der SVG ist Geometrie, zeichnen Sie ihn mit 4 x ist so exakt wie zeichnen Sie ihn mit 1 x; alle Qualitätsverluste in dieser Richtung kommen von zu kleinen Ausgang zu nehmen.
der SVG-zu-PNG-Wandler Größe in dieser Reihenfolge aus:
- Wenn die SVG-Wurzel setzt
widthundheight, werden diese verwendet, mit Einheiten wiemm,pt,inundcmIn CSS-Pixel umgewandelt. - Wenn es nur eine hat
viewBox, die viewBox Breite und Höhe werden verwendet. - Wenn es keines von beiden hat, wird es mit 1024 x 1024 gezeichnet.
- Wenn die längste Seite noch unter 512 Pixel liegt, wird die Zeichnung proportional vergrößert, bis diese Seite 512 beträgt, da ein 24 x 24-Symbol, das in der angegebenen Größe gezeichnet wurde, zu klein ist, um es zu verwenden.
- Die Option SVG-Skala multipliziert dann das Ergebnis mit 1, 2 oder 4.
Nehmen Sie das Abzeichen oben, das erklärt width="240" height="80". Die längste Seite ist unter 512, also vergrößert auf 512 x 171. Bei 2 x kommt das PNG mit 1024x342 raus, wobei die unlackierten Ecken transparent gelassen werden, der Hinweis unter dem Ergebnis gibt die Größe und woher es kommt an, so dass es keine Vermutung gibt.
Wählen Sie 2 x für Bildschirme, wo die meisten Telefone und Laptops zwei oder mehr Gerätepixel pro CSS-Pixel verwenden, und 4 x für Druck - oder große Displays Die Ausgangsobergrenze beträgt 100 Megapixel oder 16.384 Pixel auf einer Seite, und SVG-Dateien über 50 MB werden abgelehnt; ein kleinerer Maßstab behebt den ersten Fall.
Zwei Arten von Inhalten überleben das Rendern nicht. Bilder und Webschriften, die durch URL verknüpft sind, werden weggelassen, da ein als Bild gezeichneter SVG nichts außerhalb der Datei abrufen kann, sodass Text auf eine Systemschriftart zurückfällt; Durch die Konvertierung von Text in Umrisse in Ihrem Vektoreditor vor dem Export wird dies vermieden. Und ein animierter SVG wird zu einem einzelnen Standbild.
Soll ich SVG in PNG, JPG oder PDF konvertieren?
Konvertieren Sie standardmäßig in PNG, nur dann in JPG, wenn das Ziel PNG ablehnt oder eine kleinere Datei für eine fotoähnliche Grafik benötigt, und in PDF, wenn Sie ein Dokument zum Drucken oder E-Mail-Versand benötigen.
| Zielscheibe | Transparenz | Größe | Was du verlierst | etw zu et |
|---|---|---|---|---|
| PNG | gepflegt | Mittel | Skalierbarkeit | Uploads, Folien, App-Assets, alles mit transparentem Hintergrund |
| JPG | Weiß gefüllt | Kleinste für komplexe Kunst | Skalierbarkeit, Transparenz, etwas Kantenschärfe | Formulare, die nur JPG, E-Mail-Anhänge |
| PDF (gerastert) | Transparente Bereiche zeigen die weiße Seite | Größer | Skalierbarkeit, wählbarer Text, anklickbare Links | Korrekturbögen, Drucken eines Diagramms, Versenden von Kunstwerken an Nichtdesigner |
der SVG-zu-JPG-Wandler Füllt transparente Bereiche mit Weiß, da JPEG keinen Alphakanal hat, und trägt den Quality-Schieberegler auf. Knackige Kanten bei flacher Farbe sind genau dort, wo die JPEG-Komprimierung schwache Klingeln hinterlässt, sodass ein Logo normalerweise besser als PNG aussieht.
der SVG zu PDF Konverter Eine deutliche Warnung verdient Es rastert: jedes SVG wird auf Pixel gezeichnet, als PNG gespeichert und auf eine Seite gestellt Das PDF enthält keine Vektorformen, Text kann nicht ausgewählt werden, und das Zoomen zeigt weit genug Pixel anDie Skalenoption hilft trotzdem, da die Seitengröße fix bleibt, während 2 x und 4 x mehr Pixel hineinpacken (72, 144 oder 288 Pixel pro Zoll mit Bildanpassen).Wenn ein Druckshop nach einem Vektor-PDF fragt, pro ISO 32000 Ein PDF kann echte Vektorpfade übertragen, aber Sie benötigen einen Vektoreditor und #39;s exportieren dafür, keinen Bildkonverter.
Was bewirkt die Umwandlung von PNG in SVG?
Durch die Konvertierung von PNG in SVG wird das Bild verfolgt: Es gruppiert die Pixel in Bereiche ähnlicher Farbe und passt Umrisse um jeden Bereich an, wodurch gefüllte Vektorpfade entstehen. Es findet die ursprüngliche Vektordatei nicht, da ein PNG keinen Datensatz der Formen enthält, die es hergestellt haben. Jede Kante in der Ausgabe ist eine Schätzung, die aus den Pixeln gezogen wird.
Der Tracer dahinter PNG zu SVG und JPG zu SVG Auf Toolz ist imagetracerjs, läuft in einem Hintergrund-Webworker, so dass die Seite responsive bleibt Es funktioniert in zwei Schritten:
- Farbreduktion. Das Bild ist auf eine kleine Palette reduziert, die Zahl, die Sie unter Farben auswählen: 2, 8 oder 16.
- Kantenbeschlag. Für jede Farbschicht verläuft der Tracer über die Grenze jedes verbundenen Bereichs und passt gerade Linien und Kurven an diesen an, wodurch ein gefüllter Pfad pro Bereich entsteht.
Jeder Pfad bekommt auch einen 1 Pixel Umriss in seiner eigenen Farbe, ohne ihn hinterlassen benachbarte Formen Haarlinienspalten, wo sich ihre Kanten nicht ganz treffen, und der Hintergrund zeigt sich als dünne weiße Nähte durch.
Detail steuert, wie genau diese Umrisse den Pixeln folgen:
| Detail | Linien - und Kurventoleranz | Specks sind unten gefallen | Vorverschwimmen | Ergebnis |
|---|---|---|---|---|
| Niedrig | 2 px | 16 Punkte | Leicht | Glättere, einfachere, kleinere Dateien |
| Medium (Standard) | 1 px | 8 Punkte | keine | Ausgewogen |
| Hoch | 0,5 px | 2 Punkte | keine | Folgt Pixel genau, hält winzige Formen, schwerer |
Das nachgezeichnete SVG wird mit seinen width und height Auf die ursprüngliche Bildgröße eingestellt und eine viewBox In nachgezeichneten Pixeln öffnet es sich also in der von Ihnen erwarteten Größe und skaliert sauber, wo immer Sie es platzieren.
Was kann Tracing gut machen und wo scheitert es?
Die Nachverfolgung funktioniert gut auf Bildern, die von Anfang an vektorartig waren: flache Farbe, harte Kanten, wenige Farben. Bei kontinuierlichen Tönen scheitert es an allem, weil ein Foto keine Kanten zu finden hat, sondern nur Farbverläufe.
| Quelle | Wie es nachzeichnet | Vorgeschlagene Einstellungen |
|---|---|---|
| Flache Logo, 2 bis 6 Farben | Saubere Formen, kleine Datei | 8 Farben, Medium |
| Schwarz-Weiß-Linienkunst, Unterschriften, Briefmarken | Sehr sauber | 2 Farben, mittel oder hoch |
| Symbole mit einem Farbverlauf | Gradient verwandelt sich in Bänder | 16 Farben, Medium, dann in einem Editor vereinfachen |
| Gescannte Zeichnung auf Papier | Papiertextur wird zu Flecken | 2 Farben, niedrig |
| JPG-Logo mit Kompressionsartefakten | Flecken entlang der Kanten, Hintergrund als Form nachgezeichnet | Geringe Details; Löschen Sie anschließend die Hintergrundform |
| Screenshot mit Text | Buchstaben werden zu blobigen Umrissen | Behalten Sie es als PNG |
| Fotografieren | Fleckige posterisierte Formen, riesige Datei | Nicht zurückverfolgen |
Die Fotozeile ist keine Geschmackssache, beim Testen der Toolz-Engine hat ein 2000 px lautes Foto, das mit 16 Farben nachgezeichnet wurde, 28 Sekunden gedauert und einen 46 MB SVG erzeugt, um ein Vielfaches schwerer als das Bild, von dem es kam und immer noch sichtbar schlechter. Lärm gibt dem Tracer Tausende winziger Regionen, und jeder wird zu seinem eigenen Pfad mit seinen eigenen Koordinaten.
Dieser Test ist, warum der Konverter jedes Bild, das länger als 1200 Pixel auf einer Seite ist, vor dem Tracing auf 1200 skaliert Das Tracing endet dann in Sekunden statt Minuten, und weil die Ausgabe die ursprüngliche Breite und Höhe beibehält, ändert sich nichts darüber, wie das SVG platziert wird Eine Spur, die nach zwei Minuten noch läuft, wird mit einer Nachricht gestoppt, die weniger Farben oder weniger Details vorschlägt, anstatt die Registerkarte auf unbestimmte Zeit zu beschäftigen.
JPG-Quellen fügen zwei spezifische Probleme hinzu.JPEG-Komprimierung hinterlässt schwache Blöcke um scharfe Kanten, die der Tracer in verirrte Formen verwandeln kann; Low detail verwischt leicht und lässt specks fallen, um dem entgegenzuwirken Und JPG hat keine Transparenz, so dass die weiße Box um ein Logo eine weitere gefüllte Form hinter dem Artwork wird Wählen Sie in einem Vektoreditor diese Form aus und löschen Sie sie.
Wie bekomme ich ein sauberes SVG von einem PNG-Logo?
Beginnen Sie mit den einfachsten Einstellungen, die das Design bewahren, schauen Sie sich die Vorschau an und fügen Sie nur Farben oder Details hinzu, wenn etwas fehlt. Schwerere Einstellungen beheben selten eine schlechte Spur; Sie fügen dem mehr Pfade hinzu.
Eine zuverlässige Sequenz:
- Verwenden Sie die größte, sauberste Quelle, die Sie haben Ein PNG-Export schlägt einen Screenshot, und ein Screenshot schlägt ein Foto eines Ausdrucks.
- Zählen Sie die Farben im Logo und wählen Sie die nächstgelegene Option an oder darüber aus Eine Zweifarbenmarke will 2, eine Fünffarbenmarke will 8.
- Trace bei Medium Überprüfen Sie die Vorschau und die Dateigröße, die unter dem Ergebnis angezeigt wird.
- Wenn es Flecken oder Ecken und Kanten gibt, verfolgen Sie bei Low zurück. Wenn dünne Details verschwunden sind, verfolgen Sie sie bei High zurück.
- Öffnen Sie das Ergebnis in einem Vektoreditor für den letzten Schritt: Löschen Sie die Hintergrundform, falls vorhanden, führen Sie Formen zusammen, die eins sein sollten, und ersetzen Sie jeden nachgezeichneten Text durch echten Text in der richtigen Schriftart.
Wenn die nach der Nachverfolgung angezeigte Dateigröße größer als das PNG ist, betrachten Sie das als Signal. Für ein Logo bedeutet dies normalerweise, dass Rauschen verfolgt wird; Für alles andere bedeutet es normalerweise, dass das Bild raster bleiben sollte.
Wenn die Spur auf eine Schneidemaschine, einen Lasergraveur oder eine Sticksoftware zusteuert, sind 2 Farben oft die richtige Antwort, selbst für ein farbenfrohes Design, da diese Maschinen nach Umrissen und nicht nach Füllungen arbeiten.
Kann ich zwischen diesen Formaten an einer Stelle konvertieren?
Ja. Der General Bildkonverter Akzeptiert SVG zusammen mit JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, CR2, DNG und PDF und schreibt JPG, PNG, WebP, GIF, ICO, PDF oder SVG. Wenn Sie SVG als Ziel wählen, wird jede Rasterquelle mit denselben Farben und Detaileinstellungen verfolgt; Die Auswahl eines Rasterziels für eine SVG-Quelle zeigt die Option der SVG-Skala.
Die dedizierten Paarseiten akzeptieren nur ihr eigenes Quellformat, wodurch die Optionen auf dem Bildschirm relevant bleiben: Die SVG-Seiten zeigen den Maßstab, die Spurenseiten zeigen Farben und Details.
Eine Kombination wird nicht angeboten: PDF in SVG. Der Konverter lehnt es mit einer Nachricht ab, und der darin vorgeschlagene Weg ist zwei Schritte: Konvertieren Sie zuerst die PDF-Seite in PNG, dann verfolgen Sie das PNG Wenn das PDF von einem Vektorprogramm stammt, behält der Export von SVG aus diesem Programm die tatsächlichen Pfade und ist die bessere Option.
Ein SVG kann auch ein Favicon werden Durch Rendern an ICO entstehen bei jeder Symbolgröße quadratische PNG-Bilder, und das Minimum von 512 px bedeutet, dass ein kleines Symbol SVG immer noch einen sauberen 256 px-Eintrag liefert. Favicon-Größen und was in einer ICO-Datei enthalten ist Umschläge, welche Größen enthalten sein sollen.
Sind SVG - und PNG-Umwandlungen privat?
Ja. Rendern, Kodieren und Nachverfolgen aller Ereignisse clientseitig, innerhalb der Browser-Registerkarte, so dass keine Datei hochgeladen wird Der SVG-Dekodierungsschritt und der Tracer werden nur heruntergeladen, wenn eine Datei sie benötigt, wodurch die Seite hell bleibt, wenn Sie nur zwischen Rasterformaten konvertieren.
Die Grenzen, an einer Stelle: SVG-Dateien bis 50 MB, gerenderte Leistung bis 100 Megapixel und 16.384 Pixel die Seite, Rasterquellen bis 100 Megapixel, Nachzeichnung mit bis zu 1200 px auf der längsten Seite, und eine Zwei-Minuten-Decke pro Spur Die Tools sind kostenlos, keine Anmeldung, mit einer täglichen Begrenzung der Conversions.
