SVG failų struktūra ir optimizavimo poreikis
Skirtingai nuo taškinės grafikos formatų, tokių kaip PNG ar JPEG, SVG (angl. Scalable Vector Graphics) yra tekstinis XML formato failas. Jame visi grafiniai elementai – linijos, kreivės, apskritimai ir spalvos – aprašomi kodu. Kuriant vektorinę grafiką tokiomis programomis kaip „Adobe Illustrator“, „Inkscape“ ar „Figma“, į galutinį kodą dažnai įrašoma daug papildomos informacijos, kuri nėra reikalinga pačiam vaizdui naršyklėje atvaizduoti.
Šie pertekliniai duomenys apima redaktorių metaduomenis, kūrimo programų vardų erdves, komentarus ir neoptimaliai suformatuotus atributus. SVG optimizavimo įrankis leidžia išvalyti šį kodą pašalinant nereikalingus elementus, tačiau išlaikant vizualinį vientisumą. Tai tiesiogiai sumažina failo dydį baitais, o tai yra svarbu moderniam tinklalapių kūrimui.
Kodėl SVG failų dydis svarbus svetainių našumui
Svetainės krovimosi greitis yra vienas iš pagrindinių naudotojų patirties ir paieškos sistemų optimizavimo (SEO) veiksnių. Dideli, neoptimizuoti SVG failai gali sulėtinti puslapio atvaizdavimą, ypač mobiliuosiuose įrenginiuose su lėtesniu interneto ryšiu.
Naudojant įterptinį (angl. inline) SVG kodą tiesiai HTML dokumente, kiekvienas papildomas baitas padidina bendrą HTML dokumento svorį. Tai stabdo pirminį puslapio analizavimą (angl. parsing). Optimizuoti SVG failai užtikrina greitesnį naršyklės darbą, mažesnį sunaudojamų duomenų kiekį ir sklandesnę naudotojo sąveiką su svetaine.
Saugus ir „be nuostolių“ atliekamas kodo valymas
Šis įrankis atlieka saugų SVG kodo valymą, kuris veikia „be nuostolių“ (angl. lossless) principu. Tai reiškia, kad kodo apimtis sumažinama nekeičiant paties grafinio vaizdo struktūros ar kokybės.
Siekdamas išvengti vizualinių iškraipymų, įrankis taiko griežtas taisykles:
- Išlaikoma geometrija ir koordinatės: įrankis vengia perrašyti vektorių kelius (paths) ir neapvalina koordinačių tikslumo, kas dažnai sugadina smulkias detales.
- Išsaugomi identifikatoriai: visi ID ir etiketės (labels) lieka nepakeisti, todėl išlieka veikiantys CSS stiliai ir „JavaScript“ skriptai, susieti su konkrečiais SVG elementais.
- Išlaikomas viewBox: kadravimo ir mastelio keitimo informacija (viewBox) nėra šalinama, todėl grafika išlieka visiškai pritaikoma įvairiems ekranų dydžiams.
Valymo proceso metu pašalinami tik tie elementai, kurie neturi įtakos galutiniam vaizdui: komentarai, metaduomenys, redaktorių vardų erdvės (namespaces), papildomi tarpai tarp atributų bei nenaudojamos vardų erdvės. Taip pat spalvų kodai pakeičiami į jų trumpesnius ekvivalentus, jei tokie egzistuoja.
Saugumo aspektai ir XML subjektų apdorojimas
SVG failai yra pagrįsti XML formatu, todėl jie gali būti pažeidžiami tam tikromis saugumo grėsmėmis, pavyzdžiui, išorinių subjektų įterpimu (angl. XML External Entity arba XXE). Siekiant apsaugoti naudotojus, šis įrankis blokuoja SVG failus, kuriuose naudojamos dokumento tipo (doctype) arba pasirinktinių subjektų (custom entity) deklaracijos.
Jei bandoma įkelti tokį failą, sistema sustabdo procesą ir parodo pranešimą: „Šiame SVG naudojamas dokumento tipas (doctype) arba pasirinktiniai subjektai (entities). Pašalinkite juos prieš optimizuodami.“. Tai užkerta kelią kenkėjiško kodo vykdymui analizavimo metu.
Privatumas ir vietinis apdorojimas
Naudojantis šiuo įrankiu, jūsų duomenų privatumas yra visiškai užtikrinamas vietiniu apdorojimu. SVG kodas yra optimizuojamas tiesiog jūsų naršyklėje. Nieko nesiunčiama į „BroBroGo“ serverius. Visos operacijos, kodo analizė ir valymas vyksta jūsų įrenginio atmintyje, todėl jokie konfidencialūs dizaino elementai ar kodo fragmentai nepasiekia išorinių tinklų.
Įrankio naudojimas ir klaidų pranešimai
Norėdami optimizuoti SVG, tiesiog įklijuokite kodą į laukelį „SVG įvestis“ ir spustelėkite „Optimizuoti“. Baigus darbą, sistema pateiks statistiką: originalų dydį baitais („Originalas“), gautą dydį („Rezultatas“) ir sutaupytą vietą („Sutaupyta“).
Apdorojimo metu galite susidurti su šiais pranešimais ir klaidomis:
- Optimizuota –
{pct}% mažesnis failas (sutaupyta{saved}). – sėkmingo optimizavimo pranešimas, rodantis procentinį ir baitų skirtumą. - Optimizuota. Naudojant saugųjį valymą failo dydis nesumažėjo. – rodoma, kai įvestas SVG jau buvo maksimaliai optimizuotas.
- Pirmiausia įklijuokite SVG kodą. – rodoma, jei bandoma optimizuoti tuščią įvesties lauką.
- Nerastas joks <svg> elementas. – rodoma, jei įvestame tekste nėra SVG elementų.
- Šis SVG yra per didelis šiam įrankiui. Failas neturi viršyti
{max}simbolių. – rodoma viršijus nustatytą simbolių limitą. - Apdorojimas užtruko per ilgai ir buvo sustabdytas – bandykite su mažesniu SVG. – rodoma, jei optimizavimo procesas trunka ilgiau nei 15 sekundžių.
- Nepavyko optimizuoti šio SVG. – bendroji klaida, jei kodo struktūra yra sugadinta.
Jei pakeisite įvestį arba išvalysite lauką mygtuku „Išvalyti“, bet koks fone vykstantis optimizavimo procesas bus iškart nutrauktas.
Dažniausiai užduodami klausimai (DUK)
Ką šis įrankis pašalina?
Jis pašalina komentarus, metaduomenis, redaktorių vardų erdves (namespaces), papildomus tarpus tarp atributų, nenaudojamas vardų erdves ir sutrumpina spalvų kodus iki trumpesnių ekvivalentų. „viewBox“, ID, etiketės ir geometrija išlieka nepaliesti.
Ar galima optimizuoti bet kurį SVG failą?
Jis apdoroja įprastą įterptinį (inline) SVG kodą. SVG failai su dokumento tipo (doctype) arba pasirinktinių subjektų (custom entity) deklaracijomis yra blokuojami, nes jie gali kelti saugumo grėsmę analizavimo metu. Pašalinkite šias deklaracijas ir bandykite dar kartą.
Ar pasikeis grafinio elemento išvaizda?
Optimizavimo įrankis vengia perrašyti vektorių kelius (paths), pervadinti ID, šalinti „viewBox“ ar apvalinti koordinačių tikslumą. Jei jūsų SVG dizaino procese naudojami komentarai ar metaduomenys, pasilikite originalo kopiją.
Kur vyksta SVG kodo apdorojimas?
Jūsų SVG kodas optimizuojamas tiesiog naršyklėje. Nieko nesiunčiama į „BroBroGo“ serverius, todėl jūsų duomenys lieka jūsų įrenginyje.