Orodje naloži uradni modul SVGO za brskalnik šele po zagonu optimizacije. Uporablja standardni nabor vtičnikov ter odstrani skripte in obdelovalnike dogodkov, da je datoteka varnejša kot običajna spletna slika. ID-je lahko ohranite, kadar so od njih odvisni CSS, JavaScript, prelivi, maske ali zunanje reference.
Brezplačna optimizacija SVG
Vse poteka v vašem brskalniku - brez nalaganja, brez registracije.
Skripte in obdelovalniki dogodkov se odstranijo
Vhodni SVG
Optimizirani SVG
Ctrl ali Command + Enter
Prilepite kodo SVG ali izberite datoteko za začetek
Kaj naredi optimizacija SVG?
Optimizacija SVG zmanjša vektorsko datoteko tako, da odstrani metapodatke urejevalnika, komentarje, odvečne atribute in nepotrebno natančnost števil. Prilepite kodo SVG ali izberite datoteko, da se SVGO zažene neposredno v brskalniku. Primerjajte izvirnik z rezultatom, nato pa manjši SVG kopirajte ali prenesite, ne da bi svoje delo poslali na strežnik.
Kako uporabljati
- 1Dodajte SVG. Prilepite celotno kodo SVG, povlecite lokalno datoteko .svg v območje za nalaganje ali odprite vgrajeni primer.
- 2Izberite varne nastavitve. Nastavite natančnost števil, pustite vključenih več prehodov za dodatno zmanjšanje in ohranite ID-je, na katere se sklicuje druga koda.
- 3Optimizirajte in primerjajte. Zaženite SVGO, nato preverite število bajtov pred obdelavo in po njej ter oba vizualna predogleda.
- 4Kopirajte ali prenesite. Kopirajte jedrnato kodo ali prenesite novo datoteko .optimized.svg, pri tem pa izvirnega dela ne spremenite.
Komu je namenjeno
- Frontend razvijalci, ki zmanjšujejo ikone, logotipe in ilustracije, preden jih dodajo na spletno mesto ali v knjižnico komponent.
- Oblikovalci, ki čistijo metapodatke in kodo urejevalnika iz datotek, izvoženih iz Figma, Illustrator, Sketch ali Inkscape.
- Ekipe za zmogljivost, ki merijo natančen prihranek bajtov UTF-8, preden vektorske vire dodajo v spletni paket.
- Avtorji komponent, ki pripravljajo jedrnato vgrajeno kodo SVG za React, Vue, Svelte ali navaden HTML.
Pogosta vprašanja
Je optimizacija SVG brezplačna?
Da. Datoteke SVG lahko optimizirate brez računa, plačila ali namestitve. Orodje prikaže natančno spremembo v bajtih UTF-8, rezultat pa lahko takoj kopirate ali prenesete iz brskalnika.
Ali se moja datoteka SVG naloži na strežnik?
Ne. Branje datoteke, obdelava s SVGO, merjenje bajtov in ustvarjanje predogledov potekajo lokalno v brskalniku. Logotipi, ikone in neobjavljena dela se s tem orodjem ne nalagajo.
Kako veliko datoteko SVG lahko optimiziram?
Orodje sprejme kodo SVG do velikosti 5 MB. Omejitev ohranja hitro obdelavo na telefonih in običajnih prenosnikih. Pri zelo velikih ilustracijah odstranite vdelane rastrske slike ali delo razdelite na manjše vire.
Ali optimizacija SVG spremeni videz slike?
SVGO je zasnovan tako, da odstrani odvečne podatke brez spremembe prikaza. Močno zaokroževanje števil ali čiščenje ID-jev pa lahko vpliva na zapletene datoteke. Primerjajte oba predogleda in optimizirani SVG preizkusite na dejanskem mestu uporabe, preden zamenjate produkcijsko datoteko.
Kaj spremeni decimalna natančnost?
Decimalna natančnost določa, koliko mest za decimalno vejico SVGO ohrani v koordinatah, transformacijah in povezanih vrednostih. Nižja vrednost pogosto prihrani več prostora, vendar lahko vidno premakne podrobnosti v zelo natančnih ali nenavadno velikih delih. Tri mesta so praktična začetna vrednost za večino spletnih ikon in ilustracij.
Ali naj v SVG ohranim ID-je?
ID-je ohranite, če se nanje sklicujejo CSS, JavaScript, atributi aria, prelivi, maske, filtri ali zunanji dokumenti. Pri samostojni dekorativni sliki lahko to možnost izklopite, da SVGO odstrani ali skrajša neuporabljene identifikatorje.
Ali optimizator odstrani skripte iz SVG?
Da. Postopek odstrani elemente script, atribute obdelovalnikov dogodkov in povezave JavaScript. Datoteka je zato varnejša kot običajna spletna slika, orodje pa ni primerno za aplikacije SVG, ki za delovanje potrebujejo skripte.
Kako deluje optimizacija v več prehodih?
SVGO rezultat znova obdeluje, dokler vsak prehod zmanjšuje datoteko. Nekatere spremembe odkrijejo nova mesta za čiščenje v naslednjem prehodu, zato je mogoče prihraniti še nekaj prostora. Največje zmanjšanje običajno nastane v prvem prehodu.