SVG in PNG umwandeln

Es gibt keinen Qualitätsregler, weil PNG verlustfrei ist: Es verwirft nichts, egal bei welcher Einstellung. Die einzige Entscheidung, die das Aussehen des Ergebnisses beeinflusst, ist die Ausgabebreite.

Sinnvolle Größen für häufige Zwecke:

• Favicons und kleine Symbole: 32 bis 256 px. Sehr kleine Größen brauchen oft eine eigens gestaltete Version statt einer verkleinerten, weil feine Details unter etwa 32 px zu Matsch werden.
• Webbilder und Logos: 512 bis 1024 px. Etwa das Doppelte der Anzeigegröße, damit es auf Bildschirmen mit hoher Pixeldichte scharf bleibt.
• Präsentationen und Dokumente: 1024 bis 2048 px.
• Druck: so groß wie praktikabel. Das übliche Ziel sind 300 Pixel pro gedrucktem Zoll, eine 15 cm breite Grafik braucht also etwa 1800 px.

Prüfen Sie die Schriften. Verweist Ihr SVG per Namen auf eine Schrift, statt den Text in Pfade umzuwandeln, muss der Renderer sie durch eine verfügbare ersetzen, und das Ergebnis passt vielleicht nicht zu dem, was Sie in Ihrem Designprogramm gesehen haben. Zählt der Text, wandeln Sie ihn vor dem SVG-Export in Pfade um: Die meisten Designprogramme haben einen Befehl wie „In Pfade umwandeln“ oder „Konturen erstellen“.

Wird das PNG schwerer als gewünscht, funktioniert die PNG-Kompression besonders gut bei Bildern aus Vektoren, die meist wenige verschiedene Farben haben. In WebP umzuwandeln ist fürs Web oft noch besser.

Wann Sie ein PNG statt des SVG brauchen

• Eine Plattform lehnt SVG ab. Viele soziale Netzwerke, Marktplätze, E-Mail-Programme und ältere Content-Management-Systeme akzeptieren nur PNG, oft aus denselben Sicherheitsgründen, die weiter unten erklärt werden.
• App-Symbole, Favicons und App-Store-Einträge, die fast immer genaue Pixelmaße vorgeben.
• E-Mail. Die SVG-Unterstützung in E-Mail-Programmen ist schwach und uneinheitlich; PNG funktioniert überall.
• Einfügen in ein Dokument oder eine Präsentation, wo manche Programme SVG unvorhersehbar oder gar nicht darstellen.
• Druckabläufe, die eine Bitmap-Datei in bekannter Auflösung erwarten.
• Das SVG nutzt Schriften oder Effekte, die anderswo anders gerendert werden. Die Umwandlung in eine Bitmap friert das Aussehen ein, damit alle dasselbe sehen.

Wann Sie beim SVG bleiben

Für alles auf einer Website, die Sie selbst betreiben, ist SVG meist besser: Es ist oft leichter als PNG und bleibt bei jeder Pixeldichte scharf, ohne dass Sie mehrere Größen erzeugen müssen. Alle aktuellen Browser zeigen SVG an.

Wandeln Sie um, wenn Sie eine Bitmap mit fester Größe für einen Ort brauchen, der den Vektor nicht annimmt.

Wie wir SVG sicher behandeln

SVG ist unter den Bildformaten ungewöhnlich: Es ist ein strukturiertes Dokument, kein Block aus Pixeln, und ein böswillig geschriebenes kann Dinge versuchen, die ein JPG nie könnte: Dateien vom Server lesen, Netzwerkanfragen nach außen stellen oder Skripte einbetten.

Zwei Dinge sorgen dafür, dass das hier kein Problem ist.

Erstens: Sie bekommen ein PNG, nie das SVG. Nichts, was in der Datei eingebettet ist, kann in Ihrem Browser laufen, weil Ihr Browser die Datei nie sieht.

Zweitens wird jedes hochgeladene SVG geprüft, bevor irgendetwas es verarbeitet. Dateien mit Dokumenttyp-Deklarationen, Entity-Definitionen, Skripten, Event-Handlern oder Verweisen auf externe Ressourcen werden direkt abgelehnt statt repariert: Eine feindselige Datei umzuschreiben und dem Ergebnis dann zu vertrauen, ist ein viel schwierigeres Problem, als sie abzulehnen. Eingebettete Bilder als Data-URI und interne Verweise wie Verläufe sind nicht betroffen, normale SVGs aus Designprogrammen werden also problemlos umgewandelt.

Einen kompletten Symbolsatz rendern

Fügen Sie so viele SVGs hinzu, wie Sie möchten; jedes wird einzeln in der gewählten Größe gerendert, mit eigenem Download. Brauchen Sie dasselbe Symbol in mehreren Größen, lassen Sie den Stapel einmal pro Größe laufen: Der Vektor wird jedes Mal neu gerendert statt skaliert, alle Größen bleiben also gleich scharf.