Fail SVG Terlalu Besar? 8 Tips Mampatan dan Pengoptimuman

SVG yang berbesar beratus-ratus KB atau beberapa MB biasanya hasil daripada terlalu banyak sauh, laluan yang berlebih, metadata editor dan ketepatan perpuluhan yang tidak perlu. Lapan teknik di bawah disusun mengikut urutan dari sumber kepada penghantaran, dan semuanya boleh diamalkan.

1. Pada peringkat laluan: kurangkan sauh, satukan laluan

Tip 1: Kurangkan sauh (ringkaskan laluan)

Semakin banyak sauh dalam satu laluan, semakin besar fail dan semakin lambat lukisan. Naikkan tahap kelancaran ketika penukaran untuk mengurangkan sauh sejak awal. Bagi fail SVG yang sedia ada, gunakan Object → Path → Simplify dalam Illustrator atau Path → Simplify (Ctrl+L) dalam Inkscape untuk membuang sauh yang tidak diperlukan. Menyesuaikan kelancaran dan bilangan warna dalam alat penukaran PolySVG membolehkan anda menimbang kualiti berbanding saiz fail secara langsung.

Tip 2: Satukan laluan dan lapisan

Gabungkan beberapa laluan dengan warna isi yang sama menjadi satu untuk membuang atribut berulang, ratakan susunan kumpulan yang tidak berguna, dan buang lapisan tersembunyi serta elemen kosong. Dalam perisian reka bentuk, gunakan operasi unite pada pathfinder atau satukan lapisan sebelum mengeksport.

2. Di dalam fail: buang metadata, turunkan ketepatan

Tip 3: Buang metadata editor

SVG yang dieksport oleh Illustrator atau Inkscape lazimnya membawa ruang nama editor, <metadata>, komen dan tetapan eksport yang tidak memberi kesan langsung pada lukisan, jadi ia boleh dibuang secara manual atau dibersihkan secara automatik oleh SVGO. Namun, kekalkan <title> dan <desc> — kedua-duanya membantu aksesibiliti.

Tip 4: Turunkan ketepatan perpuluhan

Koordinat laluan selalunya membawa enam hingga lapan tempat perpuluhan, manakala lukisan pada skrin hanya memerlukan satu atau dua. Menetapkan floatPrecision kepada 1 atau 2 dalam konfigurasi SVGO mengecilkan fail dengan ketara tanpa perbezaan yang dapat dilihat. Untuk ikon yang sangat kecil, jangan memampatkan koordinat terlalu agresif atau bentuknya akan herot.

3. Automasi: satu arahan dengan SVGO

Tip 5: Optimumkan secara automatik dengan SVGO

SVGO ialah alat de facto bagi pengoptimuman SVG dan menyertakan berpuluh-puluh plugin: membuang komen dan metadata, menyatukan laluan, mengoptimumkan arahan laluan dan membersihkan nombor. Penggunaan asas:

npx svgo input.svg -o output.svg

Fail biasa mengecil 30% hingga 70%. Dua perkara yang perlu diingat: jangan buang atribut viewBox atau penskalaan akan rosak; dan untuk ikon yang mahu ditukar warna dengan CSS, kekalkan warna isi yang diwarisi dan jangan tetapkan warna secara terus.

Bandingkan saiz fail dan saiz penghantaran sebenar dalam alat pembangun pelayar sebelum dan selepas pengoptimuman, supaya anda dapat mengesahkan penjimatan. Tukar satu jenis parameter sahaja setiap kali, supaya langkah yang menyebabkan masalah itu mudah dikesan.

4. Struktur dan penggunaan semula: simbol dan lapisan warna

Tip 6: Guna semula bentuk berulang dengan defs dan use

Apabila ikon yang sama muncul beberapa kali dalam satu halaman, definisikannya sekali dengan <defs> dan rujuk dengan <use>, atau bina satu helaian sprite SVG; saiz fail dan bilangan permintaan akan turun bersama-sama.

Tip 7: Kawal lapisan warna dan elakkan bitmap terbenam

Turunkan bilangan warna ketika vektorisasi untuk mengurangkan bilangan lapisan, dan gunakan warna pekat dan bukan gradi kompleks di mana sahaja boleh. Yang paling penting, jangan benamkan imej bitmap base64 di dalam SVG — itu menjadikan fail vektor sebagai pembawa bitmap dan saiznya menjadi tidak terkawal. Laluan sisa daripada penukaran boleh diklik dan dibuang dalam penyunting dalam talian.

5. Penghantaran: mampatan penghantaran dan cache

Tip 8: Hidupkan gzip atau Brotli dan cache

SVG ialah teks, jadi menghidupkan gzip atau Brotli pada pelayan biasanya memotong saiz penghantaran lagi 60% hingga 80%; berikan fail SVG statik pengepala cache yang panjang. Ikon yang sangat kecil boleh dibenamkan terus ke dalam HTML, yang menjimatkan satu permintaan sepenuhnya. Prinsip di sebalik ini dibincangkan dalam kelebihan SVG; untuk mengawal saiz pada peringkat penukaran, baca cara menukar imej kepada SVG.

Urutan itu penting: kawal sauh dan lapisan warna pada sumber, bersihkan metadata dan ketepatan di dalam fail, kemudian jalankan SVGO, dan akhirnya hidupkan mampatan penghantaran. Dengan keempat-empat lapisan ini, fail SVG lazimnya mengecil satu orde magnitud.