Utilia

SVG optimizētājs tiešsaistē

Optimizējiet un samaziniet SVG failus tiešsaistē ar SVGO pārlūkprogrammā. Izvēlieties sagatavi, vizuāli salīdziniet rezultātu un redziet izmēra ietaupījumu.

Spraudņi

Noņemot viewBox, zīmējums vairs nemērogojas, bet ID saīsināšana vai noņemšana sabojā CSS, JavaScript, <use> vai enkura saites, kas uz tiem atsaucas. SVG failiem, ko izmanto kodā, sprite lapās vai animācijās, izmantojiet Drošo sagatavi.

Kā optimizēt SVG

  1. Ievelciet SVG failu nolaišanas zonā vai noklikšķiniet uz tās, lai to izvēlētos. Marķējumu varat arī ielīmēt lodziņā SVG kods.
  2. Izvēlieties Sagatave: Droša, Līdzsvarota (noklusējums) vai Maksimāla. Zemāk redzamais saraksts Spraudņi precīzi parāda, kuras darbības katra sagatave ieslēdz.
  3. Vajadzības gadījumā pielāgojiet: Decimāldaļu precizitāte (no 0 līdz 8 cipariem), Vairāki piegājieni un Strukturēts izvades formāts (ar atkāpēm), ja vēlaties lasāmu kodu. Tiklīdz mainīsiet spraudni, precizitāti vai piegājienus, sagatave pārslēdzas uz Pielāgota.
  4. Noklikšķiniet uz Optimizēt SVG. Ievilkts fails tiek optimizēts uzreiz, un, kad rezultāts jau ir, katra iestatījuma maiņa automātiski atkārto optimizāciju.
  5. Pārbaudiet skaitļus Oriģinālais izmērs, Optimizētais izmērs, Ietaupījums un Ar gzip, pēc tam salīdziniet abus zīmējumus blakus.
  6. Noklikšķiniet uz Kopēt, lai nokopētu Optimizētais SVG kods, vai uz Lejupielādēt optimizēto SVG, lai to saglabātu kā name.min.svg.

Optimizāciju veic SVGO 4 – standarta atvērtā koda (MIT) SVG optimizētājs, ko izmanto lielākajā daļā tīmekļa būvēšanas rīku. Tā pārlūkprogrammas versija tiek ielādēta pirmajā klikšķī, un tā darbojas pilnībā jūsu ierīcē: jūsu SVG netiek augšupielādēts.

Kāpēc SVG faili no dizaina rīkiem ir tik smagi

No Illustrator, Inkscape, Figma vai Sketch eksportēts SVG satur daudz vairāk nekā tikai zīmējumu. Redaktori pievieno savus nosaukumvietas un atribūtus (slāņu nosaukumus, palīglīnijas, eksporta iestatījumus), bloku <metadata>, komentārus, piemēram, „Generator: Adobe Illustrator“, koordinātas ar sešām vai vairāk decimāldaļām, grupas, kurās ir viens elements, un daudzvārdīgas krāsas, piemēram, #ffffff. Nekas no tā nemaina to, ko zīmē pārlūkprogramma. SVGO to noņem, noapaļo skaitļus, pārraksta ceļu datus ar īsākām komandām, saīsina krāsas un apvieno vai atver lieko elementus. Eksportētām ikonām un ilustrācijām 40–60 % samazinājums ir parasta lieta.

Sagataves un riskantie spraudņi

  • Droša darbina SVGO noklusējuma sagatavi, bet patur ID, <desc>, atsevišķus ceļus un <style> noteikumus, ar 3 decimāldaļām un vienu piegājienu. Izmantojiet to SVG, uz kuriem atsaucas CSS vai JavaScript, sprite lapām un animācijām.
  • Līdzsvarota ir SVGO noklusējuma sagatave, 3 decimāldaļas, vairāki piegājieni. Tā der lielākajai daļai ikonu un ilustrāciju, kas tiek rādītas kā attēli.
  • Maksimāla pievieno Noņemt </strong>, <strong>Noņemt skriptus un notikumu atribūtus</strong>, <strong>Noņemt width/height (paturēt viewBox)</strong> un <strong>Aizstāt xlink:href ar href</strong>, ar 2 decimāldaļām un vairākiem piegājieniem.</li> </ul> <p>Neviena sagatave nenoņem viewBox. <strong>Noņemt viewBox</strong> ir paredzēts tikai īpašiem gadījumiem: bez tā zīmējums vairs nevar mērogoties līdz izmēram, ko tam norādāt CSS.</p> <p>Zināt, ko var sabojāt pārējie spraudņi:</p> <ul> <li><strong>Saīsināt un noņemt neizmantotos ID</strong> pārdēvē ID, piemēram, <code>#icon-home</code>, par <code>a</code>. Jebkurš CSS selektors, JavaScript vaicājums, <code><use href="#…"></code> sprite atsauce, lapas enkurs vai SMIL/CSS animācija, kas vērsta uz veco nosaukumu, pārstāj darboties.</li> <li><strong>Noņemt <title></strong> un <strong>Noņemt <desc></strong> dzēš pieejamības nosaukumu un aprakstu. Paturiet tos nozīmīgām ikonām un diagrammām, kas ekrāna lasītājiem jāizsaka.</li> <li>Zema <strong>Decimāldaļu precizitāte</strong> var deformēt mazas ikonas: līknes sašūpojas un malas novirzās. Vienmēr pārbaudiet vizuālo salīdzinājumu; 3 ir droša noklusējuma vērtība.</li> <li><strong>Apvienot ceļus</strong> apvieno blakus esošus ceļus vienā, tāpēc pārejas efekts vai animācija, kas bija vērsta uz vienu ceļu, zaudē savu mērķi.</li> </ul> <h2>Padomi</h2> <ul> <li>Paturiet neoptimizētu oriģinālu rediģēšanai; <code>.min.svg</code> uztveriet kā kompilētu kodu.</li> <li>Ieslēdziet gzip vai brotli savā serverī: teksta formāti, piemēram, SVG, saspiežas ļoti labi, un skaitlis <strong>Ar gzip</strong> parāda to, ko apmeklētāji patiesībā lejupielādē (tiek rādīts, ja jūsu pārlūkprogramma atbalsta <code>CompressionStream</code>).</li> <li>Iekļautu SVG var stilizēt ar CSS un animēt, taču tas netiek kešots atsevišķi; SVG elementā <code><img></code> tiek kešots, bet to nevar stilizēt no lapas.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Biežāk uzdotie jautājumi</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Vai mans SVG tiek augšupielādēts serverī?</summary> <div class="prose px-5 pb-5"><p>Nē. SVGO darbojas jūsu pārlūkprogrammā. Vienīgā lejupielāde ir paša optimizētāja kods pirmajā optimizēšanas reizē.</p></div> </details> <details class="faq group"> <summary>Kāpēc priekšskatījums tiek rādīts kā attēli?</summary> <div class="prose px-5 pb-5"><p>SVG ir dokumenta formāts, kas var saturēt JavaScript un ielādēt ārējus failus. Abi priekšskatījumi tiek attēloti kā <code><img></code> no lokālām blob adresēm, un šādā režīmā pārlūkprogrammas nekad neizpilda skriptus un neielādē ārējus resursus, tāpēc neuzticama SVG priekšskatīšana šeit ir droša. Pats optimizētais kods joprojām satur visus skriptus, ja vien nav ieslēgts <strong>Noņemt skriptus un notikumu atribūtus</strong> (tas ir ieslēgts sagatavē <strong>Maksimāla</strong>).</p></div> </details> <details class="faq group"> <summary>Mans optimizētais SVG vairs nemērogojas. Kas notika?</summary> <div class="prose px-5 pb-5"><p>Visticamāk, viewBox tika noņemts vai nu ar <strong>Noņemt viewBox</strong>, vai agrāk ar citu rīku. Optimizējiet oriģinālu vēlreiz ar izslēgtu šo spraudni.</p></div> </details> <details class="faq group"> <summary>Kāpēc mana ikonu sprite lapa vai animācija pārstāja darboties?</summary> <div class="prose px-5 pb-5"><p><strong>Saīsināt un noņemt neizmantotos ID</strong> vai <strong>Apvienot ceļus</strong> mainīja elementus, uz kuriem atsaucas jūsu kods. Izmantojiet <strong>Droša</strong> sagatavi, kas patur abus.</p></div> </details> <details class="faq group"> <summary>Optimizētais fails nav mazāks. Kāpēc?</summary> <div class="prose px-5 pb-5"><p>SVG, visticamāk, jau ir samazināts. Izmēģiniet <strong>Maksimāla</strong> vai zemāku <strong>Decimāldaļu precizitāte</strong> un izslēdziet <strong>Strukturēts izvades formāts (ar atkāpēm)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Saistītie rīki</h2> <ul class="card-grid mt-4"><li><a class="card" href="/lv/svg-uz-png/"> <span class="card-title">SVG uz PNG konvertētājs</span> <span class="card-text">Konvertējiet SVG uz PNG, JPG vai WebP pārlūkprogrammā ar jebkuru platumu, augstumu, mērogu vai DPI un caurspīdīgu fonu. Vairāki faili un ZIP.</span> </a></li> <li><a class="card" href="/lv/attels-uz-svg/"> <span class="card-title">Attēla vektorizētājs uz SVG</span> <span class="card-text">Pārveidojiet PNG vai JPG logotipu vai zīmējumu par SVG vektoru ceļiem pārlūkprogrammā. Sagataves, krāsu skaits, drošs priekšskatījums, bez augšupielādes.</span> </a></li> <li><a class="card" href="/lv/attelu-kompresors/"> <span class="card-title">Attēlu kompresors</span> <span class="card-text">Saspiediet JPG, PNG un WebP attēlus ar kvalitātes slīdni, salīdziniet izmērus pirms un pēc, un apstrādājiet fotogrāfijas pa partijām, tās neaugšupielādējot.</span> </a></li> <li><a class="card" href="/lv/css-formatetajs/"> <span class="card-title">CSS formatētājs un minimizētājs</span> <span class="card-text">Sakārtojiet nekārtīgu CSS ar tīrām atkāpēm vai minimizējiet to ar csso un redziet izmēru pirms un pēc. Darbojas pārlūkprogrammā, nekas netiek augšupielādēts.</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="Reklāma"><span class="ad-label">Reklāma</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">Bezmaksas tiešsaistes rīki, kas darbojas pārlūkprogrammā. Jūsu dati paliek jūsu ierīcē.</p> </div> <nav aria-label="Kategorijas"> <p class="font-semibold">Rīki</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/lv/teksta-riki/">Teksta rīki</a></li><li><a class="link-muted" href="/lv/izstradatajiem/">Rīki izstrādātājiem</a></li><li><a class="link-muted" href="/lv/web-seo-marketings/">Tīmeklis, SEO un mārketings</a></li><li><a class="link-muted" href="/lv/krasas-un-dizains/">Krāsas un dizains</a></li><li><a class="link-muted" href="/lv/attelu-riki/">Attēli un fotogrāfijas</a></li><li><a class="link-muted" href="/lv/pdf-un-dokumenti/">PDF un dokumenti</a></li><li><a class="link-muted" href="/lv/matematikas-kalkulatori/">Matemātikas kalkulatori</a></li><li><a class="link-muted" href="/lv/finansu-kalkulatori/">Finanšu kalkulatori</a></li><li><a class="link-muted" href="/lv/datums-un-laiks/">Datums un laiks</a></li><li><a class="link-muted" href="/lv/vienibu-parveidotaji/">Mērvienību pārveidotāji</a></li><li><a class="link-muted" href="/lv/veseliba-un-fitness/">Veselība un fitness</a></li><li><a class="link-muted" href="/lv/maja-virtuve-auto/">Māja, remonts, virtuve un auto</a></li><li><a class="link-muted" href="/lv/generatori/">Ģeneratori</a></li><li><a class="link-muted" href="/lv/ierici-testi/">Ierīču un pārlūka testi</a></li><li><a class="link-muted" href="/lv/audio-un-video/">Audio un video</a></li><li><a class="link-muted" href="/lv/izglitiba-un-valodas/">Izglītība un valodas</a></li><li><a class="link-muted" href="/lv/speles/">Spēles</a></li></ul> </nav> <nav aria-label="Informācija"> <p class="font-semibold">Informācija</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/lv/par-mums/">Par mums</a></li> <li><a class="link-muted" href="/lv/kontakti/">Kontakti</a></li> <li><a class="link-muted" href="/lv/privatuma-politika/">Privātuma politika</a></li> <li><a class="link-muted" href="/lv/lietosanas-noteikumi/">Lietošanas noteikumi</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>