Utilia
Kategorije ▾
Jezik: bs ▾

SVG optimizator

Optimizuj i smanji SVG datoteke online pomoću SVGO-a, u pregledniku. Odaberi predložak, vizuelno uporedi rezultat i vidi uštedu veličine i gzip uštedu.

Dodaci

Uklanjanje viewBoxa sprječava skaliranje crteža, a skraćivanje ili uklanjanje ID-ova prekida CSS, JavaScript, <use> ili sidrene linkove koji se na njih pozivaju. Za SVG-ove koji se koriste u kodu, spriteovima ili animacijama zadrži predložak Siguran.

Kako optimizovati SVG

  1. Prevuci SVG datoteku na polje za unos ili klikni na njega da je odabereš. Kod možeš i zalijepiti u polje SVG kod.
  2. Odaberi Predložak: Siguran, Uravnotežen (zadano) ili Maksimalan. Lista Dodaci ispod tačno pokazuje koje korake svaki predložak uključuje.
  3. Po potrebi podesi: Decimalnu preciznost (0 do 8 cifara), Više prolaza i Uredan ispis (uvučen izlaz) ako želiš čitljiv kod. Čim promijeniš dodatak, preciznost ili prolaze, predložak prelazi na Prilagođen.
  4. Klikni Optimizuj SVG. Ubačena datoteka se optimizuje odmah, a kada postoji rezultat, svaka promjena postavki automatski ponovo pokreće optimizaciju.
  5. Provjeri vrijednosti Originalna veličina, Optimizovana veličina, Ušteda i Gzipovano, zatim uporedi dva crteža jedan pored drugog.
  6. Klikni Kopiraj da kopiraš Optimizovani SVG kod ili Preuzmi optimizovani SVG da ga spremiš kao naziv.min.svg.

Optimizaciju radi SVGO 4, standardni SVG optimizator otvorenog koda (MIT) koji se koristi u većini alata za izgradnju weba. Njegova verzija za preglednik učitava se pri prvom kliku i izvršava se u potpunosti na tvom uređaju: tvoj SVG se nikada ne šalje na server.

Zašto su SVG datoteke iz alata za dizajn tako teške

SVG izvezen iz Illustratora, Inkscapea, Figme ili Sketcha nosi mnogo više od samog crteža. Uređivači dodaju vlastite imenske prostore i atribute (nazive slojeva, vodilice, postavke izvoza), blok <metadata>, komentare poput „Generator: Adobe Illustrator“, koordinate sa šest ili više decimala, grupe koje sadrže samo jedan element i opširne boje poput #ffffff. Ništa od toga ne mijenja ono što preglednik crta. SVGO to uklanja, zaokružuje brojeve, prepisuje podatke putanje kraćim naredbama, skraćuje boje te spaja ili raspakuje suvišne elemente. Smanjenje od 40 do 60 % uobičajeno je za izvezene ikone i ilustracije.

Predlošci i rizični dodaci

  • Siguran pokreće SVGO-ov zadani predložak, ali zadržava ID-ove, <desc>, odvojene putanje i <style> pravila, uz 3 decimale i jedan prolaz. Koristi ga za SVG-ove na koje se poziva CSS ili JavaScript, za spriteove i animacije.
  • Uravnotežen je SVGO-ov zadani predložak, 3 decimale, više prolaza. Odgovara većini ikona i ilustracija prikazanih kao slike.
  • Maksimalan dodaje Ukloni </strong>, <strong>Ukloni skripte i atribute događaja</strong>, <strong>Ukloni width/height (zadrži viewBox)</strong> i <strong>Zamijeni xlink:href sa href</strong>, uz 2 decimale i više prolaza.</li> </ul> <p>Nijedan predložak ne uklanja viewBox. <strong>Ukloni viewBox</strong> postoji samo za posebne slučajeve: bez njega se crtež više ne može skalirati na veličinu koju mu zadaš u CSS-u.</p> <p>Znaj šta mogu pokvariti ostali dodaci:</p> <ul> <li><strong>Skrati i ukloni nekorištene ID-ove</strong> preimenuje ID-ove poput <code>#icon-home</code> u <code>a</code>. Svaki CSS selektor, JavaScript upit, referenca spritea <code><use href="#…"></code>, sidro na stranici ili SMIL/CSS animacija koja cilja stari naziv prestaje raditi.</li> <li><strong>Ukloni <title></strong> i <strong>Ukloni <desc></strong> brišu pristupačni naziv i opis. Zadrži ih na ikonama i grafikonima koji nešto znače i koje čitači ekrana moraju najaviti.</li> <li>Niska <strong>Decimalna preciznost</strong> može deformisati male ikone: krivulje se tresu, a ivice odlutaju. Uvijek provjeri vizuelno poređenje; 3 je siguran izbor.</li> <li><strong>Spoji putanje</strong> spaja susjedne putanje u jednu, pa efekat prelaska mišem ili animacija koja je ciljala jednu putanju gubi svoju metu.</li> </ul> <h2>Savjeti</h2> <ul> <li>Zadrži neoptimizovanu glavnu kopiju za uređivanje; <code>.min.svg</code> tretiraj kao kompajliran kod.</li> <li>Uključi gzip ili brotli na svom serveru: tekstualni formati poput SVG-a vrlo se dobro kompresuju, a vrijednost <strong>Gzipovano</strong> pokazuje šta posjetioci zaista preuzimaju (prikazuje se kada tvoj preglednik podržava <code>CompressionStream</code>).</li> <li>Ugrađeni (inline) SVG može se stilizovati CSS-om i animirati, ali se ne kešira zasebno; SVG u <code><img></code> se kešira, ali se ne može stilizovati iz 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>Šalje li se moj SVG na server?</summary> <div class="prose px-5 pb-5"><p>Ne. SVGO radi u tvom pregledniku. Jedino preuzimanje je sam kod optimizatora, pri prvoj optimizaciji.</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 sadržavati JavaScript i učitavati vanjske datoteke. Oba pregleda se prikazuju kao <code><img></code> s lokalnih blob adresa, a u tom načinu preglednici nikada ne izvršavaju skripte niti preuzimaju vanjske resurse, pa je pregled nepouzdanog SVG-a ovdje siguran. Sam optimizovani kod i dalje sadrži sve skripte osim ako je uključeno <strong>Ukloni skripte i atribute događaja</strong> (jeste u predlošku <strong>Maksimalan</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 vjerovatno uklonjen, bilo pomoću <strong>Ukloni viewBox</strong> ili ranije nekim drugim alatom. Ponovo optimizuj original s isključenim tim dodatkom.</p></div> </details> <details class="faq group"> <summary>Zašto su moji spriteovi s ikonama ili animacije prestali raditi?</summary> <div class="prose px-5 pb-5"><p><strong>Skrati i ukloni nekorištene ID-ove</strong> ili <strong>Spoji putanje</strong> promijenili su elemente na koje se tvoj kod poziva. Koristi predložak <strong>Siguran</strong>, koji zadržava oboje.</p></div> </details> <details class="faq group"> <summary>Optimizovana datoteka nije manja. Zašto?</summary> <div class="prose px-5 pb-5"><p>SVG je vjerovatno već smanjen. Probaj <strong>Maksimalan</strong> ili manju <strong>Decimalnu preciznost</strong> i isključi <strong>Uredan 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="/bs/svg-u-png/"> <span class="card-title">Pretvarač SVG-a u PNG</span> <span class="card-text">Pretvori SVG u PNG, JPG ili WebP u pregledniku u bilo kojoj širini, visini, skali ili DPI-ju, s prozirnom ili obojenom pozadinom. Grupno i ZIP, bez slanja.</span> </a></li> <li><a class="card" href="/bs/slika-u-svg/"> <span class="card-title">Pretvarač slike u SVG (vektorizacija)</span> <span class="card-text">Pretvori PNG ili JPG logotip ili crtež u SVG vektorske putanje u pregledniku. Predlošci, broj boja i filter mrlja, siguran pregled i preuzimanje, bez slanja.</span> </a></li> <li><a class="card" href="/bs/kompresija-slika/"> <span class="card-title">Kompresor slika</span> <span class="card-text">Kompresuj JPG, PNG i WebP slike klizačem kvaliteta, uporedi veličine prije i poslije i grupno obradi fotografije bez slanja na server.</span> </a></li> <li><a class="card" href="/bs/css-formatiranje-minifikacija/"> <span class="card-title">CSS formater i minifikator</span> <span class="card-text">Uljepšaj neuredan CSS čistim uvlačenjem ili ga minifikuj pomoću csso i vidi veličinu prije i poslije. Radi u pregledniku, ništa se ne šalje 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 online alati koji rade u tvom pregledniku. 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="/bs/alati-za-tekst/">Alati za tekst</a></li><li><a class="link-muted" href="/bs/alati-za-programere/">Alati za programere</a></li><li><a class="link-muted" href="/bs/web-seo-marketing/">Web, SEO i marketing</a></li><li><a class="link-muted" href="/bs/boje-i-dizajn/">Boje i dizajn</a></li><li><a class="link-muted" href="/bs/slike-i-fotografije/">Slike i fotografije</a></li><li><a class="link-muted" href="/bs/pdf-i-dokumenti/">PDF i dokumenti</a></li><li><a class="link-muted" href="/bs/matematicki-kalkulatori/">Matematički kalkulatori</a></li><li><a class="link-muted" href="/bs/finansijski-kalkulatori/">Finansijski kalkulatori</a></li><li><a class="link-muted" href="/bs/datum-i-vrijeme/">Datum i vrijeme</a></li><li><a class="link-muted" href="/bs/pretvaraci-jedinica/">Pretvarači jedinica</a></li><li><a class="link-muted" href="/bs/zdravlje-i-fitness/">Zdravlje i fitness</a></li><li><a class="link-muted" href="/bs/kuca-kuhinja-auto/">Kuća, majstorisanje, kuhinja i auto</a></li><li><a class="link-muted" href="/bs/generatori/">Generatori</a></li><li><a class="link-muted" href="/bs/testovi-uredjaja/">Testovi uređaja i preglednika</a></li><li><a class="link-muted" href="/bs/audio-video/">Audio i video</a></li><li><a class="link-muted" href="/bs/obrazovanje-i-jezici/">Obrazovanje i jezici</a></li><li><a class="link-muted" href="/bs/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="/bs/o-nama/">O nama</a></li> <li><a class="link-muted" href="/bs/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/bs/politika-privatnosti/">Politika privatnosti</a></li> <li><a class="link-muted" href="/bs/uslovi-koristenja/">Uslovi korištenja</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>