Urmați acest exemplu practic, apoi adaptați aceleași controale pentru propria imagine. Deschide Compresor SVG.
Încarcă un SVG static sau lipește codul sursă
Deschide Compresorul SVG și alege un fișier SVG sau Încearcă un eșantion. Eșantionul este svg-compressor.svg, un semn de orbită de 985 octeți cu un viewBox de 512 × 512, umplere cu gradient, titlu și descriere. Folosește Lipește SVG când codul sursă este deja într-un editor sau clipboard.
Instrumentul acceptă până la 20 fișiere de 2 MB fiecare. Acesta analizează un document SVG complet și elimină declarațiile standard de document SVG fără a încărca fișiere externe. XML-ul malformat, declarațiile de entități personalizate și subseturile interne de document sunt respinse. Fișierele foarte complexe pot atinge, de asemenea, limita de elemente sau de timp de procesare.
Acest flux de lucru produce grafică vectorială statică. Scripturile, gestionarele de evenimente, resursele externe, animația și imaginile raster încorporate sunt eliminate. Previzualizarea Original este deja igienizată, deci nu ar trebui interpretată ca o redare nerestricționată a fiecărei funcționalități din fișierul sursă.
Păstrează o copie a SVG original. O ilustrație interactivă sau un SVG care conține o fotografie reprezintă un caz de utilizare diferit față de o pictogramă vectorială statică.
Compară rezultatul și setează precizia zecimală
Cele două panouri de previzualizare arată originalul igienizat și rezultatul optimizat. Dimensiunile de lângă Original și Optimizat și rezumatul octeților compară fișierul sursă cu ieșirea finală. Acesta raportează o creștere atunci când optimizarea face un anumit fișier mai mare, în loc să promită o reducere de fiecare dată.
Deschide Setări și setează Precizia zecimală la 2 pentru exemplu. Precizia variază de la 1 la 5 și începe de la 3. Valorile mai mici pot simplifica geometria numerică, dar pot deplasa curbele fine, spațiile mici sau marginile aliniate. Crește-o atunci când previzualizarea pierde detalii importante.
Acest eșantion folosește o geometrie simplă, deci precizia 2 îi păstrează forma recognoscibilă. Alte SVG-uri cu coordonate zecimale complexe se pot schimba mai mult. Vizualizarea codului sursă SVG optimizat expune textul real care va fi descărcat; nu este o reprezentare separată a originalului.
Verifică un vector la dimensiunea de afișare dorită și la o vizualizare mai mare. O schimbare subtilă poate fi greu de observat într-o miniatură mică.
Exemplul din acest ghid
Încercați un eșantion: svg-compressor.svg, 985 octeți, 512 × 512 viewBox. Precizie zecimală 2; păstrați titlurile/descrierile accesibile și scurtarea ID-urilor interne activate; dimensiuni responsive și marcaj de ieșire lizibil dezactivate. SVG descărcat: 635 octeți.
- Sursă SVG
- 985 octeți
- SVG optimizat
- 635 octeți
- Reducere măsurată
- 35.5%
- Context păstrat
- Titlu, descriere și viewBox 512 × 512
Păstrează descrierile și ia în considerare ID-urile externe
Lasă activată opțiunea Păstrează titlurile și descrierile accesibile pentru exemplul lucrat. Aceasta păstrează titlul și descrierea SVG în timp ce elimină metadatele redundante ale editorului și simplifică codul sursă eligibil. Acestea sunt tipuri diferite de informații și nu ar trebui tratate ca interschimbabile.
Scurtarea ID-urilor interne este activată implicit. Optimizatorul actualizează referințele din interiorul SVG, dar CSS extern sau JavaScript-ul ar putea depinde în continuare de ID-urile originale. Dezactivează această opțiune când fișierul face parte dintr-o aplicație mai mare care își numește elementele și testează SVG final în acel context.
Lasă dezactivate Dimensiunile responsive și Codul sursă de ieșire lizibil pentru exemplu. Dimensiunile responsive elimină lățimea și înălțimea fixe atunci când viewBox-ul de coordonate poate oferi o dimensionare scalabilă. Ieșirea lizibilă adaugă indentare și este utilă pentru întreținere, dar poate crește dimensiunea textului.
Pentru un fișier pictogramă de sine stătător, curățarea ID-urilor interne este de obicei simplă. Pentru o diagramă scriptată extern, păstrarea identificatorilor poate conta mai mult decât câțiva octeți economisiți.
Descarcă și verifică vectorul final
Selectează Start, apoi Descarcă. Ieșirea lucrată are 635 octeți comparativ cu sursa de 985 octeți: o reducere de 35.5%. Titlul și descrierea rămân, iar comparația afișată este redată din sursa autentică și SVG descărcat.
Articolul redă ambii vectori la 1,024 pixeli pentru o ilustrare clară a rezultatului; dimensiunea lor logică în coordonate rămâne 512 × 512. O previzualizare mai mare nu adaugă conținut raster la SVG salvat. Verificați vectorul real în pagina de destinație înainte de a înlocui o resursă de producție existentă.
Un fișier se descarcă sub formă de SVG cu numele său de bază original. Un lot se descarcă sub formă de ZIP, cu sufixe numerotate pentru nume de fișiere duplicate. Procesarea are loc în browser. Păstrați sursa originală dacă doriți să încercați ulterior setări de optimizare diferite.
Economiile de dimensiune a fișierului sunt măsurate doar în raport cu acest eșantion. Un SVG deja optimizat poate prezenta o îmbunătățire redusă sau poate deveni ușor mai mare.
Întrebări frecvente
Va arăta SVG optimizat exact la fel?
Optimizatorul urmărește să păstreze aspectul static, dar rotunjirea și eliminarea conținutului neacceptat pot schimba un fișier. Compară previzualizările și testează SVG salvat în proiectul tău.
Ce modifică precizia zecimală?
Controlează precizia utilizată pentru geometria numerică și datele de tip cale. Valorile mai mici pot reduce dimensiunea, dar pot deplasa detaliile fine. Valoarea implicită este 3.
Păstrează titlul și descrierea?
Da, în mod implicit. Lăsați activată opțiunea Păstrare titluri și descrieri accesibile pentru a conserva acele elemente SVG.
De ce lipsesc scripturile sau imaginile raster?
Acest instrument creează o ieșire vectorială statică. Scripturile, evenimentele, resursele externe, animațiile și imaginile raster încorporate sunt eliminate intenționat în timpul igienizării.
Pot păstra ID-urile referențiate de CSS?
Dezactivați Scurtare ID-uri interne atunci când codul extern depinde de ID-uri specifice. Verificați fișierul optimizat în pagina țintă înainte de a înlocui originalul.
Sunt fișierele SVG încărcate pentru optimizare?
Nu. Instrumentul efectuează parsarea și optimizarea în browser și descarcă rezultatul local.
Pot încărca un SVG cu un DOCTYPE?
O declarație de document SVG standard este acceptată și eliminată fără a prelua identificatorul său extern. Declarațiile de entități personalizate și subseturile interne de documente sunt respinse.
Faceți vectorul mai ușor, cu un rezultat pe care îl puteți inspecta.
Încearcă un eșantion sau folosește propriul fișier și revizuiește rezultatul înainte de a-l partaja.
