2026-07-28·4 min read
PNG lwn SVG: Format Mana untuk Logo, Ikon dan Grafik?
Perbandingan praktikal format PNG dan SVG — bila menggunakan setiap satu untuk logo, ikon, ilustrasi dan grafik web.
PNG dan SVG kedua-duanya format popular untuk logo dan grafik — tetapi ia berfungsi dengan sangat berbeza. Memilih yang salah menghasilkan sama ada logo kabur atau fail yang tidak boleh dibuka di mana-mana. Berikut cara membuat keputusan.
PNG lwn SVG: Perbezaan Teras
- PNG (Portable Network Graphics) adalah format raster — ia menyimpan imej sebagai grid piksel. PNG 200×200 mempunyai tepat 40,000 piksel. Skala ia naik dan ia menjadi kabur.
- SVG (Scalable Vector Graphics) adalah format vektor — ia menyimpan bentuk sebagai arahan matematik. Logo SVG kelihatan sempurna tajam pada sebarang saiz, daripada favicon (16×16) ke papan iklan.
Bila Menggunakan PNG
- Imej kompleks atau fotografi: SVG boleh menerangkan bentuk kompleks tetapi tidak praktikal untuk foto
- Keserasian merentas platform: PNG terbuka di mana-mana — pelayar, pemproses kata, e-mel, aplikasi pemesejan
- Apabila anda memerlukan saiz output tetap: Untuk catatan media sosial, cetakan pada DPI diketahui, atau aset UI sempurna piksel
- Tangkapan skrin dan mockup UI: Raster secara semula jadi, PNG adalah format yang betul
- Apabila SVG tidak tersedia: PNG resolusi tinggi (lebar 2000+ piksel) berfungsi baik untuk kebanyakan tujuan
Bila Menggunakan SVG
- Logo dan tanda jenama: Logo SVG kekal tajam pada sebarang saiz — pengepala laman web, ikon aplikasi mudah alih, risalah bercetak
- Ikon: Ikon UI dalam SVG berskala sempurna pada skrin retina/DPI tinggi
- Ilustrasi diperbuat daripada bentuk: Carta, rajah, infografik, ilustrasi
- Animasi: SVG menyokong animasi CSS dan JavaScript
- Reka bentuk web responsif: SVG berskala secara automatik dengan tetingkap pelayar
Perbandingan PNG lwn SVG
| Ciri | PNG | SVG |
|---|---|---|
| Kebolehskalaan | Saiz tetap (piksel) | Tak terhingga (vektor) |
| Saiz fail (logo) | 20–200KB | 5–50KB |
| Sokongan foto | Ya | Tidak |
| Ketelusan | Ya | Ya |
| Animasi | Tidak | Ya (CSS/JS) |
| Sokongan pelayar | Universal | Semua pelayar moden |
| Sokongan e-mel | Universal | Terhad (elakkan dalam e-mel) |
| Kebolehsuntingan | Memerlukan penyunting raster | Mana-mana penyunting teks atau Illustrator |
Menggunakan Kedua-duanya Bersama
- Banyak aliran kerja menggunakan kedua-dua format:
- Kekalkan SVG sebagai fail logo induk untuk penyuntingan dan penskalaan
- Eksport versi PNG pada saiz tertentu untuk media sosial, pembentangan dan e-mel
- Guna PNG 2× (cth. 400×400 untuk logo 200×200) untuk paparan retina
- Jika anda hanya mempunyai logo PNG, guna Pengubah Saiz Imej kami untuk mencipta versi resolusi tinggi dan PNG → WebP untuk kegunaan web.
Cuba Percuma — Tanpa Pendaftaran
Ubah saiz, mampatkan dan tukarkan imej dalam pelayar anda sekarang.
Lebih Banyak Panduan
Baca lagi JPG lwn PNG lwn WebP: Format Imej Mana Patut Anda Gunakan?Baca lagi Cara Menukar PNG ke JPG Dalam Talian Percuma — Serta-mertaBaca lagi Cara Memampatkan Fail PNG Tanpa Kehilangan KualitiBaca lagi Cara Menukar JPG ke PNG Dalam Talian PercumaBaca lagi Cara Menukar PNG ke WebP Dalam Talian Percuma — Fail Lebih Kecil, Kualiti SamaBaca lagi Cara Menukar HEIC ke PNG Dalam Talian Percuma