SVG optimizētājs tiešsaistē
Optimizējiet un samaziniet SVG failus tiešsaistē ar SVGO pārlūkprogrammā. Izvēlieties sagatavi, vizuāli salīdziniet rezultātu un redziet izmēra ietaupījumu.
Spraudņi
Noņemot viewBox, zīmējums vairs nemērogojas, bet ID saīsināšana vai noņemšana sabojā CSS, JavaScript, <use> vai enkura saites, kas uz tiem atsaucas. SVG failiem, ko izmanto kodā, sprite lapās vai animācijās, izmantojiet Drošo sagatavi.
- Oriģinālais izmērs
- Optimizētais izmērs
- Ietaupījums
- Ar gzip
Kā optimizēt SVG
- Ievelciet SVG failu nolaišanas zonā vai noklikšķiniet uz tās, lai to izvēlētos. Marķējumu varat arī ielīmēt lodziņā SVG kods.
- Izvēlieties Sagatave: Droša, Līdzsvarota (noklusējums) vai Maksimāla. Zemāk redzamais saraksts Spraudņi precīzi parāda, kuras darbības katra sagatave ieslēdz.
- Vajadzības gadījumā pielāgojiet: Decimāldaļu precizitāte (no 0 līdz 8 cipariem), Vairāki piegājieni un Strukturēts izvades formāts (ar atkāpēm), ja vēlaties lasāmu kodu. Tiklīdz mainīsiet spraudni, precizitāti vai piegājienus, sagatave pārslēdzas uz Pielāgota.
- Noklikšķiniet uz Optimizēt SVG. Ievilkts fails tiek optimizēts uzreiz, un, kad rezultāts jau ir, katra iestatījuma maiņa automātiski atkārto optimizāciju.
- Pārbaudiet skaitļus Oriģinālais izmērs, Optimizētais izmērs, Ietaupījums un Ar gzip, pēc tam salīdziniet abus zīmējumus blakus.
- Noklikšķiniet uz Kopēt, lai nokopētu Optimizētais SVG kods, vai uz Lejupielādēt optimizēto SVG, lai to saglabātu kā
name.min.svg.
Optimizāciju veic SVGO 4 – standarta atvērtā koda (MIT) SVG optimizētājs, ko izmanto lielākajā daļā tīmekļa būvēšanas rīku. Tā pārlūkprogrammas versija tiek ielādēta pirmajā klikšķī, un tā darbojas pilnībā jūsu ierīcē: jūsu SVG netiek augšupielādēts.
Kāpēc SVG faili no dizaina rīkiem ir tik smagi
No Illustrator, Inkscape, Figma vai Sketch eksportēts SVG satur daudz vairāk nekā tikai zīmējumu. Redaktori pievieno savus nosaukumvietas un atribūtus (slāņu nosaukumus, palīglīnijas, eksporta iestatījumus), bloku <metadata>, komentārus, piemēram, „Generator: Adobe Illustrator“, koordinātas ar sešām vai vairāk decimāldaļām, grupas, kurās ir viens elements, un daudzvārdīgas krāsas, piemēram, #ffffff. Nekas no tā nemaina to, ko zīmē pārlūkprogramma. SVGO to noņem, noapaļo skaitļus, pārraksta ceļu datus ar īsākām komandām, saīsina krāsas un apvieno vai atver lieko elementus. Eksportētām ikonām un ilustrācijām 40–60 % samazinājums ir parasta lieta.
Sagataves un riskantie spraudņi
- Droša darbina SVGO noklusējuma sagatavi, bet patur ID,
<desc>, atsevišķus ceļus un<style>noteikumus, ar 3 decimāldaļām un vienu piegājienu. Izmantojiet to SVG, uz kuriem atsaucas CSS vai JavaScript, sprite lapām un animācijām. - Līdzsvarota ir SVGO noklusējuma sagatave, 3 decimāldaļas, vairāki piegājieni. Tā der lielākajai daļai ikonu un ilustrāciju, kas tiek rādītas kā attēli.
- Maksimāla pievieno Noņemt
, Noņemt skriptus un notikumu atribūtus, Noņemt width/height (paturēt viewBox) un Aizstāt xlink:href ar href, ar 2 decimāldaļām un vairākiem piegājieniem.
Neviena sagatave nenoņem viewBox. Noņemt viewBox ir paredzēts tikai īpašiem gadījumiem: bez tā zīmējums vairs nevar mērogoties līdz izmēram, ko tam norādāt CSS.
Zināt, ko var sabojāt pārējie spraudņi:
- Saīsināt un noņemt neizmantotos ID pārdēvē ID, piemēram,
#icon-home, para. Jebkurš CSS selektors, JavaScript vaicājums,<use href="#…">sprite atsauce, lapas enkurs vai SMIL/CSS animācija, kas vērsta uz veco nosaukumu, pārstāj darboties. - Noņemt
un Noņemt dzēš pieejamības nosaukumu un aprakstu. Paturiet tos nozīmīgām ikonām un diagrammām, kas ekrāna lasītājiem jāizsaka. - Zema Decimāldaļu precizitāte var deformēt mazas ikonas: līknes sašūpojas un malas novirzās. Vienmēr pārbaudiet vizuālo salīdzinājumu; 3 ir droša noklusējuma vērtība.
- Apvienot ceļus apvieno blakus esošus ceļus vienā, tāpēc pārejas efekts vai animācija, kas bija vērsta uz vienu ceļu, zaudē savu mērķi.
Padomi
- Paturiet neoptimizētu oriģinālu rediģēšanai;
.min.svguztveriet kā kompilētu kodu. - Ieslēdziet gzip vai brotli savā serverī: teksta formāti, piemēram, SVG, saspiežas ļoti labi, un skaitlis Ar gzip parāda to, ko apmeklētāji patiesībā lejupielādē (tiek rādīts, ja jūsu pārlūkprogramma atbalsta
CompressionStream). - Iekļautu SVG var stilizēt ar CSS un animēt, taču tas netiek kešots atsevišķi; SVG elementā
<img>tiek kešots, bet to nevar stilizēt no lapas.
Biežāk uzdotie jautājumi
Vai mans SVG tiek augšupielādēts serverī?
Nē. SVGO darbojas jūsu pārlūkprogrammā. Vienīgā lejupielāde ir paša optimizētāja kods pirmajā optimizēšanas reizē.
Kāpēc priekšskatījums tiek rādīts kā attēli?
SVG ir dokumenta formāts, kas var saturēt JavaScript un ielādēt ārējus failus. Abi priekšskatījumi tiek attēloti kā <img> no lokālām blob adresēm, un šādā režīmā pārlūkprogrammas nekad neizpilda skriptus un neielādē ārējus resursus, tāpēc neuzticama SVG priekšskatīšana šeit ir droša. Pats optimizētais kods joprojām satur visus skriptus, ja vien nav ieslēgts Noņemt skriptus un notikumu atribūtus (tas ir ieslēgts sagatavē Maksimāla).
Mans optimizētais SVG vairs nemērogojas. Kas notika?
Visticamāk, viewBox tika noņemts vai nu ar Noņemt viewBox, vai agrāk ar citu rīku. Optimizējiet oriģinālu vēlreiz ar izslēgtu šo spraudni.
Kāpēc mana ikonu sprite lapa vai animācija pārstāja darboties?
Saīsināt un noņemt neizmantotos ID vai Apvienot ceļus mainīja elementus, uz kuriem atsaucas jūsu kods. Izmantojiet Droša sagatavi, kas patur abus.
Optimizētais fails nav mazāks. Kāpēc?
SVG, visticamāk, jau ir samazināts. Izmēģiniet Maksimāla vai zemāku Decimāldaļu precizitāte un izslēdziet Strukturēts izvades formāts (ar atkāpēm).
Saistītie rīki
- SVG uz PNG konvertētājs Konvertējiet SVG uz PNG, JPG vai WebP pārlūkprogrammā ar jebkuru platumu, augstumu, mērogu vai DPI un caurspīdīgu fonu. Vairāki faili un ZIP.
- Attēla vektorizētājs uz SVG Pārveidojiet PNG vai JPG logotipu vai zīmējumu par SVG vektoru ceļiem pārlūkprogrammā. Sagataves, krāsu skaits, drošs priekšskatījums, bez augšupielādes.
- Attēlu kompresors Saspiediet JPG, PNG un WebP attēlus ar kvalitātes slīdni, salīdziniet izmērus pirms un pēc, un apstrādājiet fotogrāfijas pa partijām, tās neaugšupielādējot.
- CSS formatētājs un minimizētājs Sakārtojiet nekārtīgu CSS ar tīrām atkāpēm vai minimizējiet to ar csso un redziet izmēru pirms un pēc. Darbojas pārlūkprogrammā, nekas netiek augšupielādēts.