Kann ich die Dateigröße einer SVG-Datei so verringern, dass sie näher an ihrer JPEG-Entsprechung liegt?

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?

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:

• Entfernen Sie alle Metadaten und ähnliche. Inkscape hat dafür Save as plain SVG . Ich nehme an, dass andere Programme etwas ähnliches haben.
• Entfernen Sie Knoten, die den Formen nur wenig hinzufügen, z. B. befinden sich falsche Knoten in der Form Ihres Controllers.

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

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.

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öß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.}

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 entfernen xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapeund xmlns:sodipodi. Wenn es ein redundantes xmlns:svgAttribut gibt, entfernen Sie es ebenfalls. Die einzigen Namespace-Attribute, die Sie an dieser Stelle noch 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 wird durch den Illustrator SVG exportiert eingefügt, und Inkscape ist nicht intelligent genug , um zu erkennen , sie sind nutzlos.) Das viewBoxAttribut kann auch sicher von diesem Bild entfernt werden, da sie wiederholt nur die Werte der x, y, widthund heightAttribute.

• Sie können die Attribute encodingund auch sicher standaloneaus 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. Jedes idAttribut, 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 Sie lg1stattdessen 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 demselben transformAttribut geben (oder überhaupt keine). Es ist auch sicher, diese zusammenzuführen.

• Aus irgendeinem Grund speichert Inkscape einen redundanten Bezier-Pfad ( dAttribut) für <circle>Elemente. Das nimmt ohne jeden Grund Platz in Anspruch, also löschen Sie diese einfach. (Belassen Sie die dAttribute bei <path>Elementen; 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. beim Umschreiben fill="#4888fa"auf die ausführlicheren style="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 Bonus xlink:hrefkönnen Sie das xmlns:xlinkAttribut 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.0000859Pixeln auf gerade runden 1.

• 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:

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

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.

Sie können es in eine komprimierte SVG-Datei (SVGZ) konvertieren und die Datei 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 erstellt 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

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.

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.42kbund "Nur 1.4kbnach dem Gzippen" reduziert.