SVG optimeerija

SVG-failide struktuur ja optimeerimise vajadus veebis

Skaleeritav vektorgraafika (SVG) on XML-põhine vorming, mis kirjeldab kahemõõtmelist graafikat tekstina. Erinevalt rastergraafikast (nagu PNG või JPEG) koosneb SVG koodiridadest, mis määravad kujundid, jooned, värvid ja positsioonid. Kuna tegemist on tekstifailiga, sisaldab see sageli palju sellist teavet, mis ei mõjuta pildi visuaalset kuvamist veebibrauseris.

Graafikaprogrammid (näiteks Adobe Illustrator, Inkscape või Figma) lisavad faili eksportimisel oma metaandmeid, redaktori nimeruume, kommentaare ja tühikuid. Veebis kasutamisel suurendavad need elemendid faili mahtu ja aeglustavad lehe laadimisaega. SVG optimeerimine on protsess, mille käigus eemaldatakse koodist üleliigsed andmed ilma graafika välimust muutmata. See on eriti oluline reasisese (inline) SVG puhul, kus kood on kirjutatud otse HTML-dokumendi sisse, mõjutades otseselt dokumendi üldist suurusnäitajat ja brauseri parsimiskiirust.

Kuidas SVG optimeerija töötab

Tööriist võimaldab puhastada ja tihendada SVG-koodi otse veebibrauseris. Kasutaja asetab SVG-koodi sisendväljale ning rakendus töötleb seda reaalajas, eemaldades mittevajalikud koodiosad.

Lubatud ja blokeeritud sisendvormingud

Tööriist võtab vastu tavalist reasisest (inline) SVG-koodi. Turvalisuse ja stabiilsuse tagamiseks kehtivad sisendile järgmised piirangud:

• Märkide limiit: SVG-kood peab jääma lubatud maksimaalse pikkuse piiridesse. Kui kood ületab limiidi, kuvatakse tõrge: "See SVG on selle tööriista jaoks liiga suur. Hoidke see alla {max} märgi.".
• Dokumenditüübid ja kohandatud olemid: SVG-failid, mis sisaldavad dokumenditüübi (doctype) või kohandatud olemite (custom entity) deklaratsioone, blokeeritakse. Sellise sisendi puhul kuvatakse veateade: "See SVG kasutab dokumenditüüpi või kohandatud olemit. Eemaldage see enne optimeerimist.". See piirang on vajalik XML-olemite parsimisega seotud turvariskide vältimiseks.

Optimeerimise reeglid ja kadudeta puhastamine

Tööriist teostab niinimetatud kadudeta (lossless) optimeerimist, mis tähendab, et faili mahtu vähendatakse ilma pildikvaliteeti või geomeetriat ohverdamata.

Tööriist eemaldab koodist järgmised elemendid:

• Kommentaarid ja metaandmed
• Redaktori nimeruumid ja kasutamata nimeruumid
• Atribuutide liigsed tühikud
• Värvikoodide pikad vormingud, asendades need lühemate samaväärsete koodidega (näiteks #ffffff asendatakse lühendiga #fff)

Selleks, et graafika säilitaks oma täpse kuju ja funktsionaalsuse, jäetakse muutmata:

• Atribuut viewBox
• Elementide unikaalsed ID-d ja sildid
• Kujundite geomeetria
• Teekondade (paths) ümberkirjutamine, ID-de ümbernimetamine ja täpsuse ümardamine on välistatud, et vältida visuaalseid moonutusi

Tööriista liides ja tulemuste tõlgendamine

Kasutajaliides pakub selget ülevaadet saavutatud säästust ja võimaldab optimeeritud koodi kohest kasutuselevõttu.

Suuruse statistika ja teavitused

Pärast koodi töötlemist kuvatakse järgmised andmed:

• Algne: Algse SVG suurus baitides.
• Väljund: Optimeeritud SVG suurus baitides.
• Säästetud: Vähenemine baitides ja protsentides.

Sõltuvalt optimeerimise tulemusest kuvab liides vastava teate:

• Eduka tihendamise korral kuvatakse teade: "Optimeeritud — {pct}% väiksem (säästetud {saved}).".
• Kui fail oli juba eelnevalt täielikult optimeeritud ja maht ei vähenenud, kuvatakse teade: "Optimeeritud. Turvalise puhastuse seadetega faili suurus ei vähenenud.".

Veatuvastus ja eriolukorrad

Tööriist tuvastab sisestatud koodi vigasid ja töötlemise probleeme järgmiselt:

• Kui kasutaja üritab optimeerida tühja sisendit, kuvatakse teade: "Kõigepealt asetage siia SVG-kood.".
• Kui sisestatud tekst ei sisalda SVG-elementi, kuvatakse teade: "Elementi <svg> ei leitud.".
• Kui optimeerimisprotsess võtab liiga kaua aega (üle 15 sekundi), katkestatakse see automaatselt ja kuvatakse teade: "See võttis liiga kaua aega ja peatati – proovige väiksemat SVG-d.".
• Üldiste parsimisvigade korral kuvatakse teade: "Seda SVG-d ei saanud optimeerida.".

Sisendi tühjendamine või uue koodi sisestamine katkestab koheselt käimasoleva optimeerimisprotsessi.

Privaatsus ja andmetöötlus

Teie SVG-kood optimeeritakse otse teie brauseris. Midagi ei laadita BroBroGo serverisse. Kuna kogu andmetöötlus toimub lokaalselt kasutaja seadmes, ei edastata failide sisu ega koodi üle võrgu välistele osapooltele.

Korduma kippuvad küsimused

Mida see eemaldab?
See eemaldab kommentaarid, metaandmed, redaktori nimeruume, atribuutide liigsed tühikud, kasutamata nimeruumid ja lühendab värvikoode. See jätab viewBox-i, ID-d, sildid ja geomeetria muutmata.

Kas see suudab optimeerida iga SVG-d?
See toetab tavalist reasisest (inline) SVG-koodi. Dokumenditüübi (doctype) või kohandatud olemite deklaratsioonidega SVG-d on blokeeritud, kuna need võivad muuta parsimise ebaturvaliseks. Eemaldage need deklaratsioonid ja proovige uuesti.

Kas see muudab graafika välimust?
Optimeerija väldib teekondade (paths) ümberkirjutamist, ID-de ümbernimetamist, viewBox-i eemaldamist ja täpsuse ümardamist. Kui teie SVG tugineb disainiprotsessis kommentaaridele või metaandmetele, hoidke algfailist koopia alles.

Miks kuvatakse teade, et faili suurus ei vähenenud?
Kui sisestatud SVG on juba eelnevalt käsitsi või teiste tööriistade abil puhastatud ning ei sisalda üleliigseid metaandmeid, tühikuid ega kommentaare, ei saa tööriist turvalise puhastuse reegleid rakendades faili mahtu rohkem vähendada. Sellisel juhul kuvatakse teade: "Optimeeritud. Turvalise puhastuse seadetega faili suurus ei vähenenud.".