Kaip sumažinti SVG failo dydį?

Įkelkite .svg failą arba įklijuokite jo pirminį kodą, palikite numatytąsias parinktis ir palyginkite Originalas ir Optimizuota dydžius. Tada naudokite Atsisiųsti .svg arba Kopijuoti, kad paimtumėte mažesnį rezultatą.

Ką SVG optimizatorius pašalina pagal numatymą?

Pagal numatymą jis pašalina komentarus, metaduomenis, įskaitant title, desc ir Inkscape ar Sodipodi duomenis, papildomus tarpus, perteklinius numatytuosius atributus ir XML deklaraciją, o skaičius suapvalina iki 2 skaičių po kablelio.

Kodėl po optimizavimo elementų ID išlaikomi?

Pašalinti elementų id atributus pagal numatymą išjungta, nes CSS ar JavaScript animacijos gali naudoti šiuos ID. Įjunkite tik jei niekas jūsų puslapyje nuo jų nepriklauso.

Kodėl mano SVG animacijos dingo?

Script žymos, įvykių atributai, išorinės nuorodos ir SMIL animacijos elementai, tokie kaip animate ir set, yra pašalinami dėl saugumo, todėl optimizuotas SVG yra statinis.

Ar galiu naudoti optimizuotą SVG React ar CSS?

Taip. Be Kopijuoti ir Atsisiųsti .svg, yra Kopijuoti kaip JSX, kuris konvertuoja atributus į camelCase, ir Kopijuoti CSS foną. Vaizdinė peržiūra leidžia patikrinti, ar vis dar atvaizduojama teisingai.

Taip. Kiekvienas įrankis yra nemokamas, nereikia nei paskyros, nei kredito kortelės. Darbas atliekamas jūsų įrenginyje, o ne mūsų serveriuose, todėl jis ir yra nemokamas.

Ar mano failai keliami į serverį?

Ne. Failai atidaromi ir apdorojami jūsų naršyklėje ir nesiunčiami į LibraTool. Kai kurie įrankiai pirmiausia atsisiunčia į naršyklę apdorojimo variklį ar DI modelį; šiame atsisiuntime nėra jūsų duomenų.

Ar veikia mobiliuosiuose įrenginiuose?

Taip. Veikia šiuolaikinėse mobiliosiose naršyklėse iOS ir Android sistemose, nieko diegti nereikia. Labai dideli failai telefone gali veikti lėtai arba pritrūkti atminties, todėl jiems naudokite kompiuterį.

✨

SVG optimizatorius ir minifikatorius nemokamai

Pašalinkite metaduomenis, sutraukite tarpus ir suapvalinkite dešimtainius skaičius, kad ženkliai sumažintumėte SVG failo dydį — įprastas sumažinimas 30–70%. Vizuali peržiūra patvirtina, kad niekas nesuges.

Failo dydis priklauso nuo jūsų įrenginioFailai lieka privatūsPrisijungimo nereikiaNemokamai amžinai

Veikia neprisijungus, kai įkeliama

Nuvilkite failą čia arba spustelėkite, kad pasirinktumėte

SVG · apdorojama jūsų įrenginyje

arba paspauskite Ctrl+V, kad įklijuotumėte iš iškarpinės

Naršyti failus

— arba įklijuokite SVG žemiau —

Jūsų failai niekada nepalieka jūsų įrenginio. Visas apdorojimas vyksta vietiškai jūsų naršyklėje.

Dažniausi naudojimo būdai

Optimizuokite SVG piktogramas gamybaiNuimkite nereikalingus metaduomenis iš SVG piktogramų prieš siunčiantis — tipiškam mažinimui 50-80%.
Optimizuokite ženklą logotipus SVGSumažinkite SVG logotipo failo dydį greitam svetainės užkrovimui nežudydami kokybės.
Optimizuokite iliustracijas ir SVG herojusDaugiau iliustracijų (herojams, dekoratyvai grafikai), optimizavimas gali nuimti 30-70% failo dydžio.
Sumažinkite JavaScript kompleto dydįKai SVG yra importuoti kaip React komponentai arba įterpti į kodą, jų optimizavimas sumažina jūsų JS paketą.
Išvalykite Figma / Sketch SVG eksportąFigma ir Sketch SVG eksporte yra plačūs metaduomenys. Nuimkite jį prieš naudojant gamyboje.

Kaip tai veikia

Šis įrankis sumažina SVG failo dydį, naudodamas rankomis parašytą optimizatorių, kuris veikia visiškai jūsų naršyklėje — jokių bibliotekų, jokio serverio. Jis sujungia du praėjimus: naršyklės įtaisytą DOMParser/XMLSerializer tikslaus atributų lygio darbo ir tikslinius reguliariųjų reiškinių pakeitimus komentarų pašalinimui, metaduomenų pašalinimui ir tarpų sutraukimui.

1
DOMParser sanitizuoja SVG
Prieš bet kokį optimizavimą, naršyklės DOMParser skaito SVG kaip XML ir apeina kiekvieną elementą. Script žymos, įvykių tvarkyklės (bet koks on* atributas), animacijos elementai ir išoriniai URL nuorodos pašalinami besąlygiškai — tai vyksta nepriklausomai nuo pasirinktų optimizavimo parinkčių.
2
DOM pagrįstas dešimtainis apvalinimas
Jei įjungtas dešimtainis apvalinimas, optimizatorius antrą kartą apeina analizuotą DOM ir taiko apvalinimą tik žinomiems skaitiniams atributams (path d duomenys, koordinatės, transform reikšmės, brūkšnio pločiai ir t.t.), naudodamas reguliarųjį reiškinį, kuris atitinka atskirus slankiojo kablelio skaičius, nesugadindamas sujungtų kelio reikšmių, tokių kaip .5.5.
3
Reguliariųjų reiškinių praėjimai išvalo serializuotą žymėjimą
XMLSerializer sukuria normalizuotą XML, tada tikslinės eilučių pakeitimai pašalina HTML komentarus, Inkscape/Sodipodi redaktoriaus metaduomenis, XML deklaraciją, perteklinius numatytuosius atributus (pvz., version="1.1") ir tarp žymų esantį tarpą — kiekvienas praėjimas siaurai apibrėžtas, kad teksto mazgo turinys niekada nebūtų paliestas.
4
Gzip dydis ir eksporto formatai
Naršyklės CompressionStream API apskaičiuoja tikruosius gzip dydžius tiek įvesčiai, tiek išvesčiai, nes būtent tai iš tikrųjų lemia perdavimo kainą internete. Optimizuotą SVG galima atsisiųsti, nukopijuoti kaip neapdorotą SVG, konvertuoti į React JSX paruoštus camelCase atributus, arba užkoduoti kaip CSS duomenų URI — visi konvertavimai vyksta vietoje.

Jūsų SVG skaitomas ir apdorojamas visiškai jūsų naršyklės skirtuke — failo baitai niekada nepalieka jūsų įrenginio.

Susiję įrankiai

🗜️

CSS minifikatorius ir formatuotojas

Minifikuokite CSS, kad sumažintumėte failo dydį, arba formatuokite minifikuotą CSS skaitomumui. Momentaliai, jūsų naršyklėje.

Išbandykite

🗜️

GIF glaudintuvas

Sumažinkite animuotą GIF: pritaikykite prie dydžio ribos, pavyzdžiui, Discord 256 KB jaustukui ar 512 KB lipdukui, arba patys pasirinkite spalvas, plotį ir kadrus. Veikia naršyklėje; GIF neįkeliamas.

IšbandykiteFailai lieka vietiškai

📄

PDF kompresorius

Suspauskite PDF failus, kad sumažintumėte jų dydį. Pasirinkite kokybės lygį — didesnis suspaudimas reiškia mažesnius failus, bet mažesnį vaizdų tikslumą.