SVGZ oder SVG: Datei für Bearbeitung und Weitergabe

SVGZ ist eine mit gzip komprimierte SVG-Datei. Beim Dekomprimieren erhältst du das SVG-Dokument zurück, einschließlich Pfaden, Farben, Text und eingebetteten Bildern. Die SVG-Medientypregistrierung des W3C definiert .svgz als Alias für .svg.gz.

Wähle zwischen SVGZ und SVG anhand des empfangenden Workflows. Behalte ein gewöhnliches .svg, wenn jemand lesbares Markup benötigt oder eine Anwendung dieses Format erwartet. Verwende .svgz, wenn der Empfänger es unterstützt und du einen Grund zur Lieferung einer komprimierten Datei hast. Prüfe bei einer Webseite die HTTP-Kompression, bevor du Dateinamen änderst: Eine URL mit der Endung .svg kann bereits komprimierten Inhalt senden.

Das folgende Beispiel komprimiert ein eigenes Abzeichen mit 332 Bytes auf 243 Bytes und stellt dann die exakten Originalbytes wieder her. Das ist ein Ergebnis für eine Datei, kein Versprechen für deine Grafik oder die Seitengeschwindigkeit.

Was ändert sich, wenn SVG zu SVGZ wird?

MDNs Leitfaden zu SVG-Dateitypen unterscheidet gewöhnliches Text-SVG von gzip-komprimiertem SVG und erklärt die nötige Serverkonfiguration für SVGZ. Wenn dir das zugrunde liegende Dokument unbekannt ist, beginne mit was eine SVG-Datei enthält.

Eine komprimierte Kopie ist eine nützliche Verpackung. Behalte dein bearbeitbares Original separat, damit du Objekte prüfen, Korrekturen vornehmen und das vom nächsten Werkzeug benötigte Format exportieren kannst.

Teste Komprimierung und Dekomprimierung eines kleinen Abzeichens

Diese eigene Illustration enthält ein blaugrünes Sechseck, eine korallenfarbene Sonne und einen hellen Berg. Speichere Folgendes als badge.svg in einem Arbeitsordner:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

Führe auf einem System mit gzip, cmp und wc diese Befehle in diesem Ordner aus. Verwende neue Ausgabedateinamen, wenn die Dateien bereits Arbeit enthalten, die du behalten musst.

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

Der erste Befehl schreibt eine komprimierte Kopie und behält die Quelle. Die Option -n lässt ursprünglichen Dateinamen und Zeitstempel im gzip-Header weg. Der zweite Befehl dekodiert die komprimierte Kopie in eine weitere Datei. cmp prüft die Bytes und wc -c meldet deren Anzahl.

Wir führten diese Folge mit Apple gzip 457.140.3 aus. Alle Befehle endeten erfolgreich, und cmp fand keinen Unterschied zwischen ursprünglichem und dekodiertem SVG.

Die komprimierte Datei sparte 89 Bytes, etwa 26,8 % der Quellgröße. Andere Leerzeichen, Zeilenenden, Metadaten, Grafiken oder Kompressionseinstellungen können das Ergebnis verändern. Der Bytevergleich belegt, dass dieser Kompressions- und Dekompressionstest die Quelle bewahrte. Er misst weder Browserübertragungszeit noch Renderingleistung oder Kompatibilität mit einer Bearbeitungsanwendung.

Wenn du ein SVGZ nur in einem Editor öffnen musst, der SVG erwartet, ist die Dekomprimierung die relevante Operation. Das Umbenennen von badge.svgz zu badge.svg lässt die komprimierten Bytes unverändert. Ebenso führt das Umbenennen eines SVGs zu SVGZ kein gzip aus.

Trenne Kompression und Grafikbereinigung

Angenommen, ein nachgezeichnetes Logo hat einen rauen Umriss und Hunderte unnötige Punkte. Gzip kann seine gespeicherte Größe reduzieren, aber die Dekodierung liefert dieselben Punkte zurück. Nutze den Leitfaden zur SVG-Knotenbereinigung, wenn das Bearbeitungsproblem geometrische Komplexität ist. Vergleiche während der Vereinfachung die Silhouette, weil das Entfernen von Punkten die Grafik verändern kann.

Markup-Optimierung ist eine weitere Operation. Das Entfernen von Metadaten, Umschreiben von Zahlen oder Zusammenführen kompatibler Formen verändert das Quelldokument vor der Kompression. Ein byteidentischer gzip-Kompressions- und Dekompressionstest tut nichts davon. Wenn ein Optimierungswerkzeug auch das SVG bearbeitet, prüfe seine Ausgabe unabhängig, statt jede Änderung der Kompression zuzuschreiben. Der Leitfaden zu SVGO-Konfiguration und ID-Erhalt demonstriert diese Prüfung an einem eigenen Abzeichen, dessen externer CSS-Anknüpfungspunkt mit dem Standardpreset verschwindet.

Ein SVG kann außerdem ein Rasterbild enthalten. Das Komprimieren dieses Dokuments erhält das eingebettete Bild; es erzeugt keine bearbeitbaren Umrisse um dessen Objekte. Die Diagnose eingebetteter Rasterbilder hilft, einen Bildcontainer von Grafik aus Vektorpfaden zu unterscheiden.

Diese Unterschiede erleichtern die Wahl des nächsten Schritts: Dekomprimiere zum Wiederherstellen des Markups, bearbeite zum Ändern der Geometrie und zeichne nur nach, wenn geeignete Rastergrafik neue Vektorformen benötigt.

Eine Webseite kann gewöhnliche SVG-Antworten komprimieren

HTTP-Kompression ist unabhängig vom Dateinamen in einer URL. Ein Server kann eine Anfrage für badge.svg empfangen und eine komprimierte Darstellung dieses SVGs senden. MDNs Leitfaden zur HTTP-Kompression beschreibt die Aushandlung: Die Anfrage nennt unterstützte Kodierungen, und die Antwort identifiziert die verwendete Kodierung. Wenn die Darstellung je nach Accept-Encoding variiert, verwendet die Antwort Vary: Accept-Encoding, damit Caches diese Versionen unterscheiden können.

Für eine gzip-kodierte SVG-Antwort sind diese Header relevant:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type identifiziert das dekodierte Medium. Content-Encoding sagt dem Empfänger, wie er den Antwortkörper dekodiert. MDNs Referenz zu Content-Encoding erklärt diesen Unterschied. Diese Header müssen die tatsächlich gesendeten Bytes beschreiben; Content-Encoding: gzip zu einem unkomprimierten SVG hinzuzufügen komprimiert es nicht.

Für ein gespeichertes .svgz, das als SVG-Bild bereitgestellt wird, verlangt MDNs SVGZ-Serveranleitung den SVG-Medientyp und gzip-Inhaltskodierung. Prüfe die endgültige Antwort im Netzwerkbereich des Browsers, einschließlich CDN-Verhalten. Eine erfolgreich geöffnete lokale Datei prüft diese Antwort nicht.

Prüfe vor dem Ersetzen eines vorhandenen SVGs durch SVGZ, ob die gewöhnliche SVG-Antwort bereits komprimiert ist. Vergleiche die tatsächlichen Antworten unter denselben Bedingungen, einschließlich Cachestatus, statt eine lokale SVG-Dateigröße mit einer Netzwerkübertragungsgröße zu vergleichen. Unser Abzeichentest oben führt diesen Webvergleich nicht durch.

Sende eine Datei, die die nächste Anwendung nutzen kann

Frage bei einer bearbeitbaren Übergabe, welches Format der Empfänger importiert. Wenn die Anwendung SVG akzeptiert, aber SVGZ ablehnt, liefere das dekomprimierte SVG und teste diese Kopie. Dekomprimierung kann keine Unterstützung für SVG-Funktionen hinzufügen, die die Anwendung selbst nicht versteht.

Öffne die akzeptierte Datei in der vorgesehenen Anwendung und prüfe ihre Objekte. Prüfe Schrift, Beschneidung, eingebettete Bilder, Farben und die kleinsten wichtigen Details. Halte diese Prüfung von der Dateidekodierung getrennt: Identische Quellbytes können von Anwendungen mit unterschiedlicher Funktionsunterstützung trotzdem unterschiedlich interpretiert werden.

Wenn eine Datei leer erscheint, kläre zuerst, ob sie in lesbares SVG dekodiert wurde. Untersuche dann Dokument und Anzeigekontext mit dem Leitfaden zur Fehlersuche bei leeren SVGs. Wiederholte Kompression repariert keine unsichtbaren gezeichneten Elemente, fehlenden Inhalte oder eine ungeeignete Zeichenfläche.

Behalte Original, Ausgabekopie und eine kurze Notiz zum empfangenden Werkzeug. Das ist nützlicher, als die kleinste lokale Datei zu wählen, bevor ihr Ziel feststeht.

Wenn die Quelle noch Vektorpfade benötigt

Wenn das Vektororiginal fehlt und nur ein flaches PNG- oder JPG-Logo verbleibt, kann PerfectVectors Bild-zu-Vektor-Workflow einen bearbeitbaren SVG-Kandidaten vorbereiten. Vergleiche die Vorschau mit dem Original, prüfe Löcher und getrennte Bereiche und öffne die heruntergeladene Datei im vorgesehenen Editor. Wähle die Kompression erst nach der Grafikabnahme.

PerfectVector wird zum Entpacken eines vorhandenen SVGZ nicht benötigt. Verwende dafür Dekomprimierung. Behalte Fotos oder gemalte Effekte als Raster, wenn das die gewünschte Darstellung erhält, und verwende vorhandene Vektororiginale. Die Format- und Bearbeitungsleitfäden des Blogs behandeln diese Quellentscheidungen vor dem Verpacken.

FAQ

Hat SVGZ eine höhere Qualität als SVG? Nein. Gzip-Kompression verändert die gespeicherte Darstellung. Korrekte Dekomprimierung stellt die SVG-Quelle wieder her; sie verbessert weder Pfade noch Farben oder eingebettete Bilder.

Wie verwandle ich ein SVGZ in SVG? Dekomprimiere es mit einem Werkzeug, das gzip verarbeitet, und speichere dann das dekodierte SVG. Zum Beispiel schreibt gzip -dc badge.svgz > roundtrip.svg eine dekodierte Kopie. Das alleinige Umbenennen der Endung führt diese Operation nicht aus.

Macht SVGZ eine Webseite immer schneller? Aus der Endung folgt kein fester Geschwindigkeitsvorteil. Eine gewöhnliche SVG-Antwort kann bereits HTTP-Kompression verwenden. Prüfe tatsächliche Antwortheader, übertragene Bytes, Cachebedingungen und das Seitenverhalten.

Reduziert SVG-Kompression die Knotenanzahl? Nein. Beim Dekodieren einer gzip-Datei wird die unveränderte Quelle wiederhergestellt. Pfadvereinfachung oder andere SVG-Optimierung ist eine separate Operation, die eine eigene Grafikprüfung benötigt.

Quellen

1. W3C — SVG-Medientypregistrierung — Definiert SVGZ als gzip-komprimiertes SVG und dessen Beziehung zu SVG.GZ.
2. MDN — Erste Schritte mit SVG — Unterscheidet Dateiformen und dokumentiert SVGZ-Antwortheader.
3. MDN — Content-Encoding — Erklärt Dekodierung und die Beziehung zwischen Kodierung und Medientyp.
4. MDN — Kompression in HTTP — Behandelt die Aushandlung von Antwortkompression und Cachevariation.

Passe die Ausgabedatei an das empfangende Werkzeug an und prüfe dann die dekodierte Grafik. Wenn dein Ausgangspunkt ein Rasterlogo ist, das bearbeitbare Formen benötigt, bereite einen SVG-Kandidaten vor und prüfe seine Pfade, bevor du über die Kompression entscheidest.