Tresnak
SVG optimizatu
Garbitu eta arindu zure SVG fitxategiak, beharrezkoa ez den kodea kenduta.
Jaregin SVG fitxategi bat hemen
edo egin klik hautatzeko, edo itsatsi SVG kodea behean
Tresna honi buruz
Illustrator, Figma edo Inkscapetik esportatutako SVGek metadatuak, iruzkinak, talde hutsak eta soberako hamartarrak izaten dituzte, marrazkiari ezer gehitzen ez diotenak. Garbitzean, fitxategia arinagoa da, webgunea azkarrago kargatzen da eta kodea errazago irakurtzen da HTMLn edo osagai batean txertatzen baduzu. Ikono, logotipo eta ilustrazioetarako erabilgarria da, webgune batera edo biltegi batera igo aurretik.
Jaregin .svg fitxategi bat laukian, egin klik hautatzeko edo itsatsi kodea zuzenean «Sarrerako SVGa» eremuan. Optimizazioa automatikoa da: jatorrizko pisua, optimizatua, aurreztutakoa eta murrizketa-ehunekoa ikusiko dituzu. Azpian, emaitzaren kodea eta aurrebista bat ageri dira, marrazkia aldatu ez dela egiaztatzeko. Ondoren, sakatu «Deskargatu SVG optimizatua» edo «Kopiatu SVG kodea».
Prozesuak SVGO erabiltzen du, kode irekiko liburutegi bat, eta osorik zure nabigatzailean exekutatzen da: fitxategia ez da zure gailutik ateratzen. Hainbat pasaldi egiten ditu konfigurazio estandarrarekin, width eta height atributuak kentzen ditu (viewBoxa mantenduta) eta data-* atributuak ere bai. Ez ditu PNG edo JPG irudiak SVG bihurtzen, ezta bit-mapak bektorizatzen ere; SVGak irudi txertatu bat badu, zati hori ia ez da txikitzen.
Ohiko galderak
Zenbat arintzen da SVG bat optimizatzean?
Jatorriaren araberakoa da. Diseinu-programa batetik esportatutako SVG bat % 20 eta % 60 artean arintzen da askotan; eskuz idatzitako edo lehendik optimizatutako batek ia ez du aldaketarik izango. Tresnak fitxategi bakoitzean aurreztutakoa zehazki erakusten du.
SVG bat optimizatzeak itxura aldatzen al du?
Ez luke aldatu behar: SVGOk marrazkian eraginik ez duen informazioa baino ez du kentzen, eta koordenatuak nabaritzen ez den zehaztasunarekin biribiltzen ditu. Hala ere, begiratu aurrebista, batez ere SVGak iragazkiak, maskarak edo animazio konplexuak baditu.
Zergatik hartzen du SVG optimizatuak orriaren zabalera osoa?
width eta height atributuak kentzen direlako eta viewBoxa mantentzen delako; hala, SVGa bere edukiontzira egokitzen da. Eman tamaina CSSz, edo gehitu berriro width eta height kodean behar badituzu.
SVGaren id-ak eta klaseak mantentzen dira?
Klaseak mantentzen dira, baina SVGOren konfigurazio estandarrak SVG barruan erabiltzen ez diren id-ak laburtu edo ken ditzake. Zure CSSa edo JavaScripta id jakin baten mende badago, egiaztatu emaitzaren kodean.