Ikuti contoh kerja ini, lalu sesuaikan kontrol yang sama dengan gambar Anda sendiri. Buka Kompresor SVG.
Unggah SVG statis atau tempel markup-nya
Buka Kompresor SVG dan pilih file SVG atau Coba sampel. Sampelnya adalah svg-compressor.svg, tanda orbit berukuran 985 bita dengan viewBox 512 × 512, isian gradien, judul, dan deskripsi. Gunakan Tempel SVG jika markup sudah ada di editor atau papan klip.
Alat ini menerima hingga 20 file dengan ukuran masing-masing 2 MB. Alat ini mengurai dokumen SVG lengkap dan menghapus deklarasi dokumen SVG standar tanpa memuat file eksternal. XML yang rusak, deklarasi entitas kustom, dan subset dokumen internal akan ditolak. File yang sangat kompleks juga dapat mencapai batas elemen atau waktu pemrosesan.
Alur kerja ini menghasilkan karya seni vektor statis. Skrip, penangan acara, sumber daya eksternal, animasi, dan gambar raster yang disematkan akan dihapus. Pratinjau Asli sudah dibersihkan, jadi jangan diartikan sebagai rendering tanpa batasan dari setiap fitur dalam file sumber.
Simpan salinan SVG asli. Ilustrasi interaktif atau SVG yang berisi foto adalah kasus penggunaan yang berbeda dari ikon vektor statis.
Bandingkan hasil dan atur presisi desimal
Dua panel pratinjau menampilkan versi asli yang telah dibersihkan dan hasil yang dioptimalkan. Ukuran di samping Asli dan Dioptimalkan serta ringkasan bita membandingkan file sumber dengan output akhir. Alat ini akan melaporkan peningkatan jika pengoptimalan membuat file tertentu menjadi lebih besar, alih-alih menjanjikan pengurangan setiap saat.
Buka Pengaturan dan atur Presisi desimal ke 2 untuk contoh ini. Presisi berkisar dari 1 hingga 5 dan dimulai pada 3. Nilai yang lebih rendah dapat menyederhanakan geometri numerik tetapi dapat menggeser kurva halus, celah kecil, atau tepi yang sejajar. Tingkatkan nilainya jika pratinjau kehilangan detail yang penting.
Sampel ini menggunakan geometri yang lugas, sehingga presisi 2 mempertahankan bentuknya yang dapat dikenali. SVG lain dengan koordinat desimal yang rumit mungkin berubah lebih banyak. Lihat markup SVG yang dioptimalkan untuk menampilkan teks aktual yang akan diunduh; ini bukan representasi terpisah dari aslinya.
Periksa vektor pada ukuran tampilan yang diinginkan dan pada tampilan yang lebih besar. Pergeseran halus mungkin sulit dilihat pada gambar kecil.
Contoh dalam panduan ini
Coba sampel: svg-compressor.svg, 985 byte, viewBox 512 × 512. Presisi desimal 2; pertahankan judul/deskripsi yang dapat diakses dan persingkat ID internal diaktifkan; dimensi responsif dan markup output yang mudah dibaca dinonaktifkan. SVG yang diunduh: 635 byte.
- Sumber SVG
- 985 byte
- SVG yang dioptimalkan
- 635 byte
- Pengurangan terukur
- 35.5%
- Konteks dipertahankan
- Judul, deskripsi, dan viewBox 512 × 512
Pertahankan deskripsi dan pertimbangkan ID eksternal
Biarkan Pertahankan judul dan deskripsi yang dapat diakses tetap aktif untuk contoh yang dikerjakan. Ini mempertahankan judul dan deskripsi SVG sambil menghapus metadata editor yang berlebihan dan menyederhanakan markup yang memenuhi syarat. Ini adalah jenis informasi yang berbeda dan tidak boleh dianggap dapat dipertukarkan.
Persingkat ID internal aktif secara default. Pengoptimal memperbarui referensi di dalam SVG, tetapi CSS eksternal atau JavaScript mungkin masih mengandalkan ID asli. Matikan opsi ini jika file tersebut merupakan bagian dari aplikasi yang lebih besar yang menamai elemen-elemennya, dan uji SVG yang sudah jadi dalam konteks tersebut.
Biarkan Dimensi responsif dan Markup output yang dapat dibaca tetap nonaktif untuk contoh ini. Dimensi responsif menghapus lebar dan tinggi tetap saat viewBox koordinat dapat menyediakan ukuran yang dapat diskalakan. Output yang dapat dibaca menambahkan indentasi dan berguna untuk pemeliharaan, tetapi dapat meningkatkan ukuran teks.
Untuk file ikon mandiri, pembersihan ID internal biasanya mudah. Untuk diagram yang diskrip secara eksternal, mempertahankan pengidentifikasi mungkin lebih penting daripada menghemat beberapa bita.
Unduh dan verifikasi vektor yang sudah jadi
Pilih Mulai, lalu Unduh. Output yang dikerjakan adalah 635 bita dibandingkan dengan sumber 985 bita: pengurangan 35.5%. Judul dan deskripsinya tetap ada, dan perbandingan yang ditampilkan dirender dari sumber asli dan SVG yang diunduh.
Artikel ini merender kedua vektor pada 1,024 piksel untuk ilustrasi hasil yang tajam; ukuran koordinat logisnya tetap 512 × 512. Pratinjau yang lebih besar tidak menambahkan konten raster ke SVG yang disimpan. Tinjau vektor aktual di halaman tujuan Anda sebelum mengganti aset produksi yang sudah ada.
Satu file diunduh sebagai SVG dengan nama dasar aslinya. Batch diunduh sebagai satu ZIP, dengan akhiran bernomor untuk nama file duplikat. Pemrosesan dilakukan di browser. Simpan sumber asli jika Anda ingin mencoba pengaturan pengoptimalan yang berbeda nanti.
Penghematan ukuran file hanya diukur terhadap sampel ini. SVG yang sudah dioptimalkan mungkin hanya menunjukkan sedikit peningkatan atau justru menjadi sedikit lebih besar.
Pertanyaan umum
Apakah SVG yang dioptimalkan akan terlihat persis sama?
Pengoptimal bertujuan untuk mempertahankan tampilan statis, tetapi pembulatan dan penghapusan konten yang tidak didukung dapat mengubah file. Bandingkan pratinjau dan uji SVG yang disimpan di proyek Anda.
Apa yang diubah oleh presisi desimal?
Ini mengontrol presisi yang digunakan untuk geometri numerik dan data jalur. Nilai yang lebih rendah dapat mengurangi ukuran tetapi dapat menggeser detail halus. Standarnya adalah 3.
Apakah ini menyimpan judul dan deskripsi?
Ya, secara default. Biarkan Tetap aktifkan judul dan deskripsi yang dapat diakses untuk mempertahankan elemen SVG tersebut.
Mengapa skrip atau gambar raster hilang?
Alat ini membuat output vektor statis. Skrip, acara, sumber daya eksternal, animasi, dan gambar raster yang disematkan sengaja dihapus selama sanitasi.
Bisakah saya menyimpan ID yang direferensikan oleh CSS?
Matikan Persingkat ID internal saat kode eksternal bergantung pada ID tertentu. Verifikasi file yang dioptimalkan di halaman target sebelum mengganti yang asli.
Apakah file SVG diunggah untuk pengoptimalan?
Tidak. Alat ini melakukan penguraian dan pengoptimalan di browser dan mengunduh hasilnya secara lokal.
Bisakah saya mengunggah SVG dengan DOCTYPE?
Deklarasi dokumen SVG standar diterima dan dihapus tanpa mengambil pengidentifikasi eksternalnya. Deklarasi entitas kustom dan subset dokumen internal ditolak.
Buat vektor lebih ringan, dengan hasil yang dapat Anda periksa.
Coba sampel atau gunakan file Anda sendiri, dan tinjau hasilnya sebelum dibagikan.
