Utilia
Mga kategorya ▾
Wika: fil ▾

SVG Optimizer

I-optimize at i-minify ang mga SVG file online gamit ang SVGO, sa iyong browser. Pumili ng preset, ihambing ang resulta at tingnan ang natipid sa laki at gzip.

Mga plugin

Kapag inalis ang viewBox, hindi na nagsi-scale ang drawing, at kapag pinaikli o inalis ang mga ID, masisira ang CSS, JavaScript, <use> o anchor link na tumutukoy sa mga ito. Panatilihin ang Ligtas na preset para sa mga SVG na ginagamit sa code, sprite o animation.

Paano mag-optimize ng SVG

  1. I-drop ang isang SVG file sa drop zone o i-click ito para pumili. Puwede mo ring i-paste ang markup sa kahon ng SVG code.
  2. Pumili ng Preset: Ligtas, Balanse (ang default) o Pinakamataas. Ipinapakita ng listahan ng Mga plugin sa ibaba kung aling mga hakbang ang eksaktong binubuksan ng bawat preset.
  3. Mag-adjust kung kailangan: ang Decimal precision (0 hanggang 8 digit), Maraming pass, at Pretty print (may indent ang output) kung gusto mo ng nababasang code. Sa sandaling baguhin mo ang isang plugin, ang precision o ang mga pass, lilipat ang preset sa Custom.
  4. I-click ang I-optimize ang SVG. Agad na ino-optimize ang ni-drop na file, at kapag may resulta na, awtomatikong tatakbo ulit ang optimization sa bawat pagbabago ng setting.
  5. Suriin ang mga numero ng Orihinal na laki, Na-optimize na laki, Natipid at Naka-gzip, saka ihambing ang dalawang drawing nang magkatabi.
  6. I-click ang Kopyahin para kopyahin ang Na-optimize na SVG code, o I-download ang na-optimize na SVG para i-save ito bilang name.min.svg.

Ginagawa ang optimization ng SVGO 4, ang pamantayang open source (MIT) na SVG optimizer na ginagamit sa karamihan ng web build tool. Nilo-load ang bersyon nito para sa browser sa unang pag-click mo, at buong tumatakbo sa iyong device: hindi kailanman ina-upload ang iyong SVG.

Bakit napakabigat ng mga SVG file mula sa mga design tool

Ang SVG na na-export mula sa Illustrator, Inkscape, Figma o Sketch ay may dalang higit pa sa drawing. Nagdaragdag ang mga editor ng sarili nilang namespace at attribute (pangalan ng layer, guide, setting ng export), isang <metadata> na block, mga comment gaya ng “Generator: Adobe Illustrator”, mga coordinate na may anim o higit pang decimal, mga group na iisa lang ang laman, at mahahabang kulay gaya ng #ffffff. Walang binabago ang alinman dito sa iginuguhit ng browser. Inaalis ito ng SVGO, ini-round ang mga numero, isinusulat muli ang path data gamit ang mas maiikling command, pinaiikli ang mga kulay at pinagsasama o binubuksan ang mga sobrang element. Karaniwan ang 40–60% na bawas para sa mga na-export na icon at ilustrasyon.

Mga preset at mapanganib na plugin

  • Pinapatakbo ng Ligtas ang default na preset ng SVGO pero pinapanatili ang mga ID, <desc>, magkakahiwalay na path at mga rule ng <style>, na may 3 decimal at isang pass. Gamitin ito para sa mga SVG na tinutukoy mula sa CSS o JavaScript, mga sprite at animation.
  • Ang Balanse ay ang default na preset ng SVGO, 3 decimal, maraming pass. Bagay ito sa karamihan ng mga icon at ilustrasyong ipinapakita bilang larawan.
  • Idinaragdag ng Pinakamataas ang Alisin ang </strong>, <strong>Alisin ang mga script at event attribute</strong>, <strong>Alisin ang width/height (panatilihin ang viewBox)</strong> at <strong>Palitan ang xlink:href ng href</strong>, na may 2 decimal at maraming pass.</li> </ul> <p>Walang preset na nag-aalis ng viewBox. Ang <strong>Alisin ang viewBox</strong> ay para lang sa mga espesyal na kaso: kapag wala ito, hindi na makakapag-scale ang drawing sa laking ibibigay mo sa CSS.</p> <p>Alamin kung ano ang puwedeng masira ng ibang mga plugin:</p> <ul> <li>Pinapalitan ng <strong>Paikliin at alisin ang mga hindi ginagamit na ID</strong> ang pangalan ng mga ID gaya ng <code>#icon-home</code> bilang <code>a</code>. Hihinto sa paggana ang anumang CSS selector, JavaScript query, <code><use href="#…"></code> na sprite reference, page anchor o SMIL/CSS animation na tumutukoy sa lumang pangalan.</li> <li>Binubura ng <strong>Alisin ang <title></strong> at <strong>Alisin ang <desc></strong> ang accessible na pangalan at paglalarawan. Panatilihin ang mga ito sa mga makabuluhang icon at chart na dapat banggitin ng mga screen reader.</li> <li>Ang mababang <strong>Decimal precision</strong> ay puwedeng mag-deform ng maliliit na icon: nanginginig ang mga kurba at lumilihis ang mga gilid. Laging suriin ang biswal na paghahambing; ligtas na default ang 3.</li> <li>Pinagdurugtong ng <strong>Pagsamahin ang mga path</strong> ang magkakatabing path sa isa, kaya ang hover effect o animation na tumutukoy sa iisang path ay mawawalan ng target.</li> </ul> <h2>Mga tip</h2> <ul> <li>Mag-ingat ng hindi optimized na master copy para sa pag-edit; ituring ang <code>.min.svg</code> na parang compiled na code.</li> <li>I-enable ang gzip o brotli sa iyong server: napakahusay mag-compress ng mga text format gaya ng SVG, at ipinapakita ng numero ng <strong>Naka-gzip</strong> kung ano talaga ang dina-download ng mga bisita (ipinapakita kapag sinusuportahan ng iyong browser ang <code>CompressionStream</code>).</li> <li>Ang inline SVG ay puwedeng i-style gamit ang CSS at i-animate pero hindi nako-cache nang hiwalay; ang SVG sa <code><img></code> ay nako-cache pero hindi ma-style mula sa page.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Mga madalas itanong</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Naa-upload ba ang SVG ko sa isang server?</summary> <div class="prose px-5 pb-5"><p>Hindi. Tumatakbo sa iyong browser ang SVGO. Ang code ng optimizer mismo ang tanging dina-download, sa unang beses na mag-optimize ka.</p></div> </details> <details class="faq group"> <summary>Bakit bilang mga larawan ipinapakita ang preview?</summary> <div class="prose px-5 pb-5"><p>Ang SVG ay document format na puwedeng maglaman ng JavaScript at mag-load ng mga panlabas na file. Ang dalawang preview ay ni-render bilang <code><img></code> mula sa lokal na blob URL, at sa mode na iyon ay hindi kailanman nagpapatakbo ng script o kumukuha ng panlabas na resource ang mga browser, kaya ligtas mag-preview dito ng SVG na hindi pinagkakatiwalaan. Ang na-optimize na code mismo ay naglalaman pa rin ng anumang script maliban kung naka-on ang <strong>Alisin ang mga script at event attribute</strong> (naka-on ito sa <strong>Pinakamataas</strong>).</p></div> </details> <details class="faq group"> <summary>Hindi na nagsi-scale ang na-optimize kong SVG. Ano ang nangyari?</summary> <div class="prose px-5 pb-5"><p>Malamang na naalis ang viewBox, ng <strong>Alisin ang viewBox</strong> o mas maaga ng ibang tool. I-optimize ulit ang orihinal nang naka-off ang plugin na iyon.</p></div> </details> <details class="faq group"> <summary>Bakit huminto sa paggana ang icon sprite o animation ko?</summary> <div class="prose px-5 pb-5"><p>Binago ng <strong>Paikliin at alisin ang mga hindi ginagamit na ID</strong> o ng <strong>Pagsamahin ang mga path</strong> ang mga element na tinutukoy ng iyong code. Gamitin ang <strong>Ligtas</strong> na preset, na pinapanatili ang dalawa.</p></div> </details> <details class="faq group"> <summary>Hindi mas maliit ang na-optimize na file. Bakit?</summary> <div class="prose px-5 pb-5"><p>Malamang na minified na ang SVG. Subukan ang <strong>Pinakamataas</strong> o mas mababang <strong>Decimal precision</strong>, at i-off ang <strong>Pretty print (may indent ang output)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Mga kaugnay na tool</h2> <ul class="card-grid mt-4"><li><a class="card" href="/fil/svg-to-png/"> <span class="card-title">SVG to PNG Converter</span> <span class="card-text">I-convert ang SVG sa PNG, JPG o WebP sa iyong browser sa anumang lapad, taas, scale o DPI, may transparent o kulay na background. Batch at ZIP, walang upload.</span> </a></li> <li><a class="card" href="/fil/image-to-svg/"> <span class="card-title">Image to SVG Tracer</span> <span class="card-text">I-convert ang PNG o JPG na logo o drawing sa SVG vector path sa iyong browser. May preset, bilang ng kulay, ligtas na preview at download, walang upload.</span> </a></li> <li><a class="card" href="/fil/image-compressor/"> <span class="card-title">Image Compressor – Paliitin ang Laki ng Larawan</span> <span class="card-text">I-compress ang mga larawang JPG, PNG at WebP gamit ang quality slider, ihambing ang laki bago at pagkatapos, at iproseso nang sabay. Walang upload.</span> </a></li> <li><a class="card" href="/fil/css-formatter/"> <span class="card-title">CSS Formatter at Minifier</span> <span class="card-text">I-beautify ang magulong CSS gamit ang maayos na indentation o i-minify gamit ang csso, at tingnan ang laki bago at pagkatapos. Sa browser, walang ina-upload.</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="Patalastas"><span class="ad-label">Patalastas</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">Mga libreng online tool na gumagana sa iyong browser. Nananatili sa iyong device ang iyong data.</p> </div> <nav aria-label="Mga kategorya"> <p class="font-semibold">Mga tool</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/fil/mga-text-tool/">Mga Text Tool</a></li><li><a class="link-muted" href="/fil/mga-tool-ng-developer/">Mga Tool ng Developer</a></li><li><a class="link-muted" href="/fil/web-seo-marketing/">Web, SEO, at Marketing</a></li><li><a class="link-muted" href="/fil/kulay-at-disenyo/">Kulay at Disenyo</a></li><li><a class="link-muted" href="/fil/larawan/">Larawan</a></li><li><a class="link-muted" href="/fil/pdf-at-dokumento/">PDF at Dokumento</a></li><li><a class="link-muted" href="/fil/matematika/">Matematika</a></li><li><a class="link-muted" href="/fil/mga-kalkulator-sa-pananalapi/">Mga Kalkulator sa Pananalapi</a></li><li><a class="link-muted" href="/fil/petsa-at-oras/">Petsa at Oras</a></li><li><a class="link-muted" href="/fil/unit-converter/">Unit Converter</a></li><li><a class="link-muted" href="/fil/kalusugan-at-fitness/">Kalusugan at Fitness</a></li><li><a class="link-muted" href="/fil/bahay-kusina-sasakyan/">Bahay, Kusina, at Sasakyan</a></li><li><a class="link-muted" href="/fil/generator/">Generator</a></li><li><a class="link-muted" href="/fil/pagsubok-ng-device/">Pagsubok ng Device</a></li><li><a class="link-muted" href="/fil/audio-video/">Audio at Video</a></li><li><a class="link-muted" href="/fil/edukasyon-at-wika/">Edukasyon at Wika</a></li><li><a class="link-muted" href="/fil/laro/">Laro</a></li></ul> </nav> <nav aria-label="Impormasyon"> <p class="font-semibold">Impormasyon</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/fil/tungkol-sa/">Tungkol sa amin</a></li> <li><a class="link-muted" href="/fil/makipag-ugnayan/">Makipag-ugnayan</a></li> <li><a class="link-muted" href="/fil/patakaran-sa-privacy/">Patakaran sa privacy</a></li> <li><a class="link-muted" href="/fil/mga-tuntunin/">Mga tuntunin sa paggamit</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>