PNG berbanding SVG: Format Mana Yang Perlu Dipilih?

1. Perbezaan utama: grid piksel berbanding laluan matematik

PNG ialah bitmaps: ia membelah imej kepada piksel demi piksel dan mencatat warna setiap titik. Apabila PNG diperbesar, pada asasnya pikselnya ikut membesar, lalu muncullah bergerigi dan kabur. SVG ialah vektor: ia menggambarkan bentuk dengan arahan matematik seperti koordinat dan lengkung Bézier, dan apabila diperbesar pelayar melukisnya semula pada saiz baharu, jadi sentiasa tajam pada sebarang skala. Di situlah akar semua perbezaan antara keduanya.

Dari segi ketelusan, PNG mempunyai kanal alfa jadi boleh menyimpan latar lutsinar; SVG memang sedia lutsinar — selagi anda tidak melukis segi empat latar, bahagian di luar bentuk akan tembus. Sebagai catatan, JPG tidak menyokong ketelusan, latar putihnya ialah warna yang benar-benar dilukis.

2. Saiz fail dan pengalaman memuat turun

Bagi grafik mudah seperti ikon dan logo, SVG lazimnya hanya beberapa KB dan satu berkas sesuai untuk semua ketumpatan skrin; PNG pula sering memerlukan beberapa set @2x dan @3x agar kekal tajam pada skrin Retina, lalu saiznya berlipat ganda. Bagi foto pula keadaan berbalik: gradasi warna foto amat kaya, jadi memaksa vektorisasi menghasilkan ribuan laluan dan SVG boleh menjadi jauh lebih besar daripada JPG atau WEBP, lalu tidak berbaloi.

Daripada prinsip mampatan, PNG merekod piksel secara lossless, jadi semakin kompleks imej semakin besar saiz failnya; SVG pula teks tulen, dan arahan laluan serta koordinat yang berulang amat sesuai untuk dimampatkan. Itulah sebabnya walaupun kedua-duanya sama-sama disebut lossless, saiz fail kedua-duanya amat berbeza.

Gunaan	Format disyorkan	Sebab
Ikon laman web / logo	SVG	Satu berkas untuk semua resolusi, warna boleh ditukar dengan CSS
Foto	JPG / WEBP	Saiz kecil, ketepatan paras foto
Tangkapan skrin	PNG	Ketelitian peringkat piksel, mampatan lossless
Carta data	SVG	Penskalaan tajam, interaktif melalui pengaturcaraan
Gambar profil media sosial	PNG / JPG	Kebanyakan platform hanya menerima bitmaps

3. Bila hendak menggunakan PNG

• Foto, pencahayaan kompleks dan imej dengan gradasi halus;
• Tangkapan skrin dan imej antara muka yang memerlukan ketelitian peringkat piksel;
• Situasi yang platform hanya menerima bitmaps, contohnya muat naik gambar profil di sesetengah papan pemuka;
• Sandaran keserasian: persekitaran yang sangat lama tidak menyokong SVG.

4. Bila hendak menggunakan SVG

• Ikon laman web dan logo: satu berkas untuk semua resolusi, kekal tajam pada skrin Retina;
• Grafik yang warnanya perlu ditukar dengan CSS atau JS atau diberi animasi garis;
• Carta data: pustaka visualisasi seperti ECharts menghasilkan SVG secara bawaan;
• Cetakan, ukiran laser dan letterpress: peranti mengenali laluan vektor.

5. Bolehkah PNG dan SVG ditukar antara satu sama lain

Boleh. PNG ke SVG: gunakan alat PNG ke SVG PolySVG atau alat imej ke SVG, muat naik kemudian klik jana untuk mula melvektorisasi; pada ikon dan logo hasilnya bagus, manakala foto akan kelihatan bergaya ilustrasi. Penukaran percuma dan latar lutsinar PNG kekal utuh. SVG yang dihasilkan boleh kemudian dibawa ke penyunting untuk menukar warna dan membuang latar, membentuk aliran kerja yang lengkap. SVG ke PNG: buka dalam penyunting SVG dalam talian dan eksport PNG dengan resolusi pilihan anda, sesuai untuk dimasukkan ke dokumen atau dijadikan pratonton.

Perlu diingat, PNG ke SVG bukan sekadar "simpan format lain", tetapi proses vektorisasi yang melukis semula kontur: bahan bergrafik menghasilkan laluan yang bersih, manakala foto diringkas kepada blok warna. Sebaiknya pratonton dahulu di dalam alat sebelum memuat turun dan menggunakannya.

Satu ayat untuk membuat keputusan: ikon, logo dan carta pilih SVG; foto dan tangkapan skrin pilih PNG/JPG/WEBP. Jika tidak pasti, utamakan SVG untuk kandungan bergrafik. Untuk lanjutan, baca Apa itu SVG dan Tiga cara menukar imej ke SVG.