Utilia
Categorii ▾
Limbă: ro ▾

Optimizare SVG online

Optimizează și minifică fișiere SVG online cu SVGO, direct în browser. Alege o presetare, compară vizual rezultatul și vezi economia de spațiu și gzip.

Pluginuri

Eliminarea viewBox oprește scalarea desenului, iar scurtarea sau eliminarea ID-urilor strică CSS-ul, JavaScript-ul, elementele <use> sau legăturile de tip ancoră care se referă la ele. Păstrează presetarea Sigură pentru SVG-urile folosite în cod, în sprite-uri sau în animații.

Cum optimizezi un SVG

  1. Trage un fișier SVG în zona de plasare sau fă clic pe ea ca să alegi unul. Poți și să lipești codul în caseta Cod SVG.
  2. Alege o Presetare: Sigură, Echilibrată (cea implicită) sau Maximă. Lista Pluginuri de dedesubt arată exact ce pași activează fiecare presetare.
  3. Ajustează dacă e nevoie: Precizie zecimală (de la 0 la 8 cifre), Mai multe treceri și Formatare lizibilă (cod indentat) dacă vrei cod ușor de citit. Imediat ce schimbi un plugin, precizia sau numărul de treceri, presetarea trece pe Personalizată.
  4. Apasă Optimizează SVG. Un fișier tras în pagină este optimizat imediat, iar după ce există un rezultat, orice schimbare de setări reia automat optimizarea.
  5. Verifică valorile Dimensiunea originală, Dimensiunea optimizată, Economie și Comprimat gzip, apoi compară cele două desene alăturate.
  6. Apasă Copiază ca să copiezi Cod SVG optimizat sau Descarcă SVG-ul optimizat ca să-l salvezi ca nume.min.svg.

Optimizarea este făcută de SVGO 4, optimizatorul SVG open-source (MIT) standard, folosit în majoritatea instrumentelor de build pentru web. Versiunea lui pentru browser se încarcă la primul clic și rulează integral pe dispozitivul tău: SVG-ul tău nu este încărcat niciodată pe un server.

De ce sunt atât de grele fișierele SVG din programele de design

Un SVG exportat din Illustrator, Inkscape, Figma sau Sketch conține mult mai mult decât desenul. Editoarele adaugă propriile spații de nume și atribute (nume de straturi, ghidaje, setări de export), un bloc <metadata>, comentarii precum „Generator: Adobe Illustrator”, coordonate cu șase sau mai multe zecimale, grupuri care conțin un singur element și culori prolixe, precum #ffffff. Nimic din toate acestea nu schimbă ce desenează browserul. SVGO le elimină, rotunjește numerele, rescrie datele traseelor cu comenzi mai scurte, scurtează culorile și îmbină sau despachetează elementele redundante. O reducere de 40–60% este frecventă pentru pictogramele și ilustrațiile exportate.

Presetări și pluginuri riscante

  • Sigură rulează presetarea implicită SVGO, dar păstrează ID-urile, <desc>, traseele separate și regulile <style>, cu 3 zecimale și o singură trecere. Folosește-o pentru SVG-uri referite din CSS sau JavaScript, pentru sprite-uri și animații.
  • Echilibrată este presetarea implicită SVGO, cu 3 zecimale și mai multe treceri. Se potrivește pentru majoritatea pictogramelor și ilustrațiilor afișate ca imagini.
  • Maximă adaugă Elimină </strong>, <strong>Elimină scripturile și atributele de eveniment</strong>, <strong>Elimină width/height (păstrează viewBox)</strong> și <strong>Înlocuiește xlink:href cu href</strong>, cu 2 zecimale și mai multe treceri.</li> </ul> <p>Nicio presetare nu elimină viewBox. <strong>Elimină viewBox</strong> există doar pentru cazuri speciale: fără el, desenul nu se mai poate scala la dimensiunea pe care i-o dai în CSS.</p> <p>Află ce pot strica celelalte pluginuri:</p> <ul> <li><strong>Scurtează și elimină ID-urile nefolosite</strong> redenumește ID-uri precum <code>#icon-home</code> în <code>a</code>. Orice selector CSS, interogare JavaScript, referință de sprite <code><use href="#…"></code>, ancoră din pagină sau animație SMIL/CSS care viza vechiul nume încetează să funcționeze.</li> <li><strong>Elimină <title></strong> și <strong>Elimină <desc></strong> șterg numele și descrierea accesibile. Păstrează-le la pictogramele și graficele cu înțeles, pe care cititoarele de ecran trebuie să le anunțe.</li> <li>O <strong>Precizie zecimală</strong> mică poate deforma pictogramele mici: curbele se unduiesc, iar marginile se abat. Verifică mereu comparația vizuală; 3 este o valoare implicită sigură.</li> <li><strong>Îmbină traseele</strong> unește traseele adiacente într-unul singur, deci un efect de hover sau o animație care viza un singur traseu își pierde ținta.</li> </ul> <h2>Sfaturi</h2> <ul> <li>Păstrează o copie master neoptimizată pentru editare; tratează fișierul <code>.min.svg</code> ca pe cod compilat.</li> <li>Activează gzip sau brotli pe server: formatele text precum SVG se comprimă foarte bine, iar valoarea <strong>Comprimat gzip</strong> arată ce descarcă de fapt vizitatorii (apare când browserul tău acceptă <code>CompressionStream</code>).</li> <li>Un SVG inline poate fi stilizat cu CSS și animat, dar nu este păstrat separat în cache; un SVG într-un <code><img></code> este păstrat în cache, dar nu poate fi stilizat din pagină.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Întrebări frecvente</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Este SVG-ul meu încărcat pe un server?</summary> <div class="prose px-5 pb-5"><p>Nu. SVGO rulează în browserul tău. Singura descărcare este codul optimizatorului în sine, la prima optimizare.</p></div> </details> <details class="faq group"> <summary>De ce este previzualizarea afișată ca imagini?</summary> <div class="prose px-5 pb-5"><p>SVG este un format de document care poate conține JavaScript și poate încărca fișiere externe. Ambele previzualizări sunt afișate ca <code><img></code> din adrese blob locale, iar în acest mod browserele nu rulează niciodată scripturi și nu preiau resurse externe, deci previzualizarea unui SVG necunoscut aici este sigură. Codul optimizat în sine conține în continuare scripturile, dacă nu este activat <strong>Elimină scripturile și atributele de eveniment</strong> (este activ la <strong>Maximă</strong>).</p></div> </details> <details class="faq group"> <summary>SVG-ul meu optimizat nu se mai scalează. Ce s-a întâmplat?</summary> <div class="prose px-5 pb-5"><p>Probabil viewBox a fost eliminat, fie de <strong>Elimină viewBox</strong>, fie mai devreme de alt instrument. Optimizează din nou originalul, cu acel plugin dezactivat.</p></div> </details> <details class="faq group"> <summary>De ce nu mai funcționează sprite-ul sau animația mea de pictograme?</summary> <div class="prose px-5 pb-5"><p><strong>Scurtează și elimină ID-urile nefolosite</strong> sau <strong>Îmbină traseele</strong> au schimbat elementele la care se referă codul tău. Folosește presetarea <strong>Sigură</strong>, care le păstrează pe amândouă.</p></div> </details> <details class="faq group"> <summary>Fișierul optimizat nu este mai mic. De ce?</summary> <div class="prose px-5 pb-5"><p>SVG-ul este probabil deja minificat. Încearcă <strong>Maximă</strong> sau o <strong>Precizie zecimală</strong> mai mică și dezactivează <strong>Formatare lizibilă (cod indentat)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Instrumente similare</h2> <ul class="card-grid mt-4"><li><a class="card" href="/ro/svg-in-png/"> <span class="card-title">Convertor SVG în PNG</span> <span class="card-text">Convertește SVG în PNG, JPG sau WebP în browser, la orice lățime, înălțime, scară sau DPI, cu fundal transparent sau colorat. Lot și ZIP, fără încărcare.</span> </a></li> <li><a class="card" href="/ro/imagine-in-svg/"> <span class="card-title">Vectorizare imagine în SVG</span> <span class="card-text">Convertește un logo sau un desen PNG ori JPG în trasee vectoriale SVG direct în browser. Presetări, număr de culori, filtru de pete, previzualizare sigură.</span> </a></li> <li><a class="card" href="/ro/comprimare-imagini/"> <span class="card-title">Compresor de imagini</span> <span class="card-text">Comprimă imagini JPG, PNG și WebP cu un cursor de calitate, compară mărimile înainte și după și procesează fotografii în lot, fără să le încarci pe un server.</span> </a></li> <li><a class="card" href="/ro/formatare-css/"> <span class="card-title">Formatare și minificare CSS</span> <span class="card-text">Înfrumusețează CSS-ul dezordonat cu indentare curată sau minifică-l cu csso și vezi dimensiunea înainte și după. Rulează în browser; nimic nu este încărcat.</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="Publicitate"><span class="ad-label">Publicitate</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">Instrumente online gratuite care funcționează în browser. Datele tale rămân pe dispozitivul tău.</p> </div> <nav aria-label="Categorii"> <p class="font-semibold">Instrumente</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/ro/instrumente-text/">Instrumente pentru text</a></li><li><a class="link-muted" href="/ro/instrumente-dezvoltatori/">Instrumente pentru dezvoltatori</a></li><li><a class="link-muted" href="/ro/web-seo-marketing/">Web, SEO și marketing</a></li><li><a class="link-muted" href="/ro/culori-design/">Culori și design</a></li><li><a class="link-muted" href="/ro/imagini-fotografii/">Imagini și fotografii</a></li><li><a class="link-muted" href="/ro/pdf-documente/">PDF și documente</a></li><li><a class="link-muted" href="/ro/calculatoare-matematice/">Calculatoare matematice</a></li><li><a class="link-muted" href="/ro/calculatoare-financiare/">Calculatoare financiare</a></li><li><a class="link-muted" href="/ro/data-si-ora/">Data și ora</a></li><li><a class="link-muted" href="/ro/convertoare-unitati/">Convertoare de unități</a></li><li><a class="link-muted" href="/ro/sanatate-fitness/">Sănătate și fitness</a></li><li><a class="link-muted" href="/ro/casa-bucatarie-auto/">Casă, bucătărie și auto</a></li><li><a class="link-muted" href="/ro/generatoare/">Generatoare</a></li><li><a class="link-muted" href="/ro/teste-dispozitiv/">Teste pentru dispozitiv și browser</a></li><li><a class="link-muted" href="/ro/audio-video/">Audio și video</a></li><li><a class="link-muted" href="/ro/scoala-limbi/">Școală și limbi străine</a></li><li><a class="link-muted" href="/ro/jocuri/">Jocuri</a></li></ul> </nav> <nav aria-label="Informații"> <p class="font-semibold">Informații</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/ro/despre-noi/">Despre noi</a></li> <li><a class="link-muted" href="/ro/contact/">Contact</a></li> <li><a class="link-muted" href="/ro/politica-de-confidentialitate/">Politica de confidențialitate</a></li> <li><a class="link-muted" href="/ro/termeni-de-utilizare/">Termeni de utilizare</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>