Seuraa tätä esimerkkiä ja sovella samoja säätimiä omaan kuvaasi. Avaa SVG-pakkaaja.
Lataa staattinen SVG tai liitä merkintäkieli
Avaa SVG-pakkaaja ja valitse SVG-tiedosto tai kokeile näytettä. Näyte on svg-compressor.svg, 985-tavuinen kiertoratanäyttö, jossa on 512 × 512 viewBox, liukuväritäyttö, otsikko ja kuvaus. Käytä Liitä SVG, kun merkintäkieli on jo muokkaimessa tai leikepöydällä.
Työkalu hyväksyy enintään 20 tiedostoa, kukin kooltaan 2 MB. Se jäsentää täydellisen SVG-asiakirjan ja poistaa tavalliset SVG-asiakirjan ilmoitukset lataamatta ulkoisia tiedostoja. Virheellinen XML, mukautetut entiteetti-ilmoitukset ja sisäiset asiakirjaosajoukot hylätään. Erittäin monimutkaiset tiedostot voivat myös saavuttaa elementti- tai käsittelyaikarajan.
Tämä työnkulku tuottaa staattista vektorigrafiikkaa. Skriptit, tapahtumankäsittelijät, ulkoiset resurssit, animaatiot ja upotetut rasterikuvat poistetaan. Alkuperäinen esikatselu on jo puhdistettu, joten sitä ei tule tulkita lähtötiedoston jokaisen ominaisuuden rajoittamattomana renderöintinä.
Säilytä kopio alkuperäisestä SVG-tiedostosta. Interaktiivinen kuva tai SVG, joka sisältää valokuvan, on eri käyttötapaus kuin staattinen vektorikuvake.
Vertaa tulosta ja aseta desimaalitarkkuus
Kaksi esikatselupaneelia näyttävät puhdistetun alkuperäisen ja optimoidun tuloksen. Alkuperäisen ja Optimoidun vieressä olevat koot sekä tavuyhteenveto vertaavat lähdetiedostoa valmiiseen tulosteeseen. Se ilmoittaa kasvusta, kun optimointi tekee tietystä tiedostosta suuremman sen sijaan, että se lupaisi pienennyksen joka kerta.
Avaa Asetukset ja aseta desimaalitarkkuudeksi 2 tätä esimerkkiä varten. Tarkkuus vaihtelee välillä 1–5 ja alkaa arvosta 3. Pienemmät arvot voivat yksinkertaistaa numeerista geometriaa, mutta voivat siirtää hienoja kaaria, pieniä rakoja tai kohdistettuja reunoja. Nosta sitä, kun esikatselu menettää tärkeitä yksityiskohtia.
Tämä näyte käyttää suoraviivaista geometriaa, joten tarkkuus 2 säilyttää sen tunnistettavan muodon. Muut SVG-tiedostot, joissa on monimutkaisia desimaalikoordinaatteja, voivat muuttua enemmän. Näytä optimoitu SVG -merkintä paljastaa varsinaisen tekstin, joka ladataan; se ei ole erillinen esitys alkuperäisestä.
Tarkista vektori sen tarkoitetussa näyttökoossa ja suuremmassa näkymässä. Hienovarainen muutos voi olla vaikea nähdä pienessä pikkukuvassa.
Tämän oppaan esimerkki
Kokeile näytettä: svg-compressor.svg, 985 tavua, 512 × 512 viewBox. Desimaalitarkkuus 2; pidä esteettömät otsikot/kuvaukset ja lyhennä sisäiset tunnisteet käytössä; Responsiiviset mitat ja Luettava tulostusmerkintä pois käytöstä. Ladattu SVG: 635 tavua.
- Lähde SVG
- 985 tavua
- Optimoitu SVG
- 635 tavua
- Mitattu vähennys
- 35.5%
- Säilytetty konteksti
- Otsikko, kuvaus ja 512 × 512 viewBox
Säilytä kuvaukset ja harkitse ulkoisia tunnisteita
Jätä esteettömät otsikot ja kuvaukset käyttöön työesimerkkiä varten. Tämä säilyttää SVG -otsikon ja -kuvauksen samalla kun se poistaa tarpeettomat muokkausmetatiedot ja yksinkertaistaa kelvollista merkintää. Nämä ovat erityyppistä tietoa, eikä niitä tule kohdella keskenään vaihdettavina.
Lyhennä sisäiset tunnisteet on oletusarvoisesti päällä. Optimoija päivittää viittaukset SVG sisällä, mutta ulkoinen CSS tai JavaScript saattaa silti luottaa alkuperäisiin tunnisteisiin. Poista tämä valinta käytöstä, kun tiedosto on osa laajempaa sovellusta, joka nimeää elementtinsä, ja testaa valmis SVG kyseisessä kontekstissa.
Jätä Responsiiviset mitat ja Luettava tulostusmerkintä pois päältä esimerkkiä varten. Responsiiviset mitat poistaa kiinteän leveyden ja korkeuden, kun koordinaattien viewBox voi tarjota skaalautuvan koon. Luettava tulostus lisää sisennystä ja on hyödyllinen ylläpidon kannalta, mutta voi kasvattaa tekstin kokoa.
Erilliselle kuvaketiedostolle sisäisten tunnisteiden puhdistus on yleensä suoraviivaista. Ulkoisesti skriptatussa kaaviossa tunnisteiden säilyttäminen voi olla tärkeämpää kuin muutama säästetty tavu.
Lataa ja tarkista valmis vektori
Valitse Aloita ja sitten Lataa. Työstetty tulos on 635 tavua verrattuna 985-tavuiseen lähdetiedostoon: 35.5 % vähennys. Sen otsikko ja kuvaus säilyvät, ja näytetty vertailu on renderöity alkuperäisestä lähteestä ja ladatusta SVG -tiedostosta.
Artikkeli renderöi molemmat vektorit 1,024 pikselin koossa tuloksen terävää havainnollistamista varten; niiden looginen koordinaattikoko pysyy 512 × 512. Suurempi esikatselu ei lisää rasterisisältöä tallennettuun SVG -tiedostoon. Tarkista varsinainen vektori kohdesivullasi ennen kuin korvaat olemassa olevan tuotanto-omaisuuden.
Yksi tiedosto latautuu nimellä SVG alkuperäisellä perusnimellään. Erä latautuu yhtenä ZIP-tiedostona, jossa on numeroidut jälkiliitteet päällekkäisille tiedostonimille. Käsittely tapahtuu selaimessa. Säilytä alkuperäinen lähde, jos haluat kokeilla eri optimointiasetuksia myöhemmin.
Tiedostokoon säästöt mitataan vain tätä näytettä vasten. Jo optimoitu SVG saattaa osoittaa vain vähän parannusta tai muuttua hieman suuremmaksi.
Yleisiä kysymyksiä
Näyttääkö optimoitu SVG täsmälleen samalta?
Optimoijan tavoitteena on säilyttää staattinen ulkoasu, mutta pyöristäminen ja tukemattoman sisällön poistaminen voivat muuttaa tiedostoa. Vertaa esikatseluita ja testaa tallennettua SVG-tiedostoa projektissasi.
Mitä desimaalitarkkuus muuttaa?
Se säätelee numeerisessa geometriassa ja polkutiedoissa käytettävää tarkkuutta. Pienemmät arvot voivat pienentää kokoa, mutta saattavat siirtää hienoja yksityiskohtia. Oletusarvo on 3.
Säilyttääkö se otsikon ja kuvauksen?
Kyllä, oletuksena. Jätä kohta Säilytä esteettömät otsikot ja kuvaukset käyttöön, jotta nämä SVG elementit säilyvät.
Miksi skriptit tai rasterikuvat puuttuvat?
Tämä työkalu luo staattisen vektoritulosteen. Skriptit, tapahtumat, ulkoiset resurssit, animaatiot ja upotetut rasterikuvat poistetaan tarkoituksella puhdistuksen aikana.
Voinko säilyttää CSS:n viittaamat tunnisteet?
Poista käytöstä Lyhennä sisäisiä tunnisteita, jos ulkoinen koodi riippuu tietyistä tunnisteista. Tarkista optimoitu tiedosto kohdesivulla ennen alkuperäisen korvaamista.
Ladataanko SVG-tiedostot palvelimelle optimointia varten?
Ei. Työkalu suorittaa jäsennyksen ja optimoinnin selaimessa ja lataa tuloksen paikallisesti.
Voinko ladata SVG-tiedoston, jossa on DOCTYPE?
Standardi SVG-asiakirjan määritys hyväksytään ja poistetaan hakematta sen ulkoista tunnistetta. Mukautetut entiteettimääritykset ja sisäiset asiakirjaosajoukot hylätään.
Tee vektorista kevyempi, tuloksella jonka voit tarkastaa.
Kokeile näytettä tai käytä omaa tiedostoasi ja tarkista tulos ennen jakamista.
