Wann sollte ich SVG oder SVGZ für meine Webgrafiken verwenden?

Meinem Verständnis nach,

Die SVGZ ist ein komprimierter Dateityp einer SVG. Ich liebe die Verwendung von SVG-Bildern und habe viel Erfahrung damit.

Die ganze Zeit, in der ich sie benutzte, hatte ich noch nie eine Grafik, die über ein paar hundert Kilobyte ging.

Ich verwende SVG für ansprechende Grafiken, während ich ansprechende Websites erstelle. Ich benutze sie auch, da mein Lieblingsdesignstil vektorbasierte Grafiken sind. Meine größte Stärke im Design ist der Illustrator, besonders wenn es um Grafikdesign geht.

Der andere Grund, warum ich eine SVG-Grafik verwenden würde, ist die einfache Animation bestimmter Elemente der Grafik, wie Arme, Beine usw.

Besonders Hintergrundelemente, wie eine Stadt, die sich über die gesamte Seite erstreckt, während ich ein Flackern von Lichtern und so weiter anrege.

Wenn die Datei komprimiert ist, verliert sie dann den SVG-Code, sodass ich sie nicht animieren kann?

Gibt es einen Grund, warum ich eine SVGZ anstelle einer SVG verwenden sollte?

Aktualisieren

Nun, ich habe mich dazu entschlossen, nur eine SVG und eine SVGZ zu erstellen, um zu sehen, wie sie mit dem Web umgehen, da ich herausgefunden habe, dass meine Werke aus dem alten CS3 SVGZ retten können!

Nach dem Testen trat ein sehr unerwartetes Problem mit dem SVGZ-Dateityp auf. (Getestet unter Chrome, Firefox und IE) Wenn Sie zur direkten URL des Bildes wechseln, wird eine Fehlermeldung angezeigt. Ich gehe davon aus, dass Sie bei diesen Dateitypen nicht auf den SVG-Code zugreifen können, aber nach dem Erstellen einer Geige scheint das Bild nicht einmal angezeigt zu werden.

Sind diese für das Web nutzlos?

.svg

.svgz

JSFIDDLE

— Josh Powell
quelle

Es scheint, dass es sich zum Teil um ein Problem .svgzmit der Webserverkonfiguration handelt , das mit dem richtigen MIME-Typ behoben werden kann (siehe stackoverflow.com/questions/16725380/svgz-doesnt-display) . Persönlich benutze ich immer Raphael.js für SVG / Vektorgrafiken im Web, weil ich IE8-Unterstützung brauche

— user56reinstatemonica8

Hmm, vielen Dank für die sehr nützlichen Links. Gibt es einen Grund, eine zu verwenden SVGZ? Ich dachte, es wäre vielleicht schön, die Größe einer Bilddatei zu reduzieren. Ich bin nur neugierig, ob ein SVGZin irgendeiner Weise nützlich für das Web oder wirklich nützlich in irgendeiner Weise ist.

— Josh Powell

Wenn es funktioniert, wird es die Dateigröße ziemlich reduzieren. Dies kann nützlich sein, wenn Sie Interaktivität für etwas Komplexes verwenden, z. B. eine sehr detaillierte SVG-Weltkarte, die zoombar ist. Das zbedeutet gzip-Komprimierung, die verwendet wird, um die Dateigröße und so ziemlich nichts anderes zu reduzieren.

— user56reinstatemonica8

@ JoshPowell: Angesichts der Tatsache, dass die meisten HTTP-Server Inhalte mit gzip-Komprimierung senden, sehe ich den Zweck dieser Frage nicht. Und bei einigen Servern erhält der Browser die Information, dass die Originaldatei nicht komprimiert wurde, wenn Sie Ihre Datei .svg.gz nennen.

— user2284570

Antworten:

Die Unterstützung für komprimiertes SVG variiert je nach Browser. Sie müssen jedoch den Server so konfigurieren, dass die SVGZ-Datei ordnungsgemäß mit Informationen zur Kodierung gekennzeichnet wird, damit der Browser beim Empfang ausdrücklich weiß, wie sie zu dekodieren ist.

Die Serverantwort für svgz muss so konfiguriert sein, dass sie "Content-Encoding: gzip" enthält.

svg     Content-Type: image/svg+xml

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

Für einen Apache-Webserver kann dies über eine .htaccess-Datei erreicht werden:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Beachten Sie, dass die Inhaltskodierung angegeben werden sollte, unabhängig davon, ob Sie sie im Handumdrehen komprimieren oder einbrennen, bevor Sie sie auf den Server stellen. Für Assets wie dieses ist es meiner Meinung nach besser, sie vorzukomprimieren. Andernfalls verbrauchen Sie für jede Anforderung der Datei Server-CPU. Dies mag nicht viel erscheinen, aber dies ist eine Art Unoptimierungsproblem, das z. B. die US-Gesundheitswebsite zum Erliegen bringt.

— Horatio
quelle

Wenn Ihr Server oder Ihre Plattform überhaupt intelligent ist, wird die Komprimierung dort in hohem Maße optimiert, da sie zwischengespeichert werden kann. Dies ist mit Sicherheit nicht die Art von Dingen, die Ihre Website zum Absturz bringen, geschweige denn healthcare.gov.

— Josh Koenig

Dies ist möglicherweise nicht die erwartete Antwort, aber für das Web ist es nicht wirklich erforderlich, SVGZ-Dateien zu verwenden. Der Grund dafür ist, dass eine SVGZ-Datei einfach eine SVG-Datei ist, die vor dem Gzip-Vorgang erstellt wurde.

Moderne Webserver können dieses Gzippen selbst durchführen, bevor sie das Asset bereitstellen ( weitere Informationen finden Sie in dieser Antwort auf StackOverflow). Wenn Sie also eine 300-KB-SVG-Datei mit 50 KB in komprimierter Form haben, entspricht dies in etwa der vom Webserver automatisch gezippten Datei. Es sind also nicht 300 KB auf der ganzen Linie, sondern 50 KB, die dann vom Browser dekomprimiert werden.

— Taylor Jasko
quelle

Sind Sie sicher, dass die komprimierte Datei irgendwo zwischengespeichert ist? Es ist eine Menge Arbeit, diese SVG-Assets für 5000 Besucher immer wieder zu gzipen.

— Bokan

@bokan: Einige Server bieten die Möglichkeit, den Inhalt vorzukomprimieren, indem eine .gz-Dateierweiterung angehängt wird. Wenn ein Client nach index.html sucht, antwortet der Server mit der vorkomprimierten Datei index.html.gz.

— user2284570

@ user2284570: Du musst also die .gz von Hand erstellen. Andernfalls werden die Dateien jedes Mal komprimiert, wenn sie gesendet werden, und das ist eine Menge Arbeit für den Server.

— Bokan

@bokan: Ja, und es erfordert oft viel zusätzliche Serverkonfiguration als die einfache Inhaltskodierungskomprimierung. Sogar IE5 unterstützt es. Das Erstellen eines Skripts zum Komprimieren aller statischen Dateien in einem Verzeichnis ist weiterhin einfach. Im zweiten Fall sparen Sie Speicherplatz und Bandbreite.

— user2284570