Übernehmen Sie die viewBox-Werte nicht ungeprüft als Breite und Höhe. Beginnen Sie mit der größten vorgesehenen Anzeige, erhalten Sie das Seitenverhältnis und testen Sie das PNG am echten Zielort.
SVG → PNG
SVG-Koordinaten und PNG-Pixel auseinanderhalten
Ein SVG beschreibt Formen, Pfade, Text und weitere Elemente durch Koordinaten und Zeichenanweisungen. Die vier viewBox-Werte legen Ursprung, Breite und Höhe eines internen Rechtecks fest. Sie helfen dabei, die Grafik auf einen Anzeigebereich abzubilden, schreiben aber nicht vor, wie viele Pixel ein PNG haben muss. Dasselbe SVG kann als kleines Symbol, als Abbildung in einer Anleitung oder als große Präsentationsgrafik gerendert werden, ohne seine viewBox zu ändern.
Ein PNG speichert dagegen das gerenderte Ergebnis auf einem festen Raster. Wird es später vergrößert, werden nicht wie beim SVG die Kurven neu berechnet, sondern vorhandene Pixel interpoliert. Daher kann die mechanische Übernahme einer viewBox von 100 mal 100 als Ausgabe von 100 mal 100 Pixeln für eine große Platzierung zu klein und für eine Miniatur unnötig sein. Notieren Sie vor der Umwandlung die größte Anzeigegröße, mögliche Vergrößerungen und den Bedarf auf hochauflösenden Bildschirmen.
- viewBox-Werte als interne Koordinaten verstehen
- Die größte reale Anzeigegröße vor dem Export festhalten
Die Skalierbarkeit gehört zur SVG-Quelle; das exportierte PNG besitzt ein festes Pixelraster.
Von der tatsächlichen Verwendung rückwärts planen
Beginnen Sie mit der Breite und Höhe, in der das Bild wirklich erscheint. Eine Grafik, die 200 CSS-Pixel breit angezeigt wird, kann für einen dichten Bildschirm eine größere Bitmap-Quelle verwenden. Der passende Faktor hängt jedoch vom Produkt, vom Gerät und von den Lieferbedingungen ab. Größere Maße schaffen Reserven beim Sampling, erhöhen aber meist auch Dateigröße und Verarbeitung. Testen Sie einen sinnvollen Kandidaten, statt ohne Prüfung den höchsten verfügbaren Wert zu wählen.
Hat eine Grafik mehrere Ziele, führen Sie diese getrennt auf. Ein 24-Pixel-Symbol in einer Werkzeugleiste, eine 300-Pixel-Abbildung in einer Hilfe und eine Foliengrafik haben unterschiedliche Anforderungen. Erstellen Sie eigene Ausgaben, wenn eine einzige übergroße Datei Ressourcen verschwenden oder eine kleine Datei vergrößert werden müsste. Schreiben Sie die Maße in die Namen freigegebener Varianten und vermerken Sie deren Zweck, damit niemand versehentlich die Symbolversion an einer großen Stelle einsetzt.
- Größen für Web, App, Dokument und Folie getrennt festlegen
- Bei stark abweichenden Zielen mehrere Ausgaben vorbereiten
Eine brauchbare Exportgröße folgt aus einer bekannten Platzierung, nicht aus einer beliebigen runden Zahl.
Seitenverhältnis und internen Leerraum gemeinsam prüfen
Wenn das Verhältnis der SVG-viewBox nicht zum PNG-Ausgaberechteck passt, muss der Renderer die Abweichung behandeln. Je nach Datei und Einstellung kann er die ganze Grafik mit zusätzlichem Raum erhalten, einen Teil abschneiden oder die Formen strecken. Ändern Sie Breite und Höhe nicht unabhängig voneinander, außer die Verformung ist beabsichtigt. Berechnen Sie das ursprüngliche Verhältnis, verändern Sie beide Maße gekoppelt und kontrollieren Sie das Ergebnis, denn der Konverter verwendet nicht zwingend die erwartete Anpassungsregel.
Unterscheiden Sie außerdem die Größe der Leinwand von dem Bereich, den die Grafik tatsächlich belegt. Eine große viewBox kann breite Ränder enthalten; dann bleibt das sichtbare Zeichen trotz größerem PNG relativ klein. Wenn Sie die Quelle bearbeiten können, korrigieren Sie unnötigen Leerraum im SVG. Andernfalls kommt ein sorgfältig geprüfter Zuschnitt nach dem Rastern infrage, ohne gewollten Freiraum oder Schatten zu entfernen. Mehr Pixel beseitigen weder interne Ränder noch einen falschen Beschnitt.
- Das Ausgaberechteck an das Quellverhältnis anpassen
- Leinwand und tatsächlich belegten Grafikbereich getrennt betrachten
Werden Breite und Höhe im gleichen Verhältnis geändert, lassen sich unbeabsichtigte Verzerrungen vermeiden.
Feine Linien, Text und verknüpfte Ressourcen testen
Linien, die als Vektor glatt aussehen, können beim Rastern in kleiner Größe zwischen Pixelgrenzen liegen und dadurch weich oder ungleichmäßig wirken. Winzige Schrift und enge Zwischenräume können ebenfalls zulaufen. Betrachten Sie das PNG in seiner vorgesehenen Anzeigegröße und nicht nur stark vergrößert. Verliert die kleinste Variante ihre Aussage, vereinfachen Sie den Entwurf, verstärken Sie Linien und Abstände, erhöhen Sie die Ausgabe soweit sinnvoll oder erstellen Sie eine eigene Kleinformatversion.
Manche SVG-Dateien hängen von Schriften, externen Bildern, Stylesheets, Masken oder Effekten ab, die in einer Vorschau vorhanden sind, dem Konverter aber fehlen. Eine Ersatzschrift verändert Umbrüche und Proportionen; eine nicht geladene Bilddatei verschwindet. Vergleichen Sie das PNG mit einer verlässlichen Darstellung der Quelle. Prüfen Sie bei einer Wortmarke jeden Buchstaben und bei einer Illustration Bilder, Verläufe, Masken und Schatten. Korrekte Pixelmaße gleichen eine fehlende Abhängigkeit nicht aus.
- Linien und Schrift in der tatsächlichen Größe beurteilen
- Gerenderte Schriften und verknüpfte Bilder bestätigen
Richtige Breite und Höhe garantieren keine treue Ausgabe, wenn Quellressourcen fehlen.
Das heruntergeladene PNG im echten Kontext validieren
Verarbeiten Sie zunächst ein repräsentatives SVG mit dem SVG-zu-PNG-Werkzeug und den gewählten Maßen. Laden Sie das Ergebnis herunter und öffnen Sie es in einem anderen Betrachter, um die tatsächliche Breite und Höhe zu bestätigen. Kontrollieren Sie Verhältnis, Leerraum, Beschnitt, Farben, Text und gleichmäßige Linien. Falls Transparenz benötigt wird, legen Sie das PNG auf helle und dunkle Hintergründe, um eine unerwartete weiße Fläche oder Randhalos zu erkennen. Die Vorschau im Konverter ersetzt die Prüfung der gespeicherten Datei nicht.
Fügen Sie anschließend genau dieses PNG in die Zielseite, App oder das Dokument ein. Prüfen Sie die kleinste und größte geplante Darstellung und achten Sie darauf, ob ein System die Datei über den vorgesehenen Bereich hinaus vergrößert. Wirkt sie weich, unterscheiden Sie zwischen zu wenigen Ausgabepixeln, einer beim Export geänderten Schrift oder Bildressource und einer nachträglichen Skalierung. Benennen Sie freigegebene Varianten mit ihren Maßen und behalten Sie das SVG, damit weitere Größen sauber erzeugt werden können.
Testen Sie vor einer Stapelverarbeitung ein zweites SVG mit andersartigen Details. Eine textreiche Grafik und ein einfaches Symbol können bei denselben Maßen verschieden reagieren. Dokumentieren Sie Größe, Hintergrund und geprüfte Platzierungen. Eine zusätzliche Kontrolle in einem repräsentativen Browser oder Betrachter hilft, Exportfehler von der Interpolation der Anzeigeumgebung zu unterscheiden und vermeidet unnötige Wiederholungen.
- Die Pixelmaße in der heruntergeladenen Datei bestätigen
- Dieselbe Ausgabe am kleinsten und größten Zielort einsetzen
Geben Sie das PNG erst frei, wenn es in der tatsächlichen Umgebung der Nutzenden funktioniert.
Das Wichtigste
- Die viewBox definiert einen internen Koordinatenbereich, keine vorgeschriebene Pixelzahl.
- Wählen Sie die Ausgabe nach der größten realen Anzeige und der benötigten Darstellungsdichte.
- Bewahren Sie das Seitenverhältnis, sofern Zuschnitt oder Verzerrung nicht beabsichtigt sind.
- Prüfen Sie nach dem Export Linien, Text, externe Ressourcen, Ränder und Transparenz.
Häufige Fragen
Muss ein PNG 100 mal 100 Pixel groß sein, wenn die viewBox 100 mal 100 beträgt?
Nein. Die viewBox definiert interne Koordinaten. Die PNG-Maße werden beim Rendern nach Verwendung und Anzeigedichte gewählt.
Sieht ein größeres PNG immer schärfer aus?
Nicht immer. Mehr Pixel können bei großer Anzeige helfen, doch SVG-Abhängigkeiten, spätere Skalierung und Entwurfsdetails beeinflussen das Ergebnis ebenfalls.
Was passiert, wenn ich Breite und Höhe getrennt ändere?
Das Seitenverhältnis ändert sich; Streckung, Beschnitt oder zusätzlicher Raum können entstehen. Bewahren Sie es, sofern die Änderung nicht beabsichtigt ist.
Warum wirkt die Grafik in einem großen PNG trotzdem klein?
Die SVG-viewBox kann viel internen Leerraum enthalten. Prüfen Sie neben den Außenmaßen auch die tatsächlichen Grenzen der Formen.
Was sollte ich nach dem Export prüfen?
Kontrollieren Sie Maße, Verhältnis, Ränder, Beschnitt, Transparenz, Text, Linien und verknüpfte Ressourcen und testen Sie die Datei am echten Zielort.