Posso ridurre la dimensione del file di un file SVG per avvicinarlo al suo equivalente JPEG?

Ho un'immagine che sto usando su un sito web. Vorrei usare un SVG in modo che possa essere di qualsiasi dimensione e apparire ancora nitido.

• Questa casella contiene il file SVG e il file Illustrator originale.

• Questa è un'esportazione JPEG:

  

Lo SVG ha una dimensione del file molto più grande rispetto al JPG. È possibile ottimizzare SVG in modo che abbia dimensioni di file simili? Potrei essere in grado di perdere parte della qualità se ciò potesse aiutare. Ho provato questo ottimizzatore SVG , ma non ha fatto molta differenza.

Se si salva il file Illustrator come JPG, si traccia il risultato e lo si salva come SVG, quindi si ottiene una dimensione del file molto più piccola ma una perdita di qualità. Questo mi fa pensare che forse i livelli nell'originale stanno causando le grandi dimensioni? L'immagine con cui sto lavorando è troppo complessa per essere adatta a SVG?

Il tuo SVG contiene una grafica pixel incorporata per l'ombra in basso a destra del controller. Questo è responsabile di circa ⅔ della dimensione del file. Se lo rimuovi, il tuo file SVG è alla pari con il tuo JPEG. Probabilmente puoi ottenere un effetto adeguatamente simile con un gradiente.

Altre tecniche per ridurre le dimensioni del file SVG includono:

• Rimuovi tutti i metadati e simili. Per questo, Inkscape ha Salva come semplice SVG . Suppongo che altri programmi abbiano qualcosa di simile.
• Rimuovi i nodi che aggiungono poco alle forme, ad esempio, ci sono nodi spuri sulla forma del tuo controller.

Questo mi fa pensare che forse i livelli nell'originale stanno causando le grandi dimensioni?

A meno che tu non stia usando assurdamente molti livelli (pensa a un livello per ogni oggetto), i livelli non dovrebbero dare un contributo rilevante alla dimensione del file e anche in questo caso, sarebbe solo una frazione.

L'immagine con cui sto lavorando è troppo complessa per essere adatta a SVG?

Se puoi ragionevolmente creare un'immagine da zero¹, non dovrebbe essere troppo complessa per il formato SVG. Non esiste una soglia di complessità magica oltre la quale esplodano le dimensioni dei file (probabilmente questo vale per qualsiasi formato vagamente ragionevole). Naturalmente, se si sceglie solo la risoluzione sufficientemente grossolana, è possibile esportare ogni SVG in un JPEG con dimensioni file inferiori. Ma ciò non significa necessariamente che non dovresti usare SVG.

^{¹ Ciò è in particolare senza traccia e simili. Per fare un esempio estremo: se si desidera riprodurre esattamente ogni pixel di una fotografia con primitive SVG (ovvero, senza incorporare una grafica pixel in SVG), si potrebbe effettivamente considerare il risultato troppo complesso per essere rappresentato in modo efficiente nel formato SVG . Ma si spera buon senso.}

Come ha già sottolineato Wrzlprmft, oltre il 50% delle dimensioni del file SVG è occupato da un'immagine bitmap PNG incorporata utilizzata per creare un effetto di ombreggiatura abbastanza sottile sul controller. Basta sbarazzarsi di quell'immagine e sostituirla con un semplice gradiente radiale, è sufficiente per ridurre l'SVG fino a circa 10kb.

               
^{Immagine originale con elegante sfumatura bitmap a sinistra, versione modificata con semplice gradiente radiale a destra.}

Mentre ci sei, dovresti anche controllare i tuoi percorsi per vedere se c'è qualcosa da semplificare lì. Non ho trovato molto, ma la struttura del tuo controller ha alcuni nodi adiacenti (vicino al centro in alto e in basso) che possono essere uniti senza fare alcuna differenza visibile.

È un semplice risparmio del 50% proprio lì, ma non fermiamoci ancora. Se conosci anche un po 'il formato SVG , puoi fare molto meglio di così.

Innanzitutto, esegui "Vacuum Defs" in Inkscape per eliminare definizioni inutili, quindi salva l'immagine come "semplice SVG". Ora è il momento di aprirlo in un editor di testo e vedere di cosa possiamo liberarci. Idealmente, dovresti usare un editor con un'anteprima SVG integrata, in modo da poter vedere rapidamente l'effetto (si spera, nessuno) delle tue modifiche sull'aspetto dell'immagine. Uso emacs per questo, ma ci sono altri editor con caratteristiche simili là fuori.

Ad ogni modo, con il file SVG aperto nel tuo editor di testo, iniziamo a semplificarlo!

• Proprio in alto, c'è un grande inutile <!-- comment -->. Basta cancellarlo.

• Se stai modificando un SVG direttamente da Illustrator, c'è anche una <!DOCTYPE ... >linea inutile . Cancella anche tu.

• Inkscape insiste per attaccare un inutile blocco di metadati RDF nella tua immagine. Basta individuare il <metadata ...>tag ed eliminarlo, insieme a tutto fino alla chiusura inclusa </metadata>.

• Inoltre, anche se salvi il file come "semplice SVG", Inkscape lo sporca ancora con un sacco di attributi personalizzati. Trova tutti gli attributi che iniziano con inkscape:o sodipodi:ed eliminali.

• Senza i metadati e gli attributi specifici di Inkscape, puoi rimuovere dal <svg>tag tutti gli attributi dello spazio dei nomi XML non utilizzati . Dovrebbe essere possibile rimuovere almeno xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapee xmlns:sodipodi. Se c'è un xmlns:svgattributo ridondante , rimuovilo anche tu. Gli unici attributi dello spazio dei nomi che dovresti lasciare a questo punto sono:

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

• Il <svg>tag ha anche un sacco di altri attributi inutili che puoi rimuovere in modo sicuro, come enable-backgrounde xml:space="preserve". (Coloro che sono inseriti dall'esportatore Illustrator SVG, e Inkscape non è abbastanza intelligente per rendersi conto che sono inutili.) L' viewBoxattributo può anche essere rimosso in modo sicuro da questa immagine, dal momento che solo ripete i valori delle x, y, widthe heightgli attributi.

• Puoi anche rimuovere in sicurezza gli attributi encodinge standalonedal <?xml ... ?>tag.

• Ora veniamo alle viscere dei dati dell'immagine. Per qualche motivo, Inkscape insiste sull'assegnazione di idattributi a ogni elemento, anche se non vengono mai citati. Qualsiasi idattributo il cui valore non viene mai ripetuto altrove nel file (cercalo!) È sicuro da rimuovere. Fondamentalmente, gli unici ID che devi conservare sono quelli per i gradienti e possibilmente per qualsiasi altro oggetto (ad es. Percorsi) trovato all'interno delle <defs>sezioni.

• Inoltre, a Inkscape piace generare ID lunghi come linearGradient4277. Prendi in considerazione la possibilità di abbreviare qualsiasi ID che non puoi semplicemente eliminare in qualcosa di simile come lg1invece.

• Ci sono anche più <defs>sezioni una dopo l'altra. La loro unione consente di risparmiare alcuni byte (e semplifica la struttura del documento in generale).

• Ci sono anche diversi gruppi vuoti ( <g>elementi) alla fine del file. Sbarazzati di loro. Ci possono essere anche più gruppi consecutivi con lo stesso transformattributo esatto (o nessuno); è anche sicuro unire quelli.

• Per qualche strana ragione, Inkscape salva un percorso Bezier ridondante ( dattributo) per gli <circle>elementi. Questo occupa spazio senza alcun motivo, quindi eliminali. (Lascia gli dattributi sugli <path>elementi essere; quelli sono effettivamente utilizzati per qualcosa.)

• Ad Inkscape piace anche usare CSS in styleattributi in cui attributi più specifici sarebbero più brevi, ad esempio riscrivere fill="#4888fa"in modo più dettagliato style="fill:#4888fa". Puoi salvare alcuni byte suddividendo quegli stili in singoli attributi (e rimuovendo quelli che ripetono inutilmente l'impostazione predefinita), ma che prendono un po 'più di familiarità con il formato SVG rispetto alla maggior parte delle modifiche sopra.

• Inoltre, se ci sono <use ... >elementi, potresti essere in grado di salvare alcuni byte sostituendoli con l'elemento reale a cui si collegano. (Ovviamente, ciò consente di risparmiare spazio solo se gli elementi collegati vengono utilizzati una sola volta.) Sembra anche che Inkscape preferisca definire i gradienti circolari indirettamente, prima definendo le fermate in a <linearGradient>, e poi facendo riferimento a loro in a <radialGradient>; puoi semplificarlo spostando le fermate direttamente all'interno del gradiente radiale e liberandoti del gradiente lineare ora inutilizzato. Come bonus, se, facendo questo, sei riuscito a sbarazzarti di tutti gli xlink:hrefattributi, puoi eliminare l' xmlns:xlinkattributo dal <svg>tag.

• Se vuoi davvero spremere ogni ultimo byte extra, cerca valori numerici con troppi decimali e arrotondali a qualcosa di più sensato. È qui che l'anteprima dal vivo aiuta davvero, poiché ti consente di vedere quanto puoi arrotondare il valore prima che inizi a essere visibile. Anche se non vuoi testare attentamente ogni numero per vedere quanto può essere arrotondato, tuttavia, puoi almeno scegliere un frutto basso come, diciamo, arrotondando un valore di 1.0000859pixel a solo 1.

• Infine, ripulisci il rientro e lo spazio bianco nel file. Per ridurre al minimo il conteggio dei byte, dovresti mettere tutto su una riga (o almeno, mettere solo le interruzioni di riga davanti agli attributi, dove è comunque richiesto lo spazio), ma è davvero difficile da leggere. Tuttavia, è possibile trovare un giusto equilibrio tra leggibilità e compattezza con un semplice rientro conservativo.

Ad ogni modo, ecco cosa sono riuscito a modificare manualmente la tua immagine SVG in:

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

Questa immagine in formato SVG sembra quasi indistinguibile dalla seconda immagine di esempio sopra e occupa solo 5189 byte, considerevolmente meno dell'immagine JPEG. Sono sicuro che potrebbe essere ulteriormente ottimizzato, ma questo è davvero solo un esempio di ciò che puoi fare in pochi minuti con la pratica. (Mi ci è voluto molto più tempo per scrivere questa risposta che per modificare effettivamente il codice SVG.)

Infine, comprimere questo codice SVG con gzip lo riduce a soli 1846 byte (!), Appena oltre un quarto delle dimensioni della tua versione JPEG.

Sono un po 'sorpreso che nessuno abbia menzionato l' estensione " Scour ". È in bundle con Inkscape (a partire dalla versione 0.47) e offre molte delle ottimizzazioni menzionate da Ilmari Karonen.

Puoi convertirlo in un file SVG compresso (SVGZ) e inserire image.svgz nella tua pagina web:

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

Oppure, in Adobe Illustrator, salva semplicemente come "SVG compresso", che scriverà un file image.svgz.

Per l'immagine di prova è ancora più grande del JPG, tuttavia:

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

Di recente ho trovato uno strumento su https://petercollingridge.appspot.com/svg-editor ( codice sorgente ) che aiuta a ottimizzare i file SVG. In questo caso ha buoni risultati, portando la dimensione del file a 3,7 KB, che è poco più della metà della dimensione del JPG, con una piccola regolazione manuale:

L'uso di questo strumento per ottimizzare i file SVG richiede molto meno tempo rispetto al golf manuale del file.

SVGOMG! è un'app Web straordinaria per l'ottimizzazione SVG

Secondo il creatore della app, SVGOMG è SVGO s' " M Issing G UI".

Eseguirlo sull'immagine fornita lo riduce a solo 3.42kbe subito 1.4kbdopo essere stato compresso.