Kann ich die Dateigröße einer SVG-Datei so reduzieren, dass sie näher an ihrem JPEG-Äquivalent liegt?

Wie Wrzlprmft bereits betont hat, werden ü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 erzeugen. Es reicht aus, dieses Bild einfach zu entfernen und durch einen einfachen radialen Farbverlauf zu ersetzen, um das SVG auf etwa 10 KB zu verkleinern.

               
^{Originalbild mit ausgefallener Bitmap-Schattierung links, bearbeitete Version mit einfachem radialem Farbverlauf rechts.}

Wenn Sie schon dabei sind, sollten Sie auch Ihre Pfade überprüfen, um zu sehen, ob es dort etwas zu vereinfachen gibt. Ich habe nicht viel gefunden, aber der Umriss Ihres Controllers hat einige benachbarte Knoten (in der Nähe der oberen und unteren Mitte), die zusammengeführt werden können, ohne einen sichtbaren Unterschied zu machen.

Das ist eine einfache Ersparnis von 50 %, aber lassen Sie uns noch nicht aufhören. Wenn Sie sich auch nur ein wenig mit dem SVG-Format auskennen , können Sie viel besser machen.

Führen Sie zuerst „Vacuum Defs“ in Inkscape aus, um nutzlose Definitionen zu entfernen, und speichern Sie das Bild dann als „einfaches SVG“. Jetzt ist es an der Zeit, es in einem Texteditor zu öffnen und zu sehen, was wir loswerden können. Idealerweise verwenden Sie einen Editor mit integrierter SVG-Vorschau, damit Sie schnell sehen können, welche Auswirkung (hoffentlich keine) Ihre Bearbeitungen auf das Erscheinungsbild des Bildes haben. Ich verwende dafür emacs , aber es gibt andere Editoren mit ähnlichen Funktionen .

Beginnen wir mit der Vereinfachung der SVG-Datei, die in Ihrem Texteditor geöffnet ist!

• Ganz oben gibt es ein großes nutzloses <!-- comment -->. Löschen Sie es einfach.

• Wenn Sie ein SVG direkt aus Illustrator bearbeiten, gibt es auch eine nutzlose <!DOCTYPE ... >Zeile. Löschen Sie es auch.

• Inkscape besteht darauf, einen nutzlosen RDF-Metadatenblock in Ihr Bild zu kleben. Suchen Sie einfach das <metadata ...>Tag und löschen Sie es zusammen mit allem bis einschließlich dem schließenden </metadata>.

• Auch wenn Sie die Datei als "einfaches SVG" speichern, übersät Inkscape sie immer noch mit einer Reihe von benutzerdefinierten Attributen. Suchen Sie alle Attribute, die mit inkscape:oder beginnen, sodipodi:und löschen Sie sie.

• Wenn die Metadaten und die Inkscape-spezifischen Attribute weg sind, können Sie alle ungenutzten XML-Namespace-Attribute aus dem <svg>Tag entfernen. Es sollte sicher sein, mindestens xmlns:rdf, xmlns:dc, xmlns:ccund xmlns:inkscapezu entfernen xmlns:sodipodi. Wenn es ein redundantes xmlns:svgAttribut gibt, entfernen Sie es ebenfalls. Die einzigen Namespace-Attribute, die Sie an dieser Stelle übrig haben sollten, sind:

  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  

• Das <svg>Tag hat auch eine Reihe anderer nutzloser Attribute, die Sie sicher entfernen können, wie z. B. enable-backgroundund xml:space="preserve". (Diese werden vom SVG-Exporter von Illustrator eingefügt, und Inkscape ist nicht schlau genug, um zu erkennen, dass sie nutzlos sind.) Das viewBoxAttribut kann auch sicher aus diesem Bild entfernt werden, da es nur die Werte der Attribute x, y, widthund wiederholt.height

• Sie können die Attribute encodingund auch sicher aus dem Tag entfernen.standalone<?xml ... ?>

• Kommen wir nun zum Kern der Bilddaten. Aus irgendeinem Grund besteht Inkscape darauf id, jedem Element Attribute zuzuweisen, selbst wenn sie nie referenziert werden. Jedes idAttribut, dessen Wert an keiner anderen Stelle in der Datei wiederholt wird (suchen Sie danach!), können Sie sicher entfernen. Im Grunde müssen Sie nur die IDs für die Steigungen und möglicherweise für alle anderen Objekte (z. B. Pfade) innerhalb von <defs>Abschnitten aufbewahren.

• Außerdem generiert Inkscape gerne lange IDs wie linearGradient4277. Erwägen Sie, alle IDs, die Sie nicht einfach löschen können, in etwas Kürzeres wie abzukürzen lg1.

• Es gibt auch mehrere <defs>Abschnitte direkt hintereinander. Das Zusammenführen spart einige Bytes (und vereinfacht die Dokumentstruktur im Allgemeinen).

• Es gibt auch mehrere leere Gruppen ( <g>Elemente) am Ende der Datei. Werde sie einfach los. Es kann auch mehrere aufeinanderfolgende Gruppen mit genau demselben transformAttribut (oder gar keinem) geben; Es ist auch sicher, diese zusammenzuführen.

• Aus irgendeinem seltsamen Grund speichert Inkscape einen redundanten Bezier-Pfad ( dAttribut) für <circle>Elemente. Das nimmt ohne Grund Platz ein, also löschen Sie diese einfach. (Lassen Sie die dAttribute von <path>Elementen stehen; diese werden tatsächlich für etwas verwendet.)

• Inkscape verwendet CSS auch gerne in styleAttributen, bei denen spezifischere Attribute kürzer wären, z. B. das Umschreiben fill="#4888fa"in das ausführlichere style="fill:#4888fa". Sie können ein paar Bytes sparen, indem Sie diese Stile in einzelne Attribute aufteilen (und diejenigen entfernen, die die Standardeinstellung nur nutzlos wiederholen), aber das erfordert etwas mehr Vertrautheit mit dem SVG-Format 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, auf das sie verlinken. (Das spart natürlich nur Platz, wenn die verknüpften Elemente nur einmal verwendet werden.) Es scheint auch, dass Inkscape Kreisverläufe gerne indirekt definiert, indem es zuerst die Stopps in einem definiert <linearGradient>und sie dann in einem referenziert <radialGradient>; Sie können dies vereinfachen, indem Sie die Stopps direkt in den radialen Farbverlauf verschieben und den jetzt nicht verwendeten linearen Farbverlauf entfernen. Als Bonus, wenn Sie es dadurch geschafft haben, alle Attribute loszuwerden , können Sie das Attribut aus dem Tag xlink:hreflöschen .xmlns:xlink<svg>

• Wenn Sie wirklich jedes letzte zusätzliche Byte herausquetschen 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 weit 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 stark sie gerundet werden kann, können Sie zumindest niedrig hängende Früchte auswählen, wie beispielsweise einen 1.0000859Pixelwert auf nur runden 1.

• Bereinigen Sie abschließend die Einrückungen und Leerzeichen in der Datei. Um die Anzahl der Bytes absolut zu minimieren, müssten Sie alles in eine Zeile schreiben (oder zumindest nur Zeilenumbrüche vor Attribute setzen, wo ohnehin Leerzeichen erforderlich sind), aber das ist wirklich schwer zu lesen. Dennoch ist es möglich, mit einigen einfachen, konservativen Einrückungen ein anständiges Gleichgewicht zwischen Lesbarkeit und Kompaktheit zu finden.

Wie auch immer, hier ist, was ich geschafft habe, Ihr SVG-Bild von Hand zu bearbeiten:

<?xml version="1.0"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  x="0" y="0" width="124" height="52">
<g transform="translate(1,-27.5)">
  <linearGradient id="lg1"
    x1="70.1063" y1="13.4122"
    x2="66.1994" y2="-26.4368"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#154BBF" />
    <stop offset="1" stop-color="#6E8BFF" />
  </linearGradient>
  <path d="M 119.198,75.836 C 115.115,80.541 7.902,78.843 3.585,74.366 -0.734,69.888 -1.322,46.938 2.76,42.233 6.842,37.53 113.821,30.047 118.137,34.524 c 4.319,4.477 5.143,36.609 1.061,41.312 z" id="path3298" fill="url(#lg1)" />
  <linearGradient id="lg2"
    x1="70.4391" y1="13.5887"
    x2="70.4391" y2="-25.3265"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#4166FA" />
    <stop offset="1" stop-color="#87A4FF" />
  </linearGradient>
  <path d="M 119.2,71.843 C 115.247,76.118 11.615,74.749 7.447,70.692 3.281,66.635 2.747,45.804 6.7,41.528 c 3.953,-4.277 107.372,-11.239 111.539,-7.183 4.167,4.057 4.915,33.222 0.961,37.498 z" id="path3305" fill="url(#lg2)" />
  <path stroke="#fff" stroke-width="5" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#4888fa" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#87b5ff" d="m 114.774,40.292 c -1.17,-2.151 -7.571,-4.939 -14.293,-6.921 V 33.37 c -0.023,-0.007 -0.047,-0.014 -0.07,-0.021 -0.023,-0.007 -0.047,-0.015 -0.071,-0.02 l 0,0 c -6.723,-1.985 -13.612,-3.12 -15.761,-1.949 -4.296,2.337 -9.198,17.315 -6.265,21.228 0.907,1.209 3.014,2.449 4.466,2.043 1.452,-0.404 2.121,-3.4 2.652,-3.174 2.518,1.077 5.601,2.117 8.744,3 3.119,0.966 6.272,1.765 8.972,2.229 0.569,0.097 -0.498,2.975 0.502,4.104 1.001,1.128 3.443,1.232 4.861,0.709 4.586,-1.693 8.602,-16.933 6.263,-21.227 z" />
  <path fill="#2f67c9" d="m 90.818,42.604 c -0.097,-0.194 -0.901,-0.575 -1.999,-1.006 0.317,-1.135 0.497,-2.007 0.401,-2.2 -0.319,-0.641 -3.681,-1.766 -4.323,-1.447 -0.192,0.096 -0.574,0.9 -1.004,1.998 -1.135,-0.315 -2.006,-0.497 -2.201,-0.401 -0.64,0.319 -1.766,3.681 -1.446,4.322 0.096,0.193 0.901,0.575 1.997,1.006 -0.316,1.134 -0.496,2.007 -0.4,2.199 0.32,0.64 3.682,1.767 4.323,1.447 0.193,-0.095 0.575,-0.901 1.005,-1.997 1.135,0.314 2.008,0.496 2.199,0.401 0.642,-0.32 1.767,-3.682 1.448,-4.322 z" />
  <path fill="#4888fa" d="m 100.282,33.311 c -0.024,-0.007 -0.046,-0.013 -0.069,-0.02 -0.023,-0.006 -0.046,-0.013 -0.07,-0.02 l 0,0 c -2.455,-0.725 -4.932,-1.334 -7.181,-1.755 -0.765,2.073 -1.164,4.497 -0.789,5.91 0.627,2.363 9.764,5.059 11.574,3.414 1.096,-0.996 2.091,-3.297 2.566,-5.483 -1.876,-0.731 -3.937,-1.428 -6.031,-2.046 l 0,0 z" />
  <circle fill="#639bff" r="3.427" cy="46.947" cx="101.382" />
  <circle fill="#4888fa" r="2.868" cy="45.940" cx="109.28" />
  <circle fill="#2f67c9" r="2.868" cy="52.538" cx="106.287" />
  <radialGradient id="rg3"
    cx="90.874" cy="39.29"
    fx="90.874" fy="39.29"
    r="19.89"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(1.7028,-0.3387,0.276,1.3872,-70.22,16.58)">
    <stop stop-color="#1166a8" stop-opacity="0" offset="0" />
    <stop stop-color="#1166a8" stop-opacity="0.02" offset="0.45" />
    <stop stop-color="#1166a8" stop-opacity="0.63" offset="1" />
  </radialGradient>
  <path d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -5.973,-1.508 -0.375,-0.11 -0.75,-0.223 -1.124,-0.338 -0.378,-0.107 -0.753,-0.216 -1.128,-0.326 -2.107,-0.622 -4.095,-1.295 -5.835,-1.976 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.245,1.591 l 0.274,0.081 c 3.795,1.123 12.724,4.078 14.543,7.495 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" fill="url(#rg3)" />
</g></svg>

Dieses SVG-Bild sieht so gut wie nicht vom zweiten Beispielbild oben zu unterscheiden und nimmt nur 5189 Bytes ein, erheblich weniger als Ihr JPEG-Bild. Ich bin mir sicher, dass es noch weiter optimiert werden könnte, aber das ist wirklich nur ein Beispiel dafür, was Sie mit Übung in ein paar Minuten tun können. (Ich habe viel länger gebraucht, um diese Antwort einzugeben, als den SVG-Code tatsächlich zu bearbeiten.)

Wenn Sie diesen SVG-Code schließlich mit gzip komprimieren, wird er auf nur 1846 Bytes (!) Verkleinert, nur knapp über ein Viertel der Größe Ihrer JPEG-Version.

Ihr SVG enthält eine eingebettete Pixelgrafik für die Schattierung unten rechts im Controller. Dieser ist für etwa ⅔ der Dateigröße verantwortlich. Wenn Sie es entfernen, entspricht Ihre SVG-Datei Ihrem JPEG. Mit einem Farbverlauf können Sie wahrscheinlich einen ausreichend ähnlichen Effekt erzielen.

Andere Techniken zum Reduzieren der SVG-Dateigröße sind:

• Entfernen Sie alle Metadaten und ähnliches. Inkscape hat dafür Als einfaches SVG speichern . Ich nehme an, dass andere Programme etwas Ähnliches haben.
• Entfernen Sie Knoten, die den Formen wenig hinzufügen, z. B. gibt es störende Knoten auf der Form Ihres Controllers.

Das lässt mich denken, dass vielleicht die Ebenen im Original die große Größe verursachen?

Sofern 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.

Ist das Bild, mit dem ich arbeite, einfach zu komplex, um für SVG geeignet zu sein?

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öße explodiert (wahrscheinlich gilt dies für jedes halbwegs vernünftige Format). Wenn Sie die Auflösung nur ausreichend grob wählen, können Sie natürlich jedes SVG in ein JPEG exportieren, das eine kleinere Dateigröße hat. Das bedeutet aber nicht zwangsläufig, dass Sie keine SVGs verwenden sollten.

^{¹ Das heißt insbesondere ohne Rückverfolgung und dergleichen. Um ein extremes Beispiel zu nennen: Wenn Sie jeden Pixel eines Fotos mit SVG-Primitiven exakt reproduzieren möchten (dh ohne eine Pixelgrafik in SVG einzubetten), könnten Sie das Ergebnis tatsächlich als zu komplex betrachten, um es effizient im SVG-Format darzustellen . Aber das ist hoffentlich gesunder Menschenverstand.}

Ich bin etwas überrascht, dass niemand die Erweiterung „ Scour “ erwähnt hat. Es ist mit Inkscape (ab v0.47) gebündelt und führt viele der von Ilmari Karonen erwähnten Optimierungen durch.

Sie können es in ein komprimiertes SVG (SVGZ) konvertieren und die image.svgz auf Ihrer Webseite platzieren:

gzip image.svg
mv image.svg.gz image.svgz

Oder speichern Sie in Adobe Illustrator einfach als "SVG-komprimiert", wodurch eine image.svgz-Datei geschrieben wird.

Für Ihr Testbild ist es jedoch immer noch größer als das JPG:

image.jpg:   7268 bytes
image.svg:  22385 bytes
image.svgz: 14614 bytes

SVGOMG! ist eine fantastische Web-App zur SVG-Optimierung

Laut dem Ersteller der App ist SVGOMG die „ fehlende GUI “ von SVGO .

Wenn Sie es auf dem bereitgestellten Bild ausführen, wird es auf nur reduziert 3.42kb, und zwar direkt 1.4kbnach dem gzippen.

Ich habe kürzlich ein Tool unter https://petercollingridge.appspot.com/svg-editor ( Quellcode ) gefunden, das hilft, SVG-Dateien zu optimieren. In diesem Fall hat es gute Ergebnisse, indem es die Dateigröße mit einer kleinen manuellen Anpassung auf 3,7 KB reduziert, was etwas mehr als die Hälfte der Größe des JPG ist:

Die Verwendung dieses Tools zum Optimieren von SVG-Dateien erfordert erheblich weniger Zeit als das manuelle Golfen der Datei.