Ich habe ein Bild, das ich auf einer Website verwende. Ich würde gerne eine SVG-Datei verwenden, damit sie jede Größe hat und trotzdem knackig aussieht.
- Diese Dropbox enthält die SVG-Datei sowie die ursprüngliche Illustrator-Datei.
Dies ist ein JPEG-Export:
Die SVG-Datei ist viel größer als die JPG-Datei. Ist es möglich, die SVG-Datei so zu optimieren, dass sie eine ähnliche Dateigröße hat? Ich könnte in der Lage sein, etwas von der Qualität zu verlieren, wenn das helfen würde. Ich habe diesen SVG-Optimierer ausprobiert , aber es machte keinen großen Unterschied.
Wenn ich die Illustrator-Datei als JPG speichere, das Ergebnis nachverfolge und als SVG speichere, erhalte ich eine viel kleinere Dateigröße, aber einen gewissen Qualitätsverlust. Das lässt mich denken, dass vielleicht die Ebenen im Original das große Format verursachen? Ist das Bild, mit dem ich arbeite, einfach zu komplex, um für SVG geeignet zu sein?
Antworten:
Ihre SVG enthält eine eingebettete Pixelgrafik für den Schatten unten rechts auf dem Controller. Dies ist für etwa ⅔ der Dateigröße verantwortlich. Wenn Sie es entfernen, ist Ihre SVG-Datei mit Ihrem JPEG-Format identisch. Mit einem Farbverlauf können Sie wahrscheinlich einen ausreichend ähnlichen Effekt erzielen.
Andere Techniken zur Reduzierung der SVG-Dateigröße sind:
Wenn Sie nicht absurd viele Ebenen verwenden (denken Sie an eine Ebene für jedes Objekt), sollten Ebenen keinen relevanten Beitrag zur Dateigröße leisten, und selbst dann wäre es nur ein Bruchteil.
Wenn Sie ein Bild vernünftigerweise von Grund auf neu erstellen können¹, sollte es für das SVG-Format nicht zu komplex sein. Es gibt keine magische Komplexitätsschwelle, ab der die Dateigrößen explodieren (wahrscheinlich gilt dies für ein vage vernünftiges Format). Wenn Sie nur eine ausreichend grobe Auflösung wählen, können Sie natürlich jede SVG-Datei in ein JPEG-Format mit einer geringeren Dateigröße exportieren. Dies bedeutet jedoch nicht unbedingt, dass Sie keine SVGs verwenden sollten.
¹ Das ist insbesondere ohne Rückverfolgung und ähnlich. Um ein extremes Beispiel zu nennen: Wenn Sie jedes Pixel eines Fotos mit SVG-Grundelementen exakt reproduzieren möchten (dh ohne Pixelgrafiken in SVG einzubetten), ist das Ergebnis möglicherweise zu komplex, um effizient im SVG-Format dargestellt zu werden . Aber das ist hoffentlich gesunder Menschenverstand.
quelle
Wie Wrzlprmft bereits ausgeführt hat, wird über 50% der Größe Ihrer SVG-Datei von einem eingebetteten PNG-Bitmap-Bild eingenommen, das verwendet wird, um einen ziemlich subtilen Schattierungseffekt auf dem Controller zu erzielen. Es reicht schon aus, dieses Bild zu entfernen und durch einen einfachen radialen Verlauf zu ersetzen, um die SVG-Datei auf etwa 10 KB zu verkleinern.
Originalbild mit ausgefallener Bitmap-Schattierung links, bearbeitete Version mit einfachem radialen Farbverlauf rechts.
Während Sie gerade dabei sind, sollten Sie auch Ihre Pfade überprüfen, um festzustellen, ob es dort etwas zu vereinfachen gibt. Ich habe nicht viel gefunden, aber der Umriss Ihres Controllers enthält einige benachbarte Knoten (in der Nähe der oberen und unteren Mitte), die zusammengeführt werden können, ohne dass ein Unterschied erkennbar ist.
Das ist eine einfache Einsparung von 50%, aber lassen Sie uns noch nicht aufhören. Wenn Sie auch nur ein wenig über das SVG-Format wissen , können Sie vieles besser machen.
Führen Sie zuerst "Vacuum Defs" in Inkscape aus, um nicht mehr benötigte Definitionen zu entfernen, und speichern Sie das Bild dann als "normales SVG". Jetzt ist es Zeit, es in einem Texteditor zu öffnen und zu sehen, was wir loswerden können. Idealerweise sollten Sie einen Editor mit integrierter SVG-Vorschau verwenden, damit Sie schnell sehen können, welche Auswirkungen (hoffentlich keine) Ihre Änderungen auf das Erscheinungsbild des Bildes haben. Ich benutze dafür Emacs , aber es gibt andere Editoren mit ähnlichen Funktionen .
Wie auch immer, wenn die SVG-Datei in Ihrem Texteditor geöffnet ist, vereinfachen wir sie jetzt!
Ganz oben gibt es eine große nutzlose
<!-- comment -->
. Löschen Sie es einfach.Wenn Sie eine SVG-Datei direkt aus Illustrator heraus bearbeiten, gibt es auch eine unbrauchbare
<!DOCTYPE ... >
Zeile. Löschen Sie es auch.Inkscape besteht darauf, einen unbrauchbaren RDF-Metadatenblock in Ihr Bild einzufügen.
<metadata ...>
Suchen Sie einfach das Tag und löschen Sie es, zusammen mit allem, was bis zum Schließen reicht</metadata>
.Auch wenn Sie die Datei als "normales SVG" speichern, enthält Inkscape immer noch eine Reihe benutzerdefinierter Attribute. Suchen Sie alle Attribute, die mit
inkscape:
oder beginnen,sodipodi:
und löschen Sie sie.Nachdem die Metadaten und die Inkscape-spezifischen Attribute entfernt wurden, können Sie alle nicht verwendeten XML-Namespace-Attribute aus dem
<svg>
Tag entfernen . Es sollte sicher sein , zumindest zu entfernenxmlns:rdf
,xmlns:dc
,xmlns:cc
,xmlns:inkscape
undxmlns:sodipodi
. Wenn es ein redundantesxmlns:svg
Attribut gibt, entfernen Sie es ebenfalls. Die einzigen Namespace-Attribute, die Sie an dieser Stelle noch haben sollten, sind:Das
<svg>
Tag hat auch eine Reihe anderer nutzloser Attribute, die Sie sicher entfernen können, wie z. B.enable-background
undxml:space="preserve"
. (Diese wird durch den Illustrator SVG exportiert eingefügt, und Inkscape ist nicht intelligent genug , um zu erkennen , sie sind nutzlos.) DasviewBox
Attribut kann auch sicher von diesem Bild entfernt werden, da sie wiederholt nur die Werte derx
,y
,width
undheight
Attribute.Sie können die Attribute
encoding
und auch sicherstandalone
aus dem<?xml ... ?>
Tag entfernen .Kommen wir nun zu den Eingeweiden der Bilddaten. Aus irgendeinem Grund besteht Inkscape darauf
id
, jedem Element Attribute zuzuweisen, auch wenn darauf nie verwiesen wird. Jedesid
Attribut, dessen Wert an keiner anderen Stelle in der Datei wiederholt wird (suchen Sie danach!), Kann sicher entfernt werden. Grundsätzlich müssen Sie nur die IDs für die Farbverläufe und möglicherweise für andere Objekte (z. B. Pfade) in<defs>
Abschnitten beibehalten.Auch Inkscape generiert gerne lange IDs wie
linearGradient4277
. Verwenden Sielg1
stattdessen die Abkürzung von IDs, die Sie nicht einfach in etwas Kurzes wie löschen können .Es gibt auch mehrere
<defs>
Abschnitte direkt nacheinander. Durch das Zusammenführen werden einige Bytes gespart (und die Dokumentstruktur im Allgemeinen vereinfacht).Es gibt auch mehrere leere Gruppen (
<g>
Elemente) am Ende der Datei. Werde sie einfach los. Es kann auch mehrere aufeinanderfolgende Gruppen mit genau demselbentransform
Attribut geben (oder überhaupt keine). Es ist auch sicher, diese zusammenzuführen.Aus irgendeinem Grund speichert Inkscape einen redundanten Bezier-Pfad (
d
Attribut) für<circle>
Elemente. Das nimmt ohne jeden Grund Platz in Anspruch, also löschen Sie diese einfach. (Belassen Sie died
Attribute bei<path>
Elementen; diese werden tatsächlich für etwas verwendet.)Inkscape verwendet CSS auch gerne in
style
Attributen, bei denen spezifischere Attribute kürzer wären, z. B. beim Umschreibenfill="#4888fa"
auf die ausführlicherenstyle="fill:#4888fa"
. Sie können einige Bytes einsparen, indem Sie diese Stile in einzelne Attribute aufteilen (und diejenigen entfernen, die die Standardeinstellung nur unnötig wiederholen), die jedoch mit dem SVG-Format etwas vertrauter sind als die meisten der oben genannten Änderungen.Wenn
<use ... >
Elemente vorhanden sind , können Sie möglicherweise einige Bytes sparen, indem Sie sie durch das tatsächliche Element ersetzen, mit dem sie verknüpft sind. (Das spart natürlich nur Platz, wenn die verknüpften Elemente nur einmal verwendet werden.) Inkscape scheint auch gerne Kreisverläufe indirekt zu definieren, indem zuerst die Stopps in a definiert<linearGradient>
werden und diese dann in a referenziert werden<radialGradient>
. Sie können dies vereinfachen, indem Sie die Anschläge direkt innerhalb des radialen Verlaufs verschieben und den jetzt nicht verwendeten linearen Verlauf entfernen. Als Bonusxlink:href
können Sie dasxmlns:xlink
Attribut aus dem<svg>
Tag löschen , wenn Sie es auf diese Weise geschafft haben, alle Attribute zu entfernen.Wenn Sie wirklich jedes letzte zusätzliche Byte herauspressen möchten, suchen Sie nach numerischen Werten mit viel zu vielen Dezimalstellen und runden Sie sie auf etwas Vernünftigeres. Hier hilft die Live-Vorschau wirklich, da Sie sehen können, wie viel Sie den Wert runden können, bevor er sichtbar wird. Auch wenn Sie nicht jede Zahl sorgfältig testen möchten, um zu sehen, wie viel sie gerundet werden kann, können Sie zumindest niedrig hängende Früchte auswählen, z. B. indem Sie einen Wert von
1.0000859
Pixeln auf gerade runden1
.Bereinigen Sie abschließend den Einzug und das Leerzeichen in der Datei. Um die Anzahl der Bytes absolut zu minimieren, müssten Sie alles in eine Zeile setzen (oder zumindest nur Zeilenumbrüche vor Attributen, für die ohnehin Leerzeichen erforderlich sind), aber das ist wirklich schwer zu lesen. Dennoch ist es möglich, mit einer einfachen, konservativen Einrückung ein angemessenes Gleichgewicht zwischen Lesbarkeit und Kompaktheit zu finden.
Jedenfalls habe ich es hier geschafft, dein SVG-Bild von Hand zu bearbeiten:
Dieses SVG-Bild ist im Vergleich zum zweiten Beispielbild kaum zu unterscheiden und belegt nur 5189 Bytes, also erheblich weniger als das JPEG-Bild. Ich bin mir sicher, dass es noch weiter optimiert werden könnte, aber dies ist wirklich nur ein Beispiel dafür, was Sie mit Übung in wenigen Minuten tun können. (Ich habe viel länger gebraucht, um diese Antwort einzutippen, als den SVG-Code tatsächlich zu bearbeiten.)
Wenn Sie diesen SVG-Code mit gzip komprimieren, wird er auf nur 1846 Byte (!) Verkleinert, knapp über ein Viertel der Größe Ihrer JPEG-Version.
quelle
Ich bin ein wenig überrascht, dass niemand die Erweiterung " Scour " erwähnt hat. Es wird mit Inkscape (ab Version 0.47) gebündelt und führt viele der von Ilmari Karonen erwähnten Optimierungen durch.
quelle
Sie können es in eine komprimierte SVG-Datei (SVGZ) konvertieren und die Datei image.svgz auf Ihrer Webseite platzieren:
Oder speichern Sie in Adobe Illustrator einfach als "SVG komprimiert", wodurch eine image.svgz-Datei erstellt wird.
Für Ihr Testbild ist es jedoch immer noch größer als das JPG:
quelle
Kürzlich habe ich unter https://petercollingridge.appspot.com/svg-editor ( Quellcode ) ein Tool gefunden , mit dem Sie SVG-Dateien optimieren können. In diesem Fall führt dies zu guten Ergebnissen, da die Dateigröße mit ein wenig manueller Anpassung auf 3,7 kB gesenkt wird, was etwas mehr als der Hälfte der Größe von JPG entspricht:
Die Verwendung dieses Tools zur Optimierung von SVG-Dateien erfordert erheblich weniger Zeit als das manuelle Golfen der Datei.
quelle
SVGOMG! ist eine großartige Web-App für die SVG-Optimierung
Nach dem Konzept der App, SVGOMG ist SVGO ‚s " M Issing G UI".
Wenn Sie es auf dem bereitgestellten Image ausführen, wird es auf "Nur"
3.42kb
und "Nur1.4kb
nach dem Gzippen" reduziert.quelle
<radialGradient>
und<path>
aus meinem handoptimierten Code zu ersetzen, optimiert SVGOMG das resultierende 5,8-kB-Bild auf 4,02 kB (4,11 kB prettified) und scheint eine ziemlich gründliche Arbeit zu leisten; Ich sehe keine offensichtlichen verpassten Gelegenheiten. ( Das Spiel mit dem es ein bisschen mehr, ich habe bemerkt , dass es manchmal nicht aufeinanderfolgenden Gruppen mit identischen attrs fusionieren; Inkscape manchmal diejenigen zu erzeugen scheint, zum Beispiel , wenn die Seite Einstellung der Zeichnung passen.)