Kompresor Animasi SVG

• Kompresi animasi SVG instan di browser: kompres animasi SVG secara instan di browser Anda, tanpa unggah ke server, tanpa pemrosesan cloud, dan tanpa menunggu. Kompresor animasi SVG membuang metadata editor, menghapus animasi SMIL tanpa efek, dan mengoptimalkan data path dalam milidetik, sepenuhnya di perangkat Anda.
• Kompresor animasi SVG online yang aman: SVG Anda tidak pernah meninggalkan perangkat. Kompresor animasi SVG berjalan sepenuhnya di browser Anda: tanpa unggah ke server, tanpa transmisi data, dan 100% privat. Aman untuk animasi UI milik sendiri, aset merek, dan file SVG produksi.
• 9 opsi kompresi yang dapat dikonfigurasi: kompresor animasi SVG menawarkan sembilan optimasi yang dapat diaktifkan satu per satu, dari menghapus data editor Inkscape/Illustrator hingga membuang animasi SMIL tanpa efek dan mengoptimalkan presisi koordinat path. Aktifkan hanya transformasi yang Anda butuhkan.
• 100% gratis selamanya: kompresor animasi SVG sepenuhnya gratis, tanpa registrasi, tanpa paket premium, tanpa batas ukuran file, dan tanpa iklan. Kompres animasi SVG tanpa batas tanpa biaya, selamanya.

• Optimasi performa web: kompres animasi SVG yang diekspor dari Inkscape, Illustrator, atau Figma sebelum disematkan ke halaman web: SVG hasil ekspor editor berisi kilobyte metadata yang tidak terlihat oleh pengguna tetapi membengkakkan ukuran file. Kompresor animasi SVG biasanya mencapai pengurangan 40–70% pada SVG animasi hasil ekspor editor.
• Optimasi komponen SVG React dan Next.js: kompres animasi SVG sebelum mengonversinya menjadi komponen React dengan SVGR: SVG yang lebih kecil menghasilkan komponen React yang lebih kecil dan mengurangi ukuran bundle JavaScript. Kompresor animasi SVG menghapus namespace editor yang menyebabkan masalah parsing di SVGR.
• Optimasi animasi untuk web seluler: kurangi ukuran file animasi SVG untuk pengiriman web seluler: SVG yang lebih kecil di-parse lebih cepat di CPU seluler dan mengurangi penggunaan data di jaringan 3G/4G. Kompresor animasi SVG menghapus animasi SMIL tanpa efek yang mengonsumsi CPU tanpa menghasilkan efek visual.
• Persiapan animasi untuk Lottie dan GSAP: kompres file SVG sumber sebelum mengimpornya ke alur kerja animasi Lottie atau GSAP: SVG yang lebih bersih dengan data path yang dioptimalkan menghasilkan impor animasi yang lebih akurat dan file keluaran yang lebih kecil. Kompresor animasi SVG menghapus artefak editor yang membingungkan alat animasi.
• Optimasi aset SVG design system: kompres ikon dan ilustrasi SVG animasi sebelum diterbitkan ke design system atau paket npm: kompresor animasi SVG menghapus metadata Figma, Sketch, dan Illustrator yang membengkakkan ukuran file SVG tanpa memengaruhi rendering.
• Optimasi Core Web Vitals dan PageSpeed: kurangi ukuran animasi SVG untuk meningkatkan skor Largest Contentful Paint (LCP) dan Total Blocking Time (TBT): SVG inline yang besar menunda rendering. Kompresor animasi SVG membantu Anda memenuhi rekomendasi "Enkode gambar secara efisien" dari Google PageSpeed untuk aset SVG.

File SVG (Scalable Vector Graphics) yang diekspor dari alat desain seperti Inkscape, Adobe Illustrator, dan Figma berisi banyak metadata editor: deklarasi namespace, properti dokumen, nama lapisan, dan atribut khusus alat: yang tidak terlihat oleh pengguna tetapi secara signifikan membengkakkan ukuran file. SVG dengan animasi SMIL (menggunakan <animate>, <animateTransform>, dan <animateMotion>) sering berisi keyframe berlebih yang nilai from dan to-nya identik: tidak menghasilkan animasi yang terlihat, tetapi mengonsumsi byte dan CPU. Kompresor animasi SVG kami menerapkan sembilan optimasi yang dapat dikonfigurasi untuk mengurangi ukuran file SVG sekaligus mempertahankan semua animasi yang terlihat dan rendering.

1. 1. Tempel kode SVG Anda: masukkan SVG Anda ke panel input, atau klik "Unggah .svg" untuk memuat file. Gunakan "Muat contoh" untuk mencoba kompresor dengan SVG animasi realistis hasil ekspor Inkscape.
2. 2. Pilih opsi kompresi dan klik "Kompres SVG": kesembilan optimasi diaktifkan secara default. Kompresor menerapkan setiap transformasi secara berurutan dan menampilkan komentar yang dihapus, elemen yang dihapus, dan path yang dioptimalkan. Pemrosesan berjalan sepenuhnya di browser Anda: SVG Anda tidak pernah meninggalkan perangkat Anda.
3. 3. Salin atau unduh SVG yang dikompres: panel keluaran menampilkan kode SVG terkompresi. Salin ke clipboard atau unduh sebagai file .svg. Ganti SVG asli di proyek Anda: keluaran terkompresi dirender secara identik di semua browser.

• Metadata editor: atribut namespace Inkscape (inkscape:*, sodipodi:*), atribut Illustrator (i:*), dan atribut Sketch (sketch:*) dihapus: ini bisa mencapai 20–50% dari ukuran SVG hasil ekspor.
• Animasi SMIL tanpa efek: elemen <animate> yang from sama dengan to tidak menghasilkan animasi yang terlihat: dihapus sepenuhnya. Ini sering muncul di SVG hasil ekspor alat yang menambahkan stub animasi ke semua elemen.
• Presisi koordinat path: koordinat data path dengan lebih dari 2 angka desimal dibulatkan, misalnya M 10.123456789 20.987654321 menjadi M 10.12 20.99. Presisi sub-piksel di luar 2 angka desimal tidak terlihat pada ukuran layar apa pun.
• Nilai atribut default: atribut seperti opacity="1", stroke="none", fill-opacity="1", dan display="inline" adalah nilai default SVG dan dihapus: menambah byte tanpa mengubah rendering.

Kompresor animasi SVG menerapkan transformasi yang aman dan konservatif menggunakan pemrosesan berbasis regex. Ia tidak mem-parsing DOM SVG, sehingga struktur bersarang yang kompleks mungkin tidak sepenuhnya dioptimalkan. Untuk kompresi maksimal, gunakan kompresor animasi SVG sebagai langkah pertama, lalu lewatkan keluarannya ke SVGO (pengoptimal SVG berbasis Node.js) untuk penghematan tambahan. Selalu verifikasi bahwa SVG terkompresi dirender dengan benar di browser target Anda sebelum menerapkan ke produksi, terutama untuk animasi SMIL kompleks dengan interaksi CSS.