Pengoptimum SVG

Ia berubah secara signifikan mengikut sumber. Fail SVG yang dieksport dari Adobe Illustrator biasanya menyertakan jumlah metadata khusus Illustrator, data lapisan, rujukan fon, dan namespace XML yang akan dibuang. Eksport Inkscape membawa namespace editor dan komen mereka sendiri. Figma SVGs biasanya lebih bersih. Penjimatan tipikal: 20-40% untuk SVG yang sudah bersih, 40-70% untuk eksport Illustrator atau Inkscape dengan metadata berat. Alat ini menunjukkan kiraan bait tepat sebelum dan selepas supaya anda sentiasa tahu hasilnya.

Alat reka bentuk menyisipkan data proprietari di dalam fail SVG untuk mengekalkan ciri penyuntingan mereka sendiri: Inkscape menyimpan nama lapisan dan posisi panduan dalam namespace sodipodi: dan inkscape:, Illustrator menyisip data dalam namespace i: dan dc:, dan alat lama merangkumi metadata Sketch atau Adobe. Tiada yang diperlukan untuk memaparkan SVG di dalam pelayar. Membuang data editor selalunya menghasilkan potongan pengurangan saiz yang paling besar, terutamanya untuk fail Illustrator yang kompleks.

Ketepatan perpuluhan mengawal berapa banyak digit yang dikekalkan selepas titik perpuluhan dalam nilai koordinat (cth., d="M 10.3456789 20.1234567"). Mengurangkan dari 6 ke 2 akan menukarkannya kepada d="M 10.35 20.12", menjimatkan bait dengan kos pembundaran koordinat yang sedikit. Untuk ikon dan ilustrasi ringkas, ketepatan 2-3 tidak kelihatan. Untuk lukisan teknikal terperinci atau ilustrasi dengan lengkungan halus, kekal pada 4-5. Semak pratonton pada zum 100% selepas mengurangkan ketepasan untuk mengesan sebarang artifak pembundaran.

Elemen SVG sering mempunyai ID yang panjang yang dijana oleh alat reka bentuk: id="rect_123456789" atau id="Layer_1_xA0_Background". Membersihkan ID menggantikannya dengan nama yang lebih pendek seperti id="a" atau id="b", menjimatkan bait merentasi fail SVG besar dengan banyak elemen rujukan. Ini selamat untuk fail SVG berdiri sendiri. Jika ID SVG anda dirujuk oleh selector CSS luaran atau JavaScript dalam halaman web anda (cth., document.getElementById("myIcon")), matikan pilihan ini atau kemas kini rujukan anda selepas pengoptimuman.

Ya. Klik "Or paste SVG code" untuk bertukar ke panel input kod dan tampal markup SVG anda secara langsung. Ini berguna apabila anda mempunyai SVG tertanam dalam fail HTML, disalin daripada alat reka bentuk, atau dijana oleh pustaka carta. Selepas mengoptimumkan, salin hasilnya dengan butang Copy Code dan tampalnya kembali ke tempat yang anda perlukan.

Tidak. Alat ini menggunakan DOMParser API terbina dalam pelayar untuk mengurai dan membersihkan SVG sepenuhnya dalam tab pelayar anda. Tiada muat naik fail berlaku, tiada pelayan memproses SVG anda, dan tiada apa-apa meninggalkan mesin anda. Ini menjadikannya selamat untuk mengoptimumkan aset SVG proprietari atau sensitif seperti rajah produk atau aset jenama.

Optimumkan sebelum commit. Fail SVG yang lebih kecil bermaksud operasi git yang lebih pantas, saiz repositori yang lebih kecil, dan diff yang lebih bersih (memandangkan metadata editor sering berubah pada setiap simpanan Illustrator). Aliran kerja yang baik: eksport SVG dari alat reka bentuk anda, jalankan melalui pengoptimum ini, semak pratonton, kemudian commit versi yang dioptimumkan. Simpan fail sumber asal dalam folder aset reka bentuk yang berasingan jika anda perlu menyuntingnya semula kemudian.