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

37

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:

    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?

Evanss
quelle
16
Hat nichts mit Ihrer Frage zu tun, aber Sie sollten JPG nicht für Bilder wie dieses verwenden. Verwenden Sie stattdessen PNG: Die Größe wird wahrscheinlich ähnlich sein und Sie erhalten keinen Qualitätsverlust.
Svick
Beachten Sie, dass der Vergleich von der physischen Größe des Bildes abhängt. Durch Skalieren eines JPEG wird die Größe erheblich erhöht. Das Skalieren einer SVG-Datei hat keine Auswirkung. Es ist vorstellbar, dass ein sehr kleines Symbol kleiner als ein JPEG ist, obwohl ich Ihre Grafik nicht als sehr klein bezeichnen würde.
Paul Draper
Wenn Sie kein Inkscape-Benutzer sind und sich nicht sicher sind, ob Sie eine SVG per Hand spielen können, könnte Ihnen das Online-Tool gefallen, mit dem ich in meiner Antwort verlinkt habe .
Dom
1
Nur um Svicks Kommentar zu ergänzen: Bilder "wie dieses", bei denen PNG besser ist, sind alles mit transparenten Rändern oder alles mit scharfen, durchgezogenen Farb- oder Weißbereichen. Wenn es sich um eine Grafik (z. B. ein Logo, ein Symbol usw.) und nicht um ein Foto handelt, ist PNG in der Regel besser. JPG ist besser für Fotos (oder fotorealistische Bilder).
user56reinstatemonica8

Antworten:

40

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.

Wrzlprmft
quelle
80

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.

        Original         Mit einfachem radialen Gefälle
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.

Ilmari Karonen
quelle
4
Schön golfen .
Wrzlprmft
7
Beseitigen Sie Zeilenumbrüche und Sie würden 50 weitere Bytes sparen :)
Yorik
15
Ich musste mich dieser Seite nur anschließen, um diese großartige Antwort zu unterstützen! Gut gemacht!
Karl-Johan Sjögren
Hey Ilmari, ich frage mich, ob Sie die Web-App, die ich in einer Antwort verlinkt habe, überprüfen und bestätigen können, ob sie alles tut, was Sie von Hand tun würden. Ich habe es auf einer großen SVG-Datei mit erstaunlichen Reduzierungen ausgeführt, aber als ich diese SVG-Datei zuvor über einen anderen Dienst ausgeführt habe, konnte ich zusätzliche 2 KB speichern. Wenn ich den SVG-Code überprüfe, werden immer noch einige Metadaten mit Links zu Adobe angezeigt, und ich habe keine Ahnung, ob dies erforderlich ist. Ihre SVG-Weisheit wird sehr geschätzt.
Dom
30

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.

jemand
quelle
14
+1 Das ist großartig! Ehrlich gesagt war mir nicht einmal bewusst, dass dieses Tool existiert. Mit den richtigen Optionen übertrifft die Befehlszeilenversion meinen handoptimierten Code sogar um fast 200 Byte, und die Ausführung mit dem handoptimierten Code reduziert ihn auf nur 4571 Byte (!).
Ilmari Karonen
5

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
Glenn Randers-Pehrson
quelle
6
Komprimierte SVGs funktionieren in den meisten, wenn nicht allen, aktuellen IEs leider nicht. Die Idee ist hilfreich, aber der IE macht sie viel weniger realisierbar. +1 sowieso, weil es nicht deine Schuld ist IE $ ucks. :)
Dom
5
@ Dom, die Erfahrung mit IE und PNG legt nahe, 3-5 Jahrzehnte nicht Jahre.
Glenn Randers-Pehrson
3
Bashing IE hört nie auf, mich zu amüsieren! :) Es ist ziemlich cool, dass wir jemanden mit Ihrer Erfahrung für die GDSE gewinnen können. Ich hoffe, dass es Ihnen hier gefällt, und wenn es noch niemand gesagt hat, begrüßen wir Sie!
Dom
2
Um Test in IE, können Sie die VMs von verwenden modern.ie/en-us
Scott Carlson
4
Wenn Sie es auf einer Website bereitstellen, bietet dies Clients, die eine HTTP-Komprimierung anfordern (die normalerweise ohnehin gzip verwendet), einen vernachlässigbaren Vorteil.
Bob
3

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.

user60561
quelle
Willkommen bei der Graphic Design SE. Beachten Sie, dass der Fragesteller genau dieses Tool in der Frage erwähnt hat. Dies macht diese Antwort nicht ungültig, aber Sie können sie relativieren. Was meinen Sie mit manueller Einstellung?
Wrzlprmft
Dies ist nicht ganz dasselbe Tool wie in der Frage erwähnt, es wird jedoch vom selben Autor erstellt und befindet sich auf derselben Domain. Der Link des Autors enthält einen Link zu diesem Tool, aber ich habe ihn erst bemerkt, als ich meine Antwort gepostet habe. Ich habe es nicht gelöscht, da es immer noch nützlich ist. Mit manueller Anpassung meine ich, dass ich mehrere Kontrollkästchen deaktiviert habe (Pfade kombinieren, IDs entfernen), um die Ausgabe zu korrigieren, und die Dezimalstellen gesenkt habe, um die Größe weiter zu verbessern.
user60561
Wie bei SVGOMG (aus Doms Antwort) scheinen auch hier die größten Einsparungen durch die Deaktivierung von xlink zu kommen, wodurch das eingebettete Bild als Nebeneffekt vollständig gelöscht wird. Offensichtlich ist das Ersetzen des Bildes durch einen Farbverlauf nicht das, was Sie von einem automatisierten Tool erwarten können.
Ilmari Karonen
3

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.

SVGOMG-Screenshot

Dom
quelle
1
In der gerenderten Vorschau scheinen die meisten Einsparungen auf die Tatsache zurückzuführen zu sein, dass das eingebettete Bild vollständig gelöscht wird. Es ist offensichtlich, dass das Ersetzen der Bitmap durch einen Farbverlauf nicht automatisch von einem Softwaretool erwartet wird.
Ilmari Karonen
1
Ich habe nicht mehr die nicht optimierte Version mit nur dem festgelegten Farbverlauf, aber wenn ich die ursprüngliche SVG -Datei manuell bearbeite, um die Bitmap durch den letzten <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.)
Ilmari Karonen
@IlmariKaronen, danke, dass du es dir angeschaut hast. Wenn du es auf der ursprünglichen 22-KB-SVG-Datei in der Dropbox ausführst, beträgt es für mich 3,42 KB auf der Festplatte. Hast du eine Idee, warum meine kleiner ist? (Ich habe jede Option aktiviert). Diese App ist möglicherweise in den meisten Fällen die beste (einfachste / schnellste) Option. Ich bin nicht mit der App verbunden, sie ist einfach großartig!
Dom
1
Schauen Sie sich den Controller genau an: Wenn Sie beim Optimieren der ursprünglichen SVG-Datei "Rasterbilder entfernen" auswählen, verschwindet die Schattierung des Controllers vollständig (da es sich tatsächlich um eine eingebettete semitransparente PNG-Datei handelt). Sie können es tatsächlich sehen, wenn Sie den Screenshot in Ihrer Antwort mit dem Original-JPEG vergleichen. Die Version mit 4,02 kB ist größer, da sie einen zusätzlichen Pfad und eine Steigung enthält, um die entfernte Verschattung zu ersetzen.
Ilmari Karonen
@IlmariKaronen Ich glaube, ich sehe den Unterschied , es ist so gering, dass ich nicht sicher bin, ob meine Augen Streiche spielen. Es ist ein guter Punkt, ich habe bisher nur mit Volltonfarben in SVGs gearbeitet, daher werde ich dies in Zukunft berücksichtigen, danke.
Dom