Utilia
Kategorije ▾
Jezik: sl ▾

Optimizacija SVG

Optimiziraj in skrči datoteke SVG s SVGO v brskalniku. Izberi prednastavitev, vizualno primerjaj rezultat in oglej si prihranek pri velikosti in gzipu.

Vtičniki

Če odstraniš viewBox, se risba ne more več prilagajati velikosti, skrajšanje ali odstranitev ID-jev pa pokvari CSS, JavaScript, <use> ali povezave na sidra, ki se nanje sklicujejo. Za SVG, uporabljene v kodi, sprite sheetih ali animacijah, ohrani prednastavitev Varno.

Kako optimiziraš SVG

  1. Spusti datoteko SVG na območje za spuščanje ali klikni nanj in jo izberi. Kodo lahko tudi prilepiš v polje Koda SVG.
  2. Izberi Prednastavitev: Varno, Uravnoteženo (privzeto) ali Največ. Seznam Vtičniki spodaj natančno pokaže, katere korake posamezna prednastavitev vklopi.
  3. Po potrebi prilagodi Decimalno natančnost (od 0 do 8 mest), Več prehodov in Lepa oblika (zamaknjen izhod), če želiš berljivo kodo. Takoj ko spremeniš vtičnik, natančnost ali prehode, se prednastavitev preklopi na Po meri.
  4. Klikni Optimiziraj SVG. Spuščena datoteka se optimizira takoj, ko pa je rezultat že tu, vsaka sprememba nastavitev samodejno znova požene optimizacijo.
  5. Preveri vrednosti Izvirna velikost, Optimizirana velikost, Prihranek in Gzip, nato primerjaj obe risbi drugo ob drugi.
  6. Klikni Kopiraj, da kopiraš Optimizirano kodo SVG, ali Prenesi optimiziran SVG, da jo shraniš kot ime.min.svg.

Optimizacijo izvaja SVGO 4, standardni odprtokodni (MIT) optimizator SVG, ki se uporablja v večini spletnih orodij za gradnjo. Njegova brskalniška različica se naloži ob prvem kliku in teče v celoti v tvoji napravi: tvoj SVG se nikoli ne naloži na strežnik.

Zakaj so datoteke SVG iz oblikovalskih orodij tako težke

SVG, izvožen iz Illustratorja, Inkscapea, Figme ali Sketcha, vsebuje precej več kot samo risbo. Urejevalniki dodajo lastne imenske prostore in atribute (imena plasti, vodila, nastavitve izvoza), blok <metadata>, komentarje, kot je »Generator: Adobe Illustrator«, koordinate s šestimi ali več decimalkami, skupine z enim samim elementom in dolgoveze barve, kot je #ffffff. Nič od tega ne spremeni tistega, kar nariše brskalnik. SVGO to odstrani, zaokroži številke, prepiše podatke poti s krajšimi ukazi, skrajša barve ter združi ali razpakira odvečne elemente. Zmanjšanje za 40–60 % je pri izvoženih ikonah in ilustracijah običajno.

Prednastavitve in tvegani vtičniki

  • Varno požene privzeto prednastavitev SVGO, vendar ohrani ID-je, <desc>, ločene poti in pravila <style>, s 3 decimalkami in enim prehodom. Uporabi jo za SVG, na katere se sklicujeta CSS ali JavaScript, za sprite sheete in animacije.
  • Uravnoteženo je privzeta prednastavitev SVGO, 3 decimalke, več prehodov. Primerna je za večino ikon in ilustracij, prikazanih kot slike.
  • Največ doda Odstrani </strong>, <strong>Odstrani skripte in atribute dogodkov</strong>, <strong>Odstrani width/height (ohrani viewBox)</strong> in <strong>Zamenjaj xlink:href s href</strong>, z 2 decimalkama in več prehodi.</li> </ul> <p>Nobena prednastavitev ne odstrani viewBox. <strong>Odstrani viewBox</strong> obstaja samo za posebne primere: brez njega se risba ne more več prilagajati velikosti, ki jo podaš v CSS.</p> <p>Vedi, kaj lahko pokvarijo drugi vtičniki:</p> <ul> <li><strong>Skrajšaj in odstrani neuporabljene ID-je</strong> preimenuje ID-je, kot je <code>#icon-home</code>, v <code>a</code>. Vsak selektor CSS, poizvedba JavaScript, sklic sprite sheeta <code><use href="#…"></code>, sidro strani ali animacija SMIL/CSS, ki cilja na staro ime, preneha delovati.</li> <li><strong>Odstrani <title></strong> in <strong>Odstrani <desc></strong> izbrišeta dostopno ime in opis. Obdrži ju pri pomembnih ikonah in grafikonih, ki jih mora bralnik zaslona izreči.</li> <li>Nizka <strong>Decimalna natančnost</strong> lahko popači majhne ikone: krivulje se zatresejo, robovi zdrsnejo. Vedno preveri vizualno primerjavo; 3 je varna privzeta vrednost.</li> <li><strong>Združi poti</strong> združi sosednje poti v eno, zato učinek ob prehodu miške ali animacija, ki je ciljala na eno pot, izgubi cilj.</li> </ul> <h2>Nasveti</h2> <ul> <li>Obdrži neoptimizirano glavno kopijo za urejanje; z <code>.min.svg</code> ravnaj kot s prevedeno kodo.</li> <li>Na strežniku omogoči gzip ali brotli: besedilne oblike zapisa, kot je SVG, se zelo dobro stisnejo, vrednost <strong>Gzip</strong> pa kaže, kaj obiskovalci dejansko prenesejo (prikazana, kadar tvoj brskalnik podpira <code>CompressionStream</code>).</li> <li>Vdelan SVG je mogoče oblikovati s CSS in animirati, vendar se ne predpomni posebej; SVG v <code><img></code> se predpomni, a ga ni mogoče oblikovati iz strani.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Pogosta vprašanja</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Ali se moj SVG naloži na strežnik?</summary> <div class="prose px-5 pb-5"><p>Ne. SVGO teče v tvojem brskalniku. Edini prenos je koda optimizatorja sama, ob prvi optimizaciji.</p></div> </details> <details class="faq group"> <summary>Zakaj je predogled prikazan kot slike?</summary> <div class="prose px-5 pb-5"><p>SVG je oblika dokumenta, ki lahko vsebuje JavaScript in nalaga zunanje datoteke. Oba predogleda se izrišeta kot <code><img></code> iz lokalnih naslovov blob, v tem načinu pa brskalniki nikoli ne izvajajo skript ali pridobivajo zunanjih virov, zato je predogled nezaupanja vrednega SVG tu varen. Optimizirana koda sama še vedno vsebuje vse skripte, razen če je vklopljen <strong>Odstrani skripte in atribute dogodkov</strong> (v prednastavitvi <strong>Največ</strong> je).</p></div> </details> <details class="faq group"> <summary>Moj optimiziran SVG se ne prilagaja več velikosti. Kaj se je zgodilo?</summary> <div class="prose px-5 pb-5"><p>viewBox je bil verjetno odstranjen, bodisi z <strong>Odstrani viewBox</strong> bodisi prej z drugim orodjem. Znova optimiziraj izvirnik z izklopljenim tem vtičnikom.</p></div> </details> <details class="faq group"> <summary>Zakaj moj sprite sheet ikon ali animacija ne deluje več?</summary> <div class="prose px-5 pb-5"><p><strong>Skrajšaj in odstrani neuporabljene ID-je</strong> ali <strong>Združi poti</strong> sta spremenila elemente, na katere se sklicuje tvoja koda. Uporabi prednastavitev <strong>Varno</strong>, ki obdrži oboje.</p></div> </details> <details class="faq group"> <summary>Optimizirana datoteka ni manjša. Zakaj?</summary> <div class="prose px-5 pb-5"><p>SVG je verjetno že skrčen. Poskusi <strong>Največ</strong> ali nižjo <strong>Decimalno natančnost</strong> in izklopi <strong>Lepa oblika (zamaknjen izhod)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Sorodna orodja</h2> <ul class="card-grid mt-4"><li><a class="card" href="/sl/svg-v-png/"> <span class="card-title">Pretvornik SVG v PNG</span> <span class="card-text">Pretvori SVG v PNG, JPG ali WebP pri poljubni širini, višini, povečavi ali DPI, s prosojnim ali barvnim ozadjem. Več datotek in ZIP, brez nalaganja.</span> </a></li> <li><a class="card" href="/sl/slika-v-svg/"> <span class="card-title">Pretvornik slike v SVG</span> <span class="card-text">Pretvori logotip ali risbo PNG ali JPG v vektorske poti SVG v brskalniku. Prednastavitve, število barv in filter pik, varen predogled in prenos, brez nalaganja.</span> </a></li> <li><a class="card" href="/sl/stiskanje-slik/"> <span class="card-title">Stiskanje slik</span> <span class="card-text">Stisni slike JPG, PNG in WebP z drsnikom kakovosti, primerjaj velikosti pred in po ter paketno obdelaj fotografije brez nalaganja na strežnik.</span> </a></li> <li><a class="card" href="/sl/oblikovalnik-css/"> <span class="card-title">Oblikovalnik in zmanjševalnik CSS</span> <span class="card-text">Uredi neurejen CSS s čistim zamikom ali ga zmanjšaj s csso in poglej velikost pred in po. Deluje v brskalniku; nič se ne naloži na strežnik.</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="Oglas"><span class="ad-label">Oglas</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">Brezplačna spletna orodja, ki delujejo v brskalniku. Tvoji podatki ostanejo v tvoji napravi.</p> </div> <nav aria-label="Kategorije"> <p class="font-semibold">Orodja</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/sl/besedilna-orodja/">Besedilna orodja</a></li><li><a class="link-muted" href="/sl/orodja-za-razvijalce/">Orodja za razvijalce</a></li><li><a class="link-muted" href="/sl/splet-seo-marketing/">Splet, SEO in trženje</a></li><li><a class="link-muted" href="/sl/barve-in-oblikovanje/">Barve in oblikovanje</a></li><li><a class="link-muted" href="/sl/slike-in-fotografije/">Slike in fotografije</a></li><li><a class="link-muted" href="/sl/pdf-in-dokumenti/">PDF in dokumenti</a></li><li><a class="link-muted" href="/sl/matematicni-kalkulatorji/">Matematični kalkulatorji</a></li><li><a class="link-muted" href="/sl/financni-kalkulatorji/">Finančni kalkulatorji</a></li><li><a class="link-muted" href="/sl/datum-in-cas/">Datum in čas</a></li><li><a class="link-muted" href="/sl/pretvorniki-enot/">Pretvorniki enot</a></li><li><a class="link-muted" href="/sl/zdravje-in-fitnes/">Zdravje in fitnes</a></li><li><a class="link-muted" href="/sl/dom-kuhinja-avto/">Dom, kuhinja in avto</a></li><li><a class="link-muted" href="/sl/generatorji/">Generatorji</a></li><li><a class="link-muted" href="/sl/testi-naprav/">Testi naprav in brskalnika</a></li><li><a class="link-muted" href="/sl/zvok-in-video/">Zvok in video</a></li><li><a class="link-muted" href="/sl/izobrazevanje-in-jeziki/">Izobraževanje in jeziki</a></li><li><a class="link-muted" href="/sl/igre/">Igre</a></li></ul> </nav> <nav aria-label="Informacije"> <p class="font-semibold">Informacije</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/sl/o-nas/">O nas</a></li> <li><a class="link-muted" href="/sl/stik/">Stik</a></li> <li><a class="link-muted" href="/sl/pravilnik-o-zasebnosti/">Pravilnik o zasebnosti</a></li> <li><a class="link-muted" href="/sl/pogoji-uporabe/">Pogoji uporabe</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>