Paano mag-compress ng mga SVG file.

Buksan ang SVG Compressor at pumili ng SVG file o Subukan ang sample. Ang sample ay svg-compressor.svg, isang 985-byte na orbit mark na may 512 × 512 viewBox, gradient fill, pamagat at paglalarawan. Gamitin ang I-paste ang SVG kapag ang markup ay nasa editor o clipboard na.

Tumatanggap ang tool ng hanggang 20 file na may 2 MB bawat isa. Pinaparse nito ang isang kumpletong SVG dokumento at tinatanggal ang mga standard na SVG document declaration nang hindi naglo-load ng mga external file. Ang malformed XML, custom entity declaration, at internal document subset ay tinatanggihan. Ang napakakumplikadong mga file ay maaari ring umabot sa limitasyon ng elemento o oras ng pagproseso.

Ang workflow na ito ay gumagawa ng static vector artwork. Ang mga script, event handler, external resource, animation, at embedded raster image ay tinatanggal. Ang orihinal na preview ay sanitized na, kaya hindi ito dapat ituring na isang unrestricted na rendering ng bawat feature sa source file.

Ipinapakita ng dalawang preview panel ang sanitized na orihinal at ang optimized na resulta. Ang mga laki sa tabi ng Orihinal at Optimized at ang buod ng byte ay naghahambing sa source file at sa natapos na output. Nag-uulat ito ng pagtaas kapag ang optimization ay nagpapalaki sa isang partikular na file sa halip na mangako ng pagbawas sa bawat pagkakataon.

Buksan ang Settings at itakda ang Decimal precision sa 2 para sa halimbawa. Ang precision ay mula 1 hanggang 5 at nagsisimula sa 3. Ang mas mababang halaga ay maaaring magpasimple ng numeric geometry ngunit maaaring mag-shift ng mga pinong kurba, maliliit na puwang, o mga naka-align na gilid. Itaas ito kapag nawawala sa preview ang mga detalyeng mahalaga.

Ang sample na ito ay gumagamit ng simpleng geometry, kaya ang precision na 2 ay nagpapanatili ng hugis nito. Ang ibang mga SVG na may masalimuot na decimal coordinate ay maaaring magbago nang higit pa. Ang pagtingin sa optimized na SVG markup ay nagpapakita ng aktwal na text na ida-download; hindi ito isang hiwalay na representasyon ng orihinal.

Iwanang naka-enable ang Panatilihin ang mga accessible na pamagat at paglalarawan para sa halimbawa. Pinapanatili nito ang SVG na pamagat at paglalarawan habang tinatanggal ang mga redundant na editor metadata at pinapasimple ang mga kwalipikadong markup. Ang mga ito ay magkakaibang uri ng impormasyon at hindi dapat ituring na mapagpapalit.

Ang Paikliin ang mga internal ID ay naka-on bilang default. Ina-update ng optimizer ang mga reference sa loob ng SVG, ngunit ang mga external na CSS o JavaScript ay maaaring umaasa pa rin sa mga orihinal na ID. I-off ang opsyong ito kapag ang file ay bahagi ng isang mas malaking application na nagpapangalan sa mga elemento nito, at subukan ang natapos na SVG sa kontekstong iyon.

Iwanang naka-off ang Responsive dimensions at Readable output markup para sa halimbawa. Tinatanggal ng Responsive dimensions ang fixed width at height kapag ang coordinate viewBox ay makakapagbigay ng scalable na laki. Ang Readable output ay nagdaragdag ng indentation at kapaki-pakinabang para sa maintenance, ngunit maaaring magpataas ng laki ng text.

Piliin ang Start, pagkatapos ay Download. Ang natapos na output ay 635 bytes kumpara sa 985-byte na source: isang 35.5% na pagbawas. Ang pamagat at paglalarawan nito ay nananatili, at ang ipinapakitang paghahambing ay rendered mula sa tunay na source at na-download na SVG.

Ipinapakita ng artikulo ang parehong mga vector sa 1,024 pixels para sa malinaw na ilustrasyon ng resulta; ang kanilang lohikal na laki ng coordinate ay nananatiling 512 × 512. Ang mas malaking preview ay hindi nagdaragdag ng raster content sa na-save na SVG. Suriin ang aktwal na vector sa iyong destination page bago palitan ang isang umiiral na production asset.

Ang isang file ay mada-download bilang SVG kasama ang orihinal nitong basename. Ang isang batch ay mada-download bilang isang ZIP, na may mga may numerong suffix para sa mga duplicate na filename. Ang pagproseso ay nagaganap sa browser. Panatilihin ang orihinal na source kung gusto mong sumubok ng iba't ibang setting ng optimization sa susunod.