Nilo-load lang ng tool ang opisyal na SVGO browser engine pagkatapos mong piliin ang Optimize. Ginagamit nito ang karaniwang plugin preset, inaalis ang mga script at event handler para mas ligtas gamitin sa web, at hinahayaan kang panatilihin ang mga ID na ginagamit ng CSS, JavaScript, gradient, mask, o external reference.
I-optimize ang SVG nang libre
Tumatakbo nang buo sa iyong browser - walang upload, walang sign-up.
Inaalis ang mga script at event handler
Orihinal na SVG
Na-optimize na SVG
Ctrl o Command + Enter
I-paste ang SVG markup o pumili ng file para magsimula
Ano ang ginagawa ng SVG optimizer?
Pinapaliit ng SVG optimizer ang vector file sa pamamagitan ng pag-alis ng editor metadata, mga comment, sobrang attribute, at hindi kailangang decimal. I-paste ang code o pumili ng file para patakbuhin ang SVGO sa browser, ihambing ang orihinal at na-optimize na bersyon, at kopyahin o i-download ang mas maliit na SVG nang hindi ina-upload ang artwork mo.
Paano gamitin
- 1Idagdag ang SVG. I-paste ang buong SVG markup, i-drag ang lokal na .svg file sa upload area, o buksan ang kasamang halimbawa.
- 2Pumili ng ligtas na setting. Itakda ang numeric precision, panatilihing naka-on ang multipass para sa dagdag na bawas, at panatilihin ang mga ID kung ginagamit ang mga ito ng ibang code.
- 3I-optimize at ihambing. Patakbuhin ang SVGO, pagkatapos ay ihambing ang bilang ng byte at ang preview ng orihinal at na-optimize na bersyon.
- 4Kopyahin o i-download. Kopyahin ang compact na markup o mag-download ng bagong .optimized.svg file nang hindi binabago ang orihinal na artwork.
Para kanino ito
- Mga frontend developer na nagpapaliit ng icon, logo, at illustration bago idagdag ang mga ito sa site o component library.
- Mga designer na nag-aalis ng metadata at editor-specific markup mula sa mga export ng Figma, Illustrator, Sketch, o Inkscape.
- Mga performance team na sumusukat sa eksaktong natipid na UTF-8 byte bago isama ang vector asset sa web bundle.
- Mga gumagawa ng component na naghahanda ng compact na inline SVG markup para sa React, Vue, Svelte, o karaniwang HTML.
FAQ
Libre ba ang SVG optimizer na ito?
Oo. Maaari kang mag-optimize ng SVG file nang walang account, bayad, o installation. Ipinapakita ng tool ang eksaktong pagbabago sa UTF-8 byte at puwedeng kopyahin o i-download ang resulta mula sa browser.
Ina-upload ba sa server ang SVG ko?
Hindi. Sa browser mismo ginagawa ang pagbasa ng file, pagproseso ng SVGO, pagsukat ng byte, at paggawa ng preview. Hindi ina-upload ng tool ang mga logo, icon, o hindi pa nailalabas na artwork mo.
Gaano kalaking SVG ang puwedeng i-optimize?
Tumatanggap ang tool ng hanggang 5 MB na SVG source. Nakakatulong ang limitasyong ito para manatiling mabilis ang pagproseso sa phone at karaniwang laptop. Para sa napakalaking exported illustration, alisin muna ang embedded raster image o hatiin ang artwork sa mas maliliit na file.
Mababago ba ng optimization ang itsura ng SVG?
Dinisenyo ang SVGO para panatilihin ang rendering habang inaalis ang sobrang data, pero maaaring maapektuhan ang komplikadong file ng matinding numeric rounding o paglilinis ng ID. Ihambing ang dalawang preview at subukan ang na-optimize na SVG sa aktuwal na gamit bago palitan ang production asset.
Ano ang binabago ng decimal precision?
Itinatakda ng decimal precision kung ilang digit ang pananatilihin ng SVGO sa coordinate, transform, at iba pang numeric value. Karaniwang mas maraming byte ang natitipid sa mababang value, pero maaari nitong igalaw ang maliliit na detalye ng napaka-precise o malaking artwork. Praktikal na default ang tatlong digit para sa karamihan ng web icon at illustration.
Dapat ko bang panatilihin ang mga SVG ID?
Panatilihin ang mga ID kapag ginagamit ang mga ito ng CSS, JavaScript, aria attribute, gradient, mask, filter, o external document. Para sa standalone na decorative file, puwedeng i-off ang setting para alisin o paikliin ng SVGO ang hindi ginagamit na identifier.
Inaalis ba ng optimizer ang mga script sa SVG file?
Oo. Inaalis ng proseso ang mga script element, event-handler attribute, at JavaScript link. Mas ligtas gamitin ang exported file bilang karaniwang web image, pero hindi angkop ang tool sa SVG application na umaasa sa script para gumana.
Ano ang ginagawa ng multipass optimization?
Sa multipass, muling pinoproseso ng SVGO ang resulta habang napapaliit pa ito ng susunod na pass. May mga pagbabagong nagbubukas ng panibagong puwedeng linisin sa kasunod na pass. Karaniwang maliit ang dagdag na tipid dahil sa unang pass nanggagaling ang karamihan ng bawas.