Ein SVG im Stylesheet spart eine Anfrage, wenn der Code als SVG-Data-URI direkt in der CSS-Regel steht. Dafür muss der Code zu einer einzigen, sauber codierten Zeichenfolge werden. Manche Formulare und App-Stores nehmen dagegen nur PNG an. Beides erledigt dieses Feld.
Warum dein Code im Tab bleibt
Codierung und PNG-Rendering laufen im Browser. Ein Klick auf einen Button sendet keine Anfrage. Das siehst du im Netzwerk-Tab der Entwicklertools.
SVG-Data-URI: Prozent-Codierung oder Base64
Der Button Data-URI kopieren liefert data:image/svg+xml,... mit Prozent-Codierung. Einfache und doppelte Anführungszeichen werden dabei zusätzlich maskiert. Diese Form ist bei SVG oft kürzer. Base64 kopieren liefert data:image/svg+xml;base64,.... Base64 macht den Text etwa ein Drittel länger. Beide Buttons kopieren die ganze URI samt Präfix data:, nicht nur den Base64-Teil. Der Code wird nicht verkleinert.
Ein quadratisches PNG aus jeder Grafik
Das PNG ist immer quadratisch. Eine breite Grafik wird deshalb gestreckt. Der Hintergrund bleibt transparent.
Schritt für Schritt vom Code zur Datei
- Füge den SVG-Code in das Textfeld ein. Am Anfang steht ein Beispiel: ein blauer Kreis mit weißem Stern.
- Prüfe die Vorschau. Sie liegt auf einem dunklen Schachbrettmuster, damit helle Formen sichtbar bleiben.
- Kopiere die Data-URI oder den Base64-Text mit dem passenden Button.
- Für ein PNG gibst du eine Größe in Pixeln ein und klickst auf Als PNG herunterladen. Der Dateiname enthält die Größe, etwa
vector-512x512.png.
Was beim PNG-Export schiefgehen kann
- Ohne das Attribut
xmlns="http://www.w3.org/2000/svg"lädt der Browser das Bild meist nicht. Dann startet kein Download, und es erscheint keine Fehlermeldung. Die Vorschau zeigt die Grafik trotzdem. - Externe Bilder, Schriften und Stylesheets, auf die das SVG verweist, werden nicht geladen.
- Sehr große Werte scheitern je nach Canvas-Grenze des Browsers.
- Ein leeres oder ungültiges Größenfeld ergibt 512.
Wo sich eine Data-URI lohnt
Ein kleines Icon im Stylesheet kommt zusammen mit dem CSS an. Auch in HTML-Mails kann sie helfen, wenn ein Client verlinkte Bilder blockiert, doch die Unterstützung ist je nach Client verschieden. Die Vorschau ist ein Bild-Element mit Data-URI und ergänzt xmlns nur für die Anzeige. PNG-Export und kopierte Data-URI ergänzen es nicht. Skripte und Ereignis-Handler im eingefügten Code laufen in der Vorschau nicht.