Miten pienennän SVG-tiedoston kokoa?

Pudota .svg-tiedosto tai liitä sen lähdekoodi, pidä oletusasetukset voimassa ja vertaa Alkuperäinen- ja Optimoitu-kokoja. Käytä sitten Lataa .svg tai Kopioi ottaaksesi pienemmän tuloksen.

Mitä SVG-optimoija poistaa oletuksena?

Oletuksena se poistaa kommentit, metatiedot mukaan lukien otsikon, kuvauksen ja Inkscape- tai Sodipodi-tiedot, ylimääräiset tyhjät tilat, tarpeettomat oletusattribuutit ja XML-julistuksen, ja pyöristää numerot kahteen desimaaliin.

Miksi elementtien ID:t säilytetään optimoinnin jälkeen?

Poista elementtien id-attribuutit on oletuksena pois päältä, koska CSS- tai JavaScript-animaatiot voivat viitata näihin ID:hin. Kytke se päälle vain, jos mikään sivullasi ei riipu niistä.

Miksi SVG-animaationi katosivat?

Script-tagit, tapahtuma-attribuutit, ulkoiset viittaukset ja SMIL-animaatioelementit, kuten animate ja set, poistetaan turvallisuussyistä, joten optimoitu SVG on staattinen.

Voinko käyttää optimoitua SVG:tä Reactissa tai CSS:ssä?

Kyllä. Kopioi- ja Lataa .svg -toimintojen lisäksi tarjolla on Kopioi JSX:nä, joka muuntaa attribuutit camelCase-muotoon, ja Kopioi CSS-tausta. Visuaalinen esikatselu antaa sinun tarkistaa, että se renderöityy edelleen oikein.

Onko se todella ilmainen?

Kyllä. Jokainen työkalu on ilmainen, eikä vaadi tiliä tai luottokorttia. Työ tehdään laitteellasi palvelimiemme sijaan, minkä ansiosta se pysyy maksuttomana.

Ladataanko tiedostoni palvelimelle?

Ei. Tiedostosi avataan ja käsitellään selaimessasi, eikä niitä lähetetä LibraToolille. Jotkin työkalut lataavat ensin selaimeesi käsittelymoottorin tai tekoälymallin; tämä lataus ei sisällä mitään tietojasi.

Toimiiko se mobiililla?

Kyllä. Se toimii nykyaikaisissa mobiiliselaimissa iOS:llä ja Androidilla, eikä mitään tarvitse asentaa. Hyvin suuret tiedostot voivat olla puhelimessa hitaita tai muisti voi loppua, joten käytä niihin tietokonetta.

✨

SVG-optimoija ja -pienentäjä ilmaiseksi

Poista metatiedot, tiivistä välilyönnit ja pyöristä desimaalit SVG-tiedostokoon merkittäväksi pienentämiseksi — tyypilliset vähennykset 30–70 %. Visuaalinen esikatselu varmistaa, ettei mitään rikkoudu.

Tiedostokoko riippuu laitteestasiTiedostot pysyvät yksityisinäEi kirjautumista tarvitaIlmainen ikuisesti

Toimii offline-tilassa kerran ladattuna

Pudota tiedosto tähän tai valitse napsauttamalla

SVG · käsitellään laitteellasi

tai liitä leikepöydältä painamalla Ctrl+V

Selaa tiedostoja

— tai liitä SVG alle —

Tiedostosi eivät koskaan poistu laitteeltasi. Kaikki käsittely tapahtuu paikallisesti selaimessasi.

Yleiset käyttötavat

Optimoi SVG-kuvakkeet tuotantoa vartenPoista tarpeettomat metatiedot kuvakkeista ennen toimittamista — tyypillinen pienentäminen 50-80%.
Optimoi brändin SVG-logotPienennä SVG-logotiedoston kokoa nopealle sivustojen lataamiselle ilman laadun heikkenemistä.
Optimoi kuvitukset ja Hero SVG -kuvatSuuremmille kuvituksille (hero-kuvat, koriste-grafiikat) optimointi voi säästää 30-70% tiedoston koosta.
Pienennä JavaScript-nipun kokoKun SVG-kuvat tuodaan React-komponentteina tai upotetaan koodiin, optimointi pienentää JS-nipuksi.
Puhdista Figma / Sketch SVG -vientiFigma- ja Sketch-vienti sisältää laajat metatiedot. Poista ne ennen tuotantokäyttöä.

Miten se toimii

Tämä työkalu pienentää SVG-tiedoston kokoa käsin kirjoitetulla optimoijalla, joka toimii kokonaan selaimessasi — ei kirjastoja, ei palvelinta. Se yhdistää kaksi läpikäyntiä: selaimen sisäänrakennetun DOMParser/XMLSerializer-parin attribuuttitason tarkkuustyöhön, ja kohdennettuja regex-korvauksia kommenttien poistoon, metadatan poistoon ja välilyöntien supistamiseen.

1
DOMParser puhdistaa SVG:n
Ennen mitään optimointia selaimen DOMParser lukee SVG:n XML:nä ja käy läpi jokaisen elementin. Skriptitagit, tapahtumakäsittelijät (mikä tahansa on*-attribuutti), animaatioelementit ja ulkoiset URL-viittaukset poistetaan ehdoitta — tämä tapahtuu riippumatta siitä, mitä optimointiasetuksia valitset.
2
DOM-pohjainen desimaalien pyöristys
Jos desimaalien pyöristys on käytössä, optimoija käy jäsennetyn DOM:in läpi toisen kerran ja soveltaa pyöristystä vain tunnettuihin numeerisiin attribuutteihin (path d -data, koordinaatit, transform-arvot, viivan leveydet jne.), käyttäen regexiä, joka täsmää yksittäisiä liukulukuja vahingoittamatta yhdistettyjä path-arvoja kuten .5.5.
3
Regex-läpikäynnit siistivät serialisoidun merkinnän
XMLSerializer tuottaa normalisoidun XML:n, ja sitten kohdennetut merkkijonokorvaukset poistavat HTML-kommentit, Inkscape/Sodipodi-editorin metadatan, XML-ilmoituksen, tarpeettomat oletusattribuutit (kuten version="1.1"), ja tagien väliset välilyönnit — jokainen läpikäynti kohdennettu suppeasti, jotta tekstisolmujen sisältöön ei koskaan kosketa.
4
Gzip-koko ja vientimuodot
Selaimen CompressionStream-rajapinta laskee sekä syötteen että tulosteen todelliset gzip-koot, koska juuri se määrittää siirtokustannuksen verkossa. Optimoitu SVG voidaan ladata, kopioida raakana SVG:nä, muuntaa React JSX -valmiiksi camelCase-attribuuteiksi, tai koodata CSS-data-URI:na — kaikki muunnokset tapahtuvat paikallisesti.

SVG:si luetaan ja käsitellään kokonaan selainvälilehdessäsi — tiedoston tavut eivät koskaan poistu laitteeltasi.

Liittyvät työkalut

🗜️

CSS-pienentäjä ja -kaunistaja

Pienennä CSS tiedostokoon pienentämiseksi tai kaunista pienennetty CSS luettavuuden parantamiseksi. Välitön, selaimessasi.

Kokeile sitä

🗜️

GIF-pakkaaja

Pienennä animoitu GIF: sovita se kokorajan alle, kuten Discordin 256 kt:n emojiin tai 512 kt:n tarraan, tai valitse värit, leveys ja ruudut itse. Toimii selaimessa, eikä GIF-tiedostoa lähetetä minnekään.

Kokeile sitäTiedostot pysyvät paikallisina

📄

PDF-pakkausohjelma

Pakkaa PDF-tiedostoja pienentääksesi niiden kokoa. Valitse laatutaso — suurempi pakkaus tarkoittaa pienempiä tiedostoja mutta heikompaa kuvanlaatua.