SVG in WebP umwandeln

Die Standardqualität liegt hier bei 92, deutlich höher als die 75–82, die Sie für ein Foto nehmen würden, und das mit Absicht.

Jede verlustbehaftete Kompression ist auf allmähliche Farbübergänge ausgelegt. SVGs erzeugen das Gegenteil: große Flächen vollkommen flacher Farbe, die an harten Kanten aufeinandertreffen. Bei mittleren Qualitätseinstellungen zeigt sich das als leichte Flecken in den Vollflächen und ein weicher Saum entlang der Konturen, beides bei einem sauberen Logo viel sichtbarer als bei einem Foto mit derselben Einstellung.

• 95–100: praktisch nicht von einem verlustfreien Rendering zu unterscheiden. Nutzen Sie das für Logos, Symbole und alles mit Text.
• 88–94: der Standardbereich. Bei den meisten Designs sauber.
• 75–87: Artefakte werden um Kanten und in Vollflächen sichtbar.
• Unter 75: bei Grafiken deutlich verschlechtert.

Rendern Sie größer, bevor Sie die Qualität erhöhen. Artefakte skalieren mit der Pixelgröße, ein Rendering mit 2048 px bei Qualität 90 schlägt also meist eines mit 512 px bei Qualität 100, und es bleibt scharf, falls das Bild einmal größer angezeigt wird.

Wie bei jeder Umwandlung von SVG in eine Bitmap gilt: Prüfen Sie die Schriften. Nennt die Datei eine Schrift per Namen, statt den Text in Pfade umzuwandeln, ersetzt der Renderer sie durch eine verfügbare. Wandeln Sie den Text in Ihrem Designprogramm in Pfade um, wenn die Buchstaben wichtig sind.

Wie Sie zwischen den drei Bitmap-Zielen wählen

• WebP: am besten für eine Website, die Sie selbst betreiben. Transparenz, saubere Kanten, die leichteste Datei.
• PNG: am besten, wenn Sie nicht vorhersehen können, was die Datei öffnet. Transparenz, saubere Kanten, universelle Kompatibilität, schwerere Datei.
• JPG: nur, wenn etwas es ausdrücklich verlangt. Keine Transparenz, und die Kompression passt schlecht zu flachen Grafiken.

Vektor und Bitmap gleichzeitig ausliefern

Wollen Sie die Schärfe des SVG, wo es unterstützt wird, und sonst eine Bitmap als Rückfall, löst das <picture>-Element das:

<picture>
  <source srcset="logo.svg" type="image/svg+xml">
  <img src="logo.webp" alt="…">
</picture>

In der Praxis nutzen alle aktuellen Browser das SVG, das schützt also vor allem vor ungewöhnlichen Clients.

Wie wir SVG sicher behandeln

SVG ist ein strukturiertes Dokument und kein Block aus Pixeln, und ein böswillig geschriebenes kann Dinge versuchen, die ein Foto nicht kann: Dateien vom Server lesen, Netzwerkanfragen nach außen stellen oder Skripte laden. Genau deshalb lehnen so viele Plattformen SVG-Uploads ab und schicken die Leute hierher.

Zwei Dinge machen es hier sicher. Sie bekommen ein WebP, nie das SVG, nichts in der Datei Eingebettete kann also in Ihrem Browser laufen. Und jede hochgeladene Datei wird geprüft, bevor irgendetwas sie verarbeitet: Dokumenttyp-Deklarationen, Entity-Definitionen, Skripte, Event-Handler und Verweise auf externe Ressourcen führen dazu, dass die Datei abgelehnt statt repariert wird. Eingebettete Bilder als Data-URI und interne Verweise wie Verläufe bleiben unberührt, normale Exporte aus Designprogrammen werden also problemlos umgewandelt.

Einen Symbolsatz umwandeln

Fügen Sie so viele Dateien hinzu, wie Sie möchten; jede wird in der gewählten Breite gerendert, mit eigenem Download. Brauchen Sie dasselbe Symbol in mehreren Größen, lassen Sie den Stapel einmal pro Größe laufen: Jedes Mal wird aus dem Vektor gerendert, statt ein früheres Ergebnis zu skalieren, alle Größen bleiben also gleich scharf.