Alatan95

OPTIMUMKAN / PANDUAN IMEJ PRAKTIKAL

Cara memampatkan fail SVG

Vektor yang lebih ringan hanya berguna apabila perincian yang betul dikekalkan.

Untuk memampatkan SVG, muat naik fail atau tampal markahnya, bandingkan asal yang telah dibersihkan dengan versi yang dioptimumkan, laraskan ketepatan dan pilih Mula. Panduan ini menggunakan ikon orbit sebenar dan menyemak kedua-dua vektor yang dieksport serta pengurangan baitnya.

Ikuti panduan
SUMBER SAH DAN HASIL MUAT TURUNNYA
Sebelum Ikon orbit ungu SVG asal.

Asal 985-bait SVG, dipaparkan pada 1,024 px untuk perbandingan ini.

Selepas Dioptimumkan SVG mengekalkan ikon orbit pada saiz paparan yang sama.

Sebenar 635-bait SVG, dipaparkan pada resolusi paparan 1,024 px yang sama.

Asal 985-bait SVG, dipaparkan pada 1,024 px untuk perbandingan ini. Sebenar 635-bait SVG, dipaparkan pada resolusi paparan 1,024 px yang sama.
Iklan
TUTORIAL VIDEO PANTAS How to compress an SVG with a preview Choose an SVG, review the comparison, adjust precision and download the optimized vector. Narasi bahasa Inggeris Tonton video

How to compress an SVG with a preview

Iklan

Ikuti contoh kerja ini, kemudian sesuaikan kawalan yang sama dengan imej anda sendiri. Buka Pemampat SVG.

01

Muat naik SVG statik atau tampal markah

Buka Pemampat SVG dan pilih fail SVG atau Cuba sampel. Sampel tersebut ialah svg-compressor.svg, tanda orbit 985-bait dengan viewBox 512 × 512, isian kecerunan, tajuk dan penerangan. Gunakan Tampal SVG apabila markah sudah berada dalam editor atau papan keratan.

Alat ini menerima sehingga 20 fail pada 2 MB setiap satu. Ia menghuraikan dokumen SVG yang lengkap dan mengalih keluar pengisytiharan dokumen SVG standard tanpa memuatkan fail luaran. XML yang cacat, pengisytiharan entiti tersuai dan subset dokumen dalaman ditolak. Fail yang sangat kompleks juga boleh mencapai had elemen atau masa pemprosesan.

Aliran kerja ini menghasilkan karya seni vektor statik. Skrip, pengendali acara, sumber luaran, animasi dan imej raster terbenam dialih keluar. Pratonton Asal sudah dibersihkan, jadi ia tidak sepatutnya ditafsirkan sebagai paparan tanpa sekatan bagi setiap ciri dalam fail sumber.

Simpan salinan SVG asal. Ilustrasi interaktif atau SVG yang mengandungi gambar adalah kes penggunaan yang berbeza daripada ikon vektor statik.

02

Bandingkan hasil dan tetapkan ketepatan perpuluhan

Dua panel pratonton menunjukkan asal yang dibersihkan dan hasil yang dioptimumkan. Saiz di sebelah Asal dan Dioptimumkan serta ringkasan bait membandingkan fail sumber dengan output yang siap. Ia melaporkan peningkatan apabila pengoptimuman menjadikan fail tertentu lebih besar dan bukannya menjanjikan pengurangan setiap masa.

Buka Tetapan dan tetapkan Ketepatan perpuluhan kepada 2 untuk contoh ini. Ketepatan berjulat dari 1 hingga 5 dan bermula pada 3. Nilai yang lebih rendah boleh memudahkan geometri berangka tetapi mungkin mengalihkan lengkung halus, celah kecil atau tepi yang sejajar. Tingkatkan nilainya apabila pratonton kehilangan perincian yang penting.

Sampel ini menggunakan geometri yang mudah, jadi ketepatan 2 mengekalkan bentuknya yang boleh dikenali. SVG lain dengan koordinat perpuluhan yang rumit mungkin berubah lebih banyak. Lihat markah SVG yang dioptimumkan untuk mendedahkan teks sebenar yang akan dimuat turun; ia bukan perwakilan berasingan bagi yang asal.

Semak vektor pada saiz paparan yang dimaksudkan dan pada paparan yang lebih besar. Peralihan halus mungkin sukar dilihat dalam lakaran kecil.

Contoh dalam panduan ini

Cuba sampel: svg-compressor.svg, 985 bait, 512 × 512 viewBox. Ketepatan perpuluhan 2; kekalkan tajuk/penerangan yang boleh diakses dan pendekkan ID dalaman didayakan; Dimensi responsif dan penanda output yang boleh dibaca dilumpuhkan. Dimuat turun SVG: 635 bait.

Sumber SVG
985 bait
Dioptimumkan SVG
635 bait
Pengurangan yang diukur
35.5%
Konteks yang dikekalkan
Tajuk, penerangan dan 512 × 512 viewBox
03

Kekalkan penerangan dan pertimbangkan ID luaran

Biarkan Kekalkan tajuk dan penerangan yang boleh diakses didayakan untuk contoh yang dikerjakan. Ini mengekalkan tajuk dan penerangan SVG sambil mengalih keluar metadata editor yang berlebihan dan memudahkan markah yang layak. Ini adalah jenis maklumat yang berbeza dan tidak sepatutnya dianggap sebagai boleh ditukar ganti.

Singkatkan ID dalaman dihidupkan secara lalai. Pengoptimum mengemas kini rujukan dalam SVG, tetapi CSS luaran atau JavaScript mungkin masih bergantung pada ID asal. Matikan pilihan ini apabila fail tersebut adalah sebahagian daripada aplikasi yang lebih besar yang menamakan elemennya, dan uji SVG yang siap dalam konteks tersebut.

Biarkan Dimensi responsif dan Markah output boleh dibaca dimatikan untuk contoh ini. Dimensi responsif mengalih keluar lebar dan tinggi tetap apabila viewBox koordinat boleh menyediakan saiz yang boleh diskalakan. Output boleh dibaca menambah inden dan berguna untuk penyelenggaraan, tetapi boleh meningkatkan saiz teks.

Untuk fail ikon kendiri, pembersihan ID dalaman biasanya mudah. Untuk gambar rajah yang diskrip secara luaran, mengekalkan pengecam mungkin lebih penting daripada menjimatkan beberapa bait.

04

Muat turun dan sahkan vektor yang siap

Pilih Mula, kemudian Muat turun. Output yang dikerjakan ialah 635 bait berbanding sumber 985-bait: pengurangan 35.5%. Tajuk dan penerangannya kekal, dan perbandingan yang dipaparkan dirender daripada sumber tulen dan SVG yang dimuat turun.

Artikel ini merender kedua-dua vektor pada 1,024 piksel untuk ilustrasi hasil yang tajam; saiz koordinat logik mereka kekal 512 × 512. Pratonton yang lebih besar tidak menambah kandungan raster pada SVG yang disimpan. Semak vektor sebenar dalam halaman destinasi anda sebelum menggantikan aset pengeluaran sedia ada.

Satu fail dimuat turun sebagai SVG dengan nama asas asalnya. Kelompok dimuat turun sebagai satu ZIP, dengan akhiran bernombor untuk nama fail pendua. Pemprosesan berlaku dalam pelayar. Simpan sumber asal jika anda ingin mencuba tetapan pengoptimuman yang berbeza kemudian.

Penjimatan saiz fail diukur berdasarkan sampel ini sahaja. SVG yang sudah dioptimumkan mungkin menunjukkan sedikit peningkatan atau menjadi lebih besar sedikit.

BUTIRAN BERGUNA

Soalan lazim

Adakah SVG yang dioptimumkan akan kelihatan sama persis?

Pengoptimum bertujuan untuk mengekalkan rupa statik, tetapi pembundaran dan pembuangan kandungan yang tidak disokong boleh mengubah fail. Bandingkan pratonton dan uji SVG yang disimpan dalam projek anda.

Apakah yang diubah oleh ketepatan perpuluhan?

Ia mengawal ketepatan yang digunakan untuk geometri berangka dan data laluan. Nilai yang lebih rendah boleh mengurangkan saiz tetapi mungkin mengalihkan perincian halus. Lalai ialah 3.

Adakah ia mengekalkan tajuk dan penerangan?

Ya, secara lalai. Biarkan Kekalkan tajuk dan penerangan yang boleh diakses didayakan untuk memelihara elemen SVG tersebut.

Mengapakah skrip atau imej raster hilang?

Alat ini mencipta output vektor statik. Skrip, acara, sumber luaran, animasi dan imej raster terbenam sengaja dialih keluar semasa sanitasi.

Bolehkah saya mengekalkan ID yang dirujuk oleh CSS?

Matikan Pendekkan ID dalaman apabila kod luaran bergantung pada ID tertentu. Sahkan fail yang dioptimumkan dalam halaman sasaran sebelum menggantikan yang asal.

Adakah fail SVG dimuat naik untuk pengoptimuman?

Tidak. Alat ini melakukan penghuraian dan pengoptimuman dalam pelayar dan memuat turun hasilnya secara setempat.

Bolehkah saya memuat naik SVG dengan DOCTYPE?

Pengisytiharan dokumen SVG standard diterima dan dialih keluar tanpa mengambil pengecam luarannya. Pengisytiharan entiti tersuai dan subset dokumen dalaman ditolak.

GILIRAN ANDA

Jadikan vektor lebih ringan, dengan hasil yang boleh anda periksa.

Cuba sampel atau gunakan fail anda sendiri, dan semak hasil sebelum berkongsi.

Buka Pemampat SVG

Perincian imej

Bahasa38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

Pilih bahasa anda. Tutorial video kini menggunakan narasi bahasa Inggeris.