Utilia
Kategorije ▾
Jezik: sr ▾

SVG optimizator

Optimizuj i minifikuj SVG fajlove online pomoću SVGO-a, u pregledaču. Izaberi podešavanje, vizuelno uporedi rezultat i vidi uštedu veličine i gzip-a.

Dodaci

Uklanjanje viewBox-a sprečava skaliranje crteža, a skraćivanje ili uklanjanje ID-ova kvari CSS, JavaScript, <use> ili sidrene linkove koji ih pominju. Za SVG-ove koji se koriste u kodu, sprajtovima ili animacijama zadrži podešavanje Bezbedno.

Kako da optimizuješ SVG

  1. Prevuci SVG fajl na polje za otpuštanje ili klikni na njega da ga izabereš. Kod možeš i da nalepiš u polje SVG kod.
  2. Izaberi Podešavanje: Bezbedno, Uravnoteženo (podrazumevano) ili Maksimalno. Lista Dodaci ispod tačno pokazuje koje korake svako podešavanje uključuje.
  3. Po potrebi podesi: Decimalna preciznost (od 0 do 8 cifara), Više prolaza i Pregledan ispis (uvučen izlaz) ako želiš čitljiv kod. Čim promeniš dodatak, preciznost ili prolaze, podešavanje prelazi na Prilagođeno.
  4. Klikni na Optimizuj SVG. Prevučeni fajl se optimizuje odmah, a kada postoji rezultat, svaka promena podešavanja automatski ponovo pokreće optimizaciju.
  5. Proveri brojke Originalna veličina, Optimizovana veličina, Ušteda i Gzip, pa uporedi dva crteža jedan pored drugog.
  6. Klikni na Kopiraj da kopiraš Optimizovani SVG kod, ili na Preuzmi optimizovani SVG da ga sačuvaš kao ime.min.svg.

Optimizaciju obavlja SVGO 4, standardni otvoreni (MIT) optimizator SVG-a koji koristi većina alata za izradu veba. Njegova verzija za pregledač učitava se prvi put kada klikneš i izvršava se u potpunosti na tvom uređaju: tvoj SVG se nikada ne otprema.

Zašto su SVG fajlovi iz alata za dizajn tako teški

SVG izvezen iz Illustratora, Inkscapea, Figme ili Sketcha nosi mnogo više od samog crteža. Editori dodaju sopstvene prostore imena i atribute (imena slojeva, vodilje, podešavanja izvoza), blok <metadata>, komentare kao što je „Generator: Adobe Illustrator“, koordinate sa šest ili više decimala, grupe koje sadrže jedan element i dugačke boje poput #ffffff. Ništa od toga ne menja ono što pregledač crta. SVGO to uklanja, zaokružuje brojeve, prepisuje podatke putanja kraćim komandama, skraćuje boje i spaja ili raspakuje suvišne elemente. Smanjenje od 40–60% je uobičajeno kod izvezenih ikonica i ilustracija.

Podešavanja i rizični dodaci

  • Bezbedno pokreće podrazumevano SVGO podešavanje, ali zadržava ID-ove, <desc>, odvojene putanje i <style> pravila, sa 3 decimale i jednim prolazom. Koristi ga za SVG-ove na koje se poziva CSS ili JavaScript, za sprajtove i animacije.
  • Uravnoteženo je podrazumevano SVGO podešavanje, sa 3 decimale i više prolaza. Odgovara većini ikonica i ilustracija prikazanih kao slike.
  • Maksimalno dodaje Ukloni </strong>, <strong>Ukloni skripte i atribute događaja</strong>, <strong>Ukloni width/height (zadrži viewBox)</strong> i <strong>Zameni xlink:href sa href</strong>, sa 2 decimale i više prolaza.</li> </ul> <p>Nijedno podešavanje ne uklanja viewBox. <strong>Ukloni viewBox</strong> postoji samo za posebne slučajeve: bez njega crtež više ne može da se skalira na veličinu koju mu zadaš u CSS-u.</p> <p>Znaj šta drugi dodaci mogu da pokvare:</p> <ul> <li><strong>Skrati i ukloni neiskorišćene ID-ove</strong> preimenuje ID-ove kao što je <code>#icon-home</code> u <code>a</code>. Svaki CSS selektor, JavaScript upit, <code><use href="#…"></code> referenca sprajta, sidro na stranici ili SMIL/CSS animacija koja cilja staro ime prestaje da radi.</li> <li><strong>Ukloni <title></strong> i <strong>Ukloni <desc></strong> brišu pristupačno ime i opis. Zadrži ih kod ikonica i grafikona koji nešto znače i koje čitači ekrana moraju da najave.</li> <li>Niska <strong>Decimalna preciznost</strong> može da deformiše male ikonice: krive podrhtavaju, a ivice odlutaju. Uvek proveri vizuelno poređenje; 3 je bezbedna podrazumevana vrednost.</li> <li><strong>Spoji putanje</strong> spaja susedne putanje u jednu, pa efekat prelaska mišem ili animacija koja je ciljala jednu putanju gubi cilj.</li> </ul> <h2>Saveti</h2> <ul> <li>Čuvaj neoptimizovanu glavnu kopiju za uređivanje; <code>.min.svg</code> tretiraj kao prevedeni kod.</li> <li>Uključi gzip ili brotli na serveru: tekstualni formati poput SVG-a veoma dobro se kompresuju, a brojka <strong>Gzip</strong> pokazuje šta posetioci zaista preuzimaju (prikazuje se kada tvoj pregledač podržava <code>CompressionStream</code>).</li> <li>Ugrađeni (inline) SVG može da se stilizuje CSS-om i animira, ali se ne kešira zasebno; SVG u <code><img></code> se kešira, ali ne može da se stilizuje sa stranice.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Česta pitanja</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Da li se moj SVG otprema na server?</summary> <div class="prose px-5 pb-5"><p>Ne. SVGO se izvršava u tvom pregledaču. Jedino što se preuzima je sam kod optimizatora, prvi put kada optimizuješ.</p></div> </details> <details class="faq group"> <summary>Zašto se pregled prikazuje kao slike?</summary> <div class="prose px-5 pb-5"><p>SVG je format dokumenta koji može da sadrži JavaScript i da učitava spoljne fajlove. Oba pregleda se prikazuju kao <code><img></code> sa lokalnih blob adresa, a u tom režimu pregledači nikada ne izvršavaju skripte niti preuzimaju spoljne resurse, pa je pregled nepouzdanog SVG-a ovde bezbedan. Sam optimizovani kod i dalje sadrži skripte osim ako je uključeno <strong>Ukloni skripte i atribute događaja</strong> (uključeno je u podešavanju <strong>Maksimalno</strong>).</p></div> </details> <details class="faq group"> <summary>Moj optimizovani SVG se više ne skalira. Šta se desilo?</summary> <div class="prose px-5 pb-5"><p>viewBox je verovatno uklonjen, ili opcijom <strong>Ukloni viewBox</strong> ili ranije drugim alatom. Ponovo optimizuj original sa isključenim tim dodatkom.</p></div> </details> <details class="faq group"> <summary>Zašto su moji sprajtovi ikonica ili animacija prestali da rade?</summary> <div class="prose px-5 pb-5"><p><strong>Skrati i ukloni neiskorišćene ID-ove</strong> ili <strong>Spoji putanje</strong> promenili su elemente na koje se tvoj kod poziva. Koristi podešavanje <strong>Bezbedno</strong>, koje zadržava oba.</p></div> </details> <details class="faq group"> <summary>Optimizovani fajl nije manji. Zašto?</summary> <div class="prose px-5 pb-5"><p>SVG je verovatno već minifikovan. Probaj <strong>Maksimalno</strong> ili nižu <strong>Decimalna preciznost</strong> i isključi <strong>Pregledan ispis (uvučen izlaz)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Srodni alati</h2> <ul class="card-grid mt-4"><li><a class="card" href="/sr/svg-u-png/"> <span class="card-title">SVG u PNG</span> <span class="card-text">Pretvori SVG u PNG, JPG ili WebP u pregledaču sa bilo kojom širinom, visinom, razmerom ili DPI-jem, uz providnu ili obojenu pozadinu. Bez otpremanja.</span> </a></li> <li><a class="card" href="/sr/slika-u-svg/"> <span class="card-title">Pretvarač slike u SVG (vektorizacija)</span> <span class="card-text">Pretvori PNG ili JPG logo ili crtež u SVG vektorske putanje u pregledaču. Podešavanja, broj boja i filter tačkica, bezbedan pregled i preuzimanje.</span> </a></li> <li><a class="card" href="/sr/kompresija-slika/"> <span class="card-title">Kompresija slika</span> <span class="card-text">Kompresuj JPG, PNG i WebP slike klizačem kvaliteta, uporedi veličine pre i posle i obradi fotografije u grupi bez otpremanja na server.</span> </a></li> <li><a class="card" href="/sr/css-formater-minifikator/"> <span class="card-title">CSS formater i minifikator</span> <span class="card-text">Sredi neuredan CSS čistim uvlačenjem ili ga minifikuj pomoću csso i vidi veličinu pre i posle. Radi u tvom pregledaču, ništa se ne otprema na server.</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">Besplatni onlajn alati koji rade u tvom pregledaču. Tvoji podaci ostaju na tvom uređaju.</p> </div> <nav aria-label="Kategorije"> <p class="font-semibold">Alati</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/sr/alati-za-tekst/">Alati za tekst</a></li><li><a class="link-muted" href="/sr/alati-za-programere/">Alati za programere</a></li><li><a class="link-muted" href="/sr/web-seo-marketing/">Veb, SEO i marketing</a></li><li><a class="link-muted" href="/sr/boje-i-dizajn/">Boje i dizajn</a></li><li><a class="link-muted" href="/sr/slike-i-fotografije/">Slike i fotografije</a></li><li><a class="link-muted" href="/sr/pdf-i-dokumenti/">PDF i dokumenti</a></li><li><a class="link-muted" href="/sr/matematicki-kalkulatori/">Matematički kalkulatori</a></li><li><a class="link-muted" href="/sr/finansijski-kalkulatori/">Finansijski kalkulatori</a></li><li><a class="link-muted" href="/sr/datum-i-vreme/">Datum i vreme</a></li><li><a class="link-muted" href="/sr/pretvaraci-jedinica/">Pretvarači jedinica</a></li><li><a class="link-muted" href="/sr/zdravlje-i-fitnes/">Zdravlje i fitnes</a></li><li><a class="link-muted" href="/sr/dom-kuhinja-auto/">Dom, uradi sam, kuhinja i auto</a></li><li><a class="link-muted" href="/sr/generatori/">Generatori</a></li><li><a class="link-muted" href="/sr/testovi-uredjaja/">Testovi uređaja i pregledača</a></li><li><a class="link-muted" href="/sr/audio-video/">Audio i video</a></li><li><a class="link-muted" href="/sr/obrazovanje-i-jezici/">Obrazovanje i jezici</a></li><li><a class="link-muted" href="/sr/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="/sr/o-nama/">O nama</a></li> <li><a class="link-muted" href="/sr/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/sr/politika-privatnosti/">Politika privatnosti</a></li> <li><a class="link-muted" href="/sr/uslovi-koriscenja/">Uslovi korišćenja</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>