Utilia
Kategorije ▾
Jezik: hr ▾

Optimizator SVG-a

Optimiziraj i minimiziraj SVG datoteke online pomoću SVGO-a, u pregledniku. Odaberi predložak, vizualno usporedi rezultat i vidi uštedu veličine i gzipa.

Dodaci

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

Kako optimizirati SVG

  1. Povuci SVG datoteku na zonu za ispuštanje ili klikni na nju za odabir. Kôd možeš i zalijepiti u okvir SVG kôd.
  2. Odaberi Predložak: Siguran, Uravnotežen (zadano) ili Maksimalan. Popis Dodaci ispod točno pokazuje koje korake svaki predložak uključuje.
  3. Po potrebi podesi: Decimalna preciznost (0 do 8 znamenki), Višestruki prolazi i Ljepši ispis (uvučen izlaz) ako želiš čitljiv kôd. Čim promijeniš dodatak, preciznost ili prolaze, predložak se prebacuje na Prilagođen.
  4. Klikni Optimiziraj SVG. Povučena datoteka optimizira se odmah, a kad rezultat postoji, svaka promjena postavki automatski ponovno pokreće optimizaciju.
  5. Provjeri brojke Izvorna veličina, Optimizirana veličina, Ušteda i Gzip, zatim usporedi dva crteža jedan pored drugog.
  6. Klikni Kopiraj da kopiraš Optimizirani SVG kôd ili Preuzmi optimizirani SVG da ga spremiš kao ime.min.svg.

Optimizaciju obavlja SVGO 4, standardni open source (MIT) SVG optimizator koji koristi većina alata za izgradnju web-stranica. Njegova se inačica za preglednik učitava pri prvom kliku i radi u cijelosti na tvom uređaju: tvoj SVG nikada se ne šalje na poslužitelj.

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 (imena 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 putanja kraćim naredbama, skraćuje boje te spaja ili raspakirava 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, s 3 decimale i jednim prolazom. Koristi ga za SVG-ove na koje se poziva CSS ili JavaScript, spriteove i animacije.
  • Uravnotežen je SVGO-ov zadani predložak, 3 decimale, višestruki prolazi. 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 s href</strong>, s 2 decimale i višestrukim prolazima.</li> </ul> <p>Nijedan predložak ne uklanja viewBox. <strong>Ukloni viewBox</strong> postoji samo za posebne slučajeve: bez njega crtež se više ne može skalirati na veličinu koju mu zadaš u CSS-u.</p> <p>Znaj što drugi dodaci mogu pokvariti:</p> <ul> <li><strong>Skrati i ukloni neiskoriš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 staro ime prestaje raditi.</li> <li><strong>Ukloni <title></strong> i <strong>Ukloni <desc></strong> brišu pristupačni naziv i opis. Zadrži ih na značajnim ikonama i grafikonima koje čitači zaslona moraju najaviti.</li> <li>Niska <strong>Decimalna preciznost</strong> može deformirati male ikone: krivulje se tresu, a rubovi odlutaju. Uvijek provjeri vizualnu usporedbu; 3 je siguran izbor.</li> <li><strong>Spoji putanje</strong> spaja susjedne putanje u jednu, pa efekt prelaska mišem ili animacija koja je ciljala jednu putanju gubi svoj cilj.</li> </ul> <h2>Savjeti</h2> <ul> <li>Zadrži neoptimiziranu glavnu kopiju za uređivanje; <code>.min.svg</code> tretiraj kao preveden kôd.</li> <li>Uključi gzip ili brotli na svom poslužitelju: tekstualni formati poput SVG-a sažimaju se vrlo dobro, a brojka <strong>Gzip</strong> pokazuje što posjetitelji stvarno preuzimaju (prikazuje se kad tvoj preglednik podržava <code>CompressionStream</code>).</li> <li>Ugrađeni (inline) SVG može se stilizirati CSS-om i animirati, ali se ne sprema zasebno u predmemoriju; SVG u <code><img></code> sprema se u predmemoriju, ali se ne može stilizirati 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>Šalje li se moj SVG na poslužitelj?</summary> <div class="prose px-5 pb-5"><p>Ne. SVGO radi u tvom pregledniku. Jedino se preuzima sam kôd optimizatora, pri prvoj optimizaciji.</p></div> </details> <details class="faq group"> <summary>Zašto je pregled prikazan 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 se pregleda prikazuju kao <code><img></code> iz lokalnih blob adresa, a u tom načinu preglednici nikad ne izvršavaju skripte niti dohvaćaju vanjske resurse, pa je pregled nepouzdanog SVG-a ovdje siguran. Sam optimizirani kôd i dalje sadrži sve skripte osim ako je uključeno <strong>Ukloni skripte i atribute događaja</strong> (u predlošku <strong>Maksimalan</strong> jest).</p></div> </details> <details class="faq group"> <summary>Moj optimizirani SVG se više ne skalira. Što se dogodilo?</summary> <div class="prose px-5 pb-5"><p>viewBox je vjerojatno uklonjen, ili dodatkom <strong>Ukloni viewBox</strong> ili ranije drugim alatom. Ponovno optimiziraj izvornik s isključenim tim dodatkom.</p></div> </details> <details class="faq group"> <summary>Zašto su moj sprite ikona ili animacija prestali raditi?</summary> <div class="prose px-5 pb-5"><p><strong>Skrati i ukloni neiskorištene ID-ove</strong> ili <strong>Spoji putanje</strong> promijenili su elemente na koje se tvoj kôd poziva. Upotrijebi predložak <strong>Siguran</strong>, koji zadržava oboje.</p></div> </details> <details class="faq group"> <summary>Optimizirana datoteka nije manja. Zašto?</summary> <div class="prose px-5 pb-5"><p>SVG je vjerojatno već minimiziran. Pokušaj <strong>Maksimalan</strong> ili nižu <strong>Decimalna preciznost</strong> i isključi <strong>Ljepši 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">Slični alati</h2> <ul class="card-grid mt-4"><li><a class="card" href="/hr/svg-u-png/"> <span class="card-title">SVG u PNG</span> <span class="card-text">Pretvori SVG u PNG, JPG ili WebP u pregledniku u bilo kojoj širini, visini, mjerilu ili DPI-ju, s prozirnom ili obojenom pozadinom. Skupno i ZIP, bez slanja.</span> </a></li> <li><a class="card" href="/hr/slika-u-svg/"> <span class="card-title">Slika u SVG – vektoriziranje</span> <span class="card-text">Pretvori PNG ili JPG logotip ili crtež u SVG vektorske putanje u pregledniku. Predlošci, broj boja i filtar mrlja, siguran pregled i preuzimanje, bez slanja.</span> </a></li> <li><a class="card" href="/hr/sazimanje-slika/"> <span class="card-title">Sažimanje slika</span> <span class="card-text">Sažmi JPG, PNG i WebP slike klizačem kvalitete, usporedi veličine prije i poslije i obradi fotografije skupno bez slanja na poslužitelj.</span> </a></li> <li><a class="card" href="/hr/css-formatter-minifier/"> <span class="card-title">CSS formater i minifikator</span> <span class="card-text">Uljepšaj neuredan CSS čistim uvlačenjem ili ga minificiraj pomoću csso-a i vidi veličinu prije i poslije. Radi u pregledniku, ništa se ne šalje.</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">Besplatni mrežni 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="/hr/alati-za-tekst/">Alati za tekst</a></li><li><a class="link-muted" href="/hr/alati-za-programere/">Alati za programere</a></li><li><a class="link-muted" href="/hr/web-seo-marketing/">Web, SEO i marketing</a></li><li><a class="link-muted" href="/hr/boje-i-dizajn/">Boje i dizajn</a></li><li><a class="link-muted" href="/hr/slike-i-fotografije/">Slike i fotografije</a></li><li><a class="link-muted" href="/hr/pdf-i-dokumenti/">PDF i dokumenti</a></li><li><a class="link-muted" href="/hr/matematicki-kalkulatori/">Matematički kalkulatori</a></li><li><a class="link-muted" href="/hr/financijski-kalkulatori/">Financijski kalkulatori</a></li><li><a class="link-muted" href="/hr/datum-i-vrijeme/">Datum i vrijeme</a></li><li><a class="link-muted" href="/hr/pretvaraci-jedinica/">Pretvarači jedinica</a></li><li><a class="link-muted" href="/hr/zdravlje-i-fitness/">Zdravlje i fitness</a></li><li><a class="link-muted" href="/hr/dom-kuhinja-auto/">Dom, uradi sam, kuhinja i auto</a></li><li><a class="link-muted" href="/hr/generatori/">Generatori</a></li><li><a class="link-muted" href="/hr/testovi-uredaja/">Testovi uređaja i preglednika</a></li><li><a class="link-muted" href="/hr/audio-video/">Audio i video</a></li><li><a class="link-muted" href="/hr/obrazovanje-i-jezici/">Obrazovanje i jezici</a></li><li><a class="link-muted" href="/hr/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="/hr/o-nama/">O nama</a></li> <li><a class="link-muted" href="/hr/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/hr/politika-privatnosti/">Politika privatnosti</a></li> <li><a class="link-muted" href="/hr/uvjeti-koristenja/">Uvjeti 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>