Ar mano SVG įkeliamas į serverį?

Ne. SVGO veikia tavo naršyklėje. Vienintelis atsisiuntimas yra paties optimizatoriaus kodas, pirmą kartą optimizuojant.

Kodėl peržiūra rodoma kaip vaizdai?

SVG yra dokumento formatas, kuriame gali būti JavaScript ir kuris gali įkelti išorinius failus. Abi peržiūros atvaizduojamos kaip <img iš vietinių blob adresų, o tokiu režimu naršyklės niekada nevykdo scenarijų ir neįkelia išorinių išteklių, todėl čia saugu peržiūrėti nepatikimą SVG. Pats optimizuotas kodas vis tiek išlaiko visus scenarijus, nebent įjungta Pašalinti scenarijus ir įvykių atributus ji įjungta šablone Maksimalus .

Mano optimizuotas SVG nebekeičia mastelio. Kas nutiko?

Greičiausiai viewBox buvo pašalintas arba per Pašalinti viewBox , arba anksčiau kitu įrankiu. Optimizuok originalą iš naujo išjungęs tą papildinį.

Kodėl mano piktogramų sprite ar animacija nustojo veikti?

Trumpinti ir šalinti nenaudojamus ID arba Sujungti kontūrus pakeitė elementus, į kuriuos kreipiasi tavo kodas. Naudok šabloną Saugus , kuris palieka abu.

Optimizuotas failas nėra mažesnis. Kodėl?

SVG greičiausiai jau sumažintas. Išbandyk Maksimalus arba mažesnį Dešimtainių skaičių tikslumas ir išjunk Gražus formatavimas su įtraukomis .

SVG optimizatorius internete – sumažink SVG kodą

Optimizuok ir sumažink SVG failus internete su SVGO tiesiog naršyklėje. Pasirink šabloną, palygink rezultatą akimis ir pamatyk dydžio bei gzip sutaupymą.

Kaip optimizuoti SVG

Nutempk SVG failą į sritį arba spustelėk ją ir pasirink failą. Taip pat gali įklijuoti kodą į lauką SVG kodas.
Pasirink Šablonas: Saugus, Subalansuotas (numatytasis) arba Maksimalus. Žemiau esantis sąrašas Papildiniai tiksliai parodo, kuriuos žingsnius kiekvienas šablonas įjungia.
Prireikus pakoreguok: Dešimtainių skaičių tikslumas (nuo 0 iki 8 skaitmenų), Keli perėjimai ir Gražus formatavimas (su įtraukomis), jei nori skaitomo kodo. Vos pakeitus papildinį, tikslumą ar perėjimus, šablonas persijungia į Pasirinktinis.
Spustelėk Optimizuoti SVG. Nutemptas failas optimizuojamas iš karto, o kai rezultatas jau yra, kiekvienas nuostatų pakeitimas optimizavimą paleidžia automatiškai.
Patikrink Originalo dydis, Optimizuoto dydis, Sutaupyta ir Suspaustas gzip skaičius, tada palygink abu piešinius greta.
Spustelėk Kopijuoti, kad nukopijuotum Optimizuotas SVG kodas, arba Atsisiųsti optimizuotą SVG, kad išsaugotum jį kaip pavadinimas.min.svg.

Optimizavimą atlieka SVGO 4 – standartinis atvirojo kodo (MIT) SVG optimizatorius, naudojamas daugelyje žiniatinklio kūrimo įrankių. Jo naršyklės versija įkeliama pirmą kartą spustelėjus ir veikia visiškai tavo įrenginyje: tavo SVG niekada neįkeliamas.

Kodėl dizaino įrankių SVG failai tokie sunkūs

Iš „Illustrator“, „Inkscape“, „Figma“ ar „Sketch“ eksportuotas SVG neša kur kas daugiau nei patį piešinį. Redaktoriai prideda savo vardų sritis ir atributus (sluoksnių pavadinimus, kreiptuvus, eksporto nuostatas), bloką <metadata>, komentarus, pavyzdžiui, „Generator: Adobe Illustrator“, koordinates su šešiais ar daugiau dešimtainių ženklų, grupes su vienu elementu ir ilgas spalvų žymas, tokias kaip #ffffff. Nė viena iš šių dalių nekeičia to, ką piešia naršyklė. SVGO jas pašalina, apvalina skaičius, perrašo kontūrų duomenis trumpesnėmis komandomis, sutrumpina spalvas ir sujungia ar išskleidžia perteklinius elementus. Eksportuotoms piktogramoms ir iliustracijoms įprastas 40–60 % sumažėjimas.

Šablonai ir rizikingi papildiniai

Saugus paleidžia numatytąjį SVGO šabloną, bet palieka ID, <desc>, atskirus kontūrus ir <style> taisykles, su 3 dešimtainiais ženklais ir vienu perėjimu. Naudok jį SVG, į kuriuos kreipiamasi iš CSS ar JavaScript, sprite ir animacijoms.
Subalansuotas yra numatytasis SVGO šablonas, 3 dešimtainiai ženklai, keli perėjimai. Tinka daugumai piktogramų ir iliustracijų, rodomų kaip vaizdai.
Maksimalus prideda Pašalinti </strong>, <strong>Pašalinti scenarijus ir įvykių atributus</strong>, <strong>Pašalinti width/height (palikti viewBox)</strong> ir <strong>Pakeisti xlink:href į href</strong>, su 2 dešimtainiais ženklais ir keliais perėjimais.</li> </ul> <p>Joks šablonas nešalina viewBox. <strong>Pašalinti viewBox</strong> skirtas tik ypatingiems atvejams: be jo piešinys nebegali keisti mastelio iki dydžio, kurį nurodai CSS.</p> <p>Žinok, ką gali sugadinti kiti papildiniai:</p> <ul> <li><strong>Trumpinti ir šalinti nenaudojamus ID</strong> pervadina ID, tokius kaip <code>#icon-home</code>, į <code>a</code>. Bet koks CSS selektorius, JavaScript užklausa, <code><use href="#…"></code> sprite nuoroda, puslapio inkaras ar SMIL/CSS animacija, nukreipta į senąjį pavadinimą, nustoja veikti.</li> <li><strong>Pašalinti <title></strong> ir <strong>Pašalinti <desc></strong> ištrina prieinamą pavadinimą ir aprašą. Palik juos reikšmingoms piktogramoms ir diagramoms, kurias turi paskelbti ekrano skaitytuvai.</li> <li>Žemas <strong>Dešimtainių skaičių tikslumas</strong> gali deformuoti mažas piktogramas: kreivės svyruoja, o kraštai nukrypsta. Visada patikrink vaizdinį palyginimą; 3 yra saugi numatytoji reikšmė.</li> <li><strong>Sujungti kontūrus</strong> sujungia gretimus kontūrus į vieną, todėl užvedimo efektas ar animacija, nukreipta į vieną kontūrą, praranda taikinį.</li> </ul> <h2>Patarimai</h2> <ul> <li>Redagavimui pasilik neoptimizuotą pagrindinę kopiją; <code>.min.svg</code> traktuok kaip sukompiliuotą kodą.</li> <li>Įjunk gzip arba brotli savo serveryje: tekstiniai formatai, tokie kaip SVG, suspaudžiami labai gerai, o skaičius <strong>Suspaustas gzip</strong> rodo, ką lankytojai iš tikrųjų atsisiunčia (rodomas, kai naršyklė palaiko <code>CompressionStream</code>).</li> <li>Įterptas SVG gali būti stilizuojamas CSS ir animuojamas, bet neįrašomas į podėlį atskirai; SVG žymoje <code><img></code> įrašomas į podėlį, bet jo negalima stilizuoti iš puslapio.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Dažnai užduodami klausimai</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Ar mano SVG įkeliamas į serverį?</summary> <div class="prose px-5 pb-5"><p>Ne. SVGO veikia tavo naršyklėje. Vienintelis atsisiuntimas yra paties optimizatoriaus kodas, pirmą kartą optimizuojant.</p></div> </details> <details class="faq group"> <summary>Kodėl peržiūra rodoma kaip vaizdai?</summary> <div class="prose px-5 pb-5"><p>SVG yra dokumento formatas, kuriame gali būti JavaScript ir kuris gali įkelti išorinius failus. Abi peržiūros atvaizduojamos kaip <code><img></code> iš vietinių blob adresų, o tokiu režimu naršyklės niekada nevykdo scenarijų ir neįkelia išorinių išteklių, todėl čia saugu peržiūrėti nepatikimą SVG. Pats optimizuotas kodas vis tiek išlaiko visus scenarijus, nebent įjungta <strong>Pašalinti scenarijus ir įvykių atributus</strong> (ji įjungta šablone <strong>Maksimalus</strong>).</p></div> </details> <details class="faq group"> <summary>Mano optimizuotas SVG nebekeičia mastelio. Kas nutiko?</summary> <div class="prose px-5 pb-5"><p>Greičiausiai viewBox buvo pašalintas arba per <strong>Pašalinti viewBox</strong>, arba anksčiau kitu įrankiu. Optimizuok originalą iš naujo išjungęs tą papildinį.</p></div> </details> <details class="faq group"> <summary>Kodėl mano piktogramų sprite ar animacija nustojo veikti?</summary> <div class="prose px-5 pb-5"><p><strong>Trumpinti ir šalinti nenaudojamus ID</strong> arba <strong>Sujungti kontūrus</strong> pakeitė elementus, į kuriuos kreipiasi tavo kodas. Naudok šabloną <strong>Saugus</strong>, kuris palieka abu.</p></div> </details> <details class="faq group"> <summary>Optimizuotas failas nėra mažesnis. Kodėl?</summary> <div class="prose px-5 pb-5"><p>SVG greičiausiai jau sumažintas. Išbandyk <strong>Maksimalus</strong> arba mažesnį <strong>Dešimtainių skaičių tikslumas</strong> ir išjunk <strong>Gražus formatavimas (su įtraukomis)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Susiję įrankiai</h2> <ul class="card-grid mt-4"><li><a class="card" href="/lt/svg-i-png/"> <span class="card-title">SVG į PNG keitiklis</span> <span class="card-text">Konvertuok SVG į PNG, JPG ar WebP naršyklėje bet kokiu pločiu, aukščiu, masteliu ar DPI, su permatomu ar spalvotu fonu. Keli failai ir ZIP, be įkėlimo.</span> </a></li> <li><a class="card" href="/lt/vaizdas-i-svg/"> <span class="card-title">Vaizdas į SVG vektorizatorius</span> <span class="card-text">Konvertuok PNG ar JPG logotipą ar piešinį į SVG vektorinius kontūrus naršyklėje. Šablonai, spalvų skaičius, dėmelių filtras, saugi peržiūra, be įkėlimo.</span> </a></li> <li><a class="card" href="/lt/vaizdu-glaudinimas/"> <span class="card-title">Vaizdų glaudinimas</span> <span class="card-text">Suglaudink JPG, PNG ir WebP vaizdus su kokybės slankikliu, palygink dydžius prieš ir po bei apdorok daug nuotraukų iš karto, jų neįkeldamas į serverį.</span> </a></li> <li><a class="card" href="/lt/css-formatuotojas/"> <span class="card-title">CSS formatuotojas ir minimizatorius</span> <span class="card-text">Sutvarkyk netvarkingą CSS su tvarkinga įtrauka arba minimizuok jį su csso ir pamatyk dydį prieš ir po. Veikia naršyklėje, nieko neįkeliama.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Reklama"><span class="ad-label">Reklama</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Nemokami internetiniai įrankiai, veikiantys tavo naršyklėje. Tavo duomenys lieka tavo įrenginyje.</p> </div> <nav aria-label="Kategorijos"> <p class="font-semibold">Įrankiai</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/lt/teksto-irankiai/">Teksto įrankiai</a></li><li><a class="link-muted" href="/lt/programuotojo-irankiai/">Programuotojo įrankiai</a></li><li><a class="link-muted" href="/lt/interneto-seo-rinkodara/">Svetainės, SEO ir rinkodara</a></li><li><a class="link-muted" href="/lt/spalvos-ir-dizainas/">Spalvos ir dizainas</a></li><li><a class="link-muted" href="/lt/vaizdai-ir-nuotraukos/">Vaizdai ir nuotraukos</a></li><li><a class="link-muted" href="/lt/pdf-ir-dokumentai/">PDF ir dokumentai</a></li><li><a class="link-muted" href="/lt/matematikos-skaiciuokles/">Matematikos skaičiuoklės</a></li><li><a class="link-muted" href="/lt/finansu-skaiciuokles/">Finansų skaičiuoklės</a></li><li><a class="link-muted" href="/lt/data-ir-laikas/">Data ir laikas</a></li><li><a class="link-muted" href="/lt/vienetu-keitikliai/">Vienetų keitikliai</a></li><li><a class="link-muted" href="/lt/sveikata-ir-sportas/">Sveikata ir sportas</a></li><li><a class="link-muted" href="/lt/namai-virtuve-auto/">Namai, remontas, virtuvė ir auto</a></li><li><a class="link-muted" href="/lt/generatoriai/">Generatoriai</a></li><li><a class="link-muted" href="/lt/irenginiu-testai/">Įrenginių ir naršyklės testai</a></li><li><a class="link-muted" href="/lt/garso-ir-vaizdo-irankiai/">Garso ir vaizdo įrankiai</a></li><li><a class="link-muted" href="/lt/svietimas-ir-kalbos/">Švietimas ir kalbos</a></li><li><a class="link-muted" href="/lt/zaidimai/">Žaidimai</a></li></ul> </nav> <nav aria-label="Informacija"> <p class="font-semibold">Informacija</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/lt/apie-mus/">Apie mus</a></li> <li><a class="link-muted" href="/lt/kontaktai/">Kontaktai</a></li> <li><a class="link-muted" href="/lt/privatumo-politika/">Privatumo politika</a></li> <li><a class="link-muted" href="/lt/naudojimo-salygos/">Naudojimo sąlygos</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>