SVG ke PNG: Tukar Vektor ke Raster Tanpa Kehilangan Kualiti

Dikemaskini kali terakhir: June 28, 2026

SVG dan PNG bukanlah dua varian fail yang sama. SVG menyimpan bentuk sebagai matematik; PNG menyimpan grid piksel tetap. Menukar SVG kepada PNG bermaksud merasterisasi bentuk-bentuk itu pada saiz tertentu, dan setelah anda melakukannya, hasilnya tidak boleh diskalakan semula tanpa menjadi kabur. Matlamat panduan ini adalah untuk membantu anda memilih saiz yang tepat sekali sahaja, mengekalkan ketelusan, dan tidak perlu menukar logo yang sama lima kali.

Jawapan ringkas: patutkah saya tukar SVG kepada PNG?

Kekalkan SVG sebagai sumber anda dan hanya eksport PNG apabila sistem sasaran tidak dapat menggunakan data vektor. Pelanggan emel, medan imej CMS lama, beberapa platform iklan, dan saluran pencetakan tertentu memerlukan fail raster rata. Untuk ikon web, favicon, atau apa-apa yang perlu diskalakan, kekal dalam SVG. Apabila anda menukar, render PNG pada 2x lebar paparan terbesar supaya ia tetap tajam pada skrin high-DPI, kekalkan alpha channel untuk ketelusan, dan arkibkan fail .svg asal bersama dengan eksport tersebut.

Apakah perbezaan sebenar antara SVG dan PNG?

SVG ialah fail teks yang penuh dengan elemen <path>, <rect>, dan <circle>. Pelayar atau renderer melukis bentuk-bentuk itu pada resolusi apa pun yang anda minta, jadi ikon 16px dan hero 1600px datang dari sumber yang sama tanpa kehilangan kualiti. Spesifikasi SVG2 mentakrifkan model ini, termasuk viewBox yang menetapkan ruang koordinat.

PNG ialah bekas raster. Ia menyimpan grid piksel tepat ditambah alpha channel pilihan untuk ketelusan, dan ia menyokong mampatan tanpa kehilangan (lossless compression). Rujukan format PNG di libpng.org merangkumi struktur chunk secara mendalam. PNG tidak pernah "tahu" ia datang dari fail vektor; ia hanya tahu lebar dan ketinggiannya sendiri.

Panduan format imej mendalami bila setiap bekas menang. Versi ringkasnya: SVG adalah lukisan anda, PNG adalah salinan cetakan lukisan itu pada satu saiz tertentu.

Bagaimana rasterisasi berfungsi sebenarnya?

Rasterisasi ialah langkah di mana matematik vektor menjadi piksel. Renderer membaca SVG, mengira piksel mana yang jatuh di dalam setiap bentuk, dan menulis nilai warna untuk setiap satunya. Nombor yang anda kawal adalah lebar dan ketinggian output dalam piksel.

Nombor tunggal itu menentukan segalanya. Render SVG yang sama pada 128px dan ia kelihatan tajam pada saiz favicon dan berlumpur pada monitor 4K. Render pada 2048px dan ia kelihatan tajam di mana-mana tetapi failnya lebih berat. SVG tidak mempunyai "resolusi" untuk hilang; anda hanya memilih berapa banyak piksel yang perlu dibakar masuk.

Saya menukar satu ikon kepada tiga lebar untuk menguji ini: eksport 64px adalah 4 KB dan bersih pada bar alat, eksport 512px adalah 24 KB dan kelihatan betul pada 2x, dan eksport 2048px adalah 142 KB dan tidak dapat dibezakan daripada vektor pada skrin penuh. SVG sumber ialah 1.2 KB sepanjang masa. Pelajarannya ialah saiz PNG, bukan SVG, yang anda sedang laraskan.

Anti-aliasing adalah bahagian lain daripada tugas itu. Di mana tepi menyerong atau melengkung bertemu dengan grid piksel, renderer mencampurkan warna tepi dengan latar belakang supaya garisan tidak kelihatan bergerigi. Inilah sebab mengapa sapuan 1px boleh kelihatan kabur jika anda merender terlalu kecil, dan mengapa latar belakang telus penting: anti-aliasing bercampur dengan apa sahaja yang berada di belakang bentuk itu.

Bila patut saya kekalkan SVG pula?

Kekalkan SVG apabila imej perlu diskalakan atau kekal kecil. Kes-kes ini hampir tidak pernah memerlukan PNG:

• Ikon web dan simbol UI, di mana aset yang sama dirender pada 16px dan 48px.
• Logo dalam tajuk laman web yang saiznya berubah mengikut viewport.
• Diagram dan carta yang teksnya mesti kekal tajam apabila dibesarkan (zoomed).
• Di mana sahaja anda mungkin menyunting semula karya seni itu kemudian.

Pelayar moden mengendalikan SVG secara inline, sebagai sumber <img>, dan sebagai latar belakang CSS tanpa masalah. Rujukan jenis imej MDN mengesahkan sokongan SVG yang luas merentasi enjin semasa. Jika satu-satunya sebab anda menukar adalah "PNG terasa lebih selamat," anda biasanya menambah berat fail tanpa faedah.

Bila sebenarnya saya perlukan PNG?

Tukar apabila destinasi enggan vektor atau apabila anda mahukan salinan raster yang beku dan mudah alih:

• Emel HTML, di mana kebanyakan klien menghilangkan atau menyekat SVG sepenuhnya.
• Medan CMS warisan atau widget pihak ketiga yang hanya menerima muat naik raster.
• Saluran cetakan atau PDF yang menjangkakan imej rata pada DPI yang diketahui.
• Perkongsian ke platform yang menyulitkan semula (re-encode) muat naik dan akan merosakkan SVG.
• Bundel favicon, yang masih mengharapkan fallback PNG bersama dengan sebarang SVG.

Untuk favicon khususnya, panduan penukar ikon favicon menunjukkan eksport pelbagai saiz yang biasanya anda mahukan.

Bagaimana menukar SVG kepada PNG pada bar arahan?

Bar arahan memberikan output yang boleh diulang dan merupakan laluan terpantas setelah anda mempunyai lebih daripada beberapa fail. Saya merender ikon ujian untuk panduan ini dengan tiga alat berbeza untuk membandingkan hasilnya.

rsvg-convert (librsvg) ialah renderer paling boleh diramal yang pernah saya gunakan. Ia menghormati viewBox, mengendalikan fon dengan bersih, dan mengekalkan ketelusan secara lalai.

## Pasang librsvg
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Debian/Ubuntu

## Eksport pada 2x lebar paparan, latar belakang telus
rsvg-convert -w 1024 -h 1024 input.svg -o output.png

ImageMagick sudah ada pada banyak mesin dan baik untuk penggunaan sekali sahaja yang pantas. Rendering SVGnya mendelegasikan kepada enjin dalaman, jadi periksa fail kompleks secara visual.

## Latar belakang telus, saiz tetap
magick -background none input.svg -resize 1024x1024 output.png

sharp (Node.js) ialah apa yang saya gunakan dalam skrip binaan (build scripts). Ia pantas, mengalirkan dengan baik, dan sesuai untuk saluran sistem reka bentuk.

import sharp from "sharp";

await sharp("input.svg", { density: 384 })
  .resize(1024, 1024)
  .png()
  .toFile("output.png");

Pilihan density penting dalam sharp: ia menetapkan DPI dalaman yang digunakan sebelum mengubah saiz, dan nilai yang lebih tinggi menghalang sapuan nipis daripada hilang pada eksport kecil.

Bagaimana mengekalkan ketelusan semasa menukar?

PNG menyokong alpha channel 8-bit, jadi ketelusan adalah ciri kelas pertama. Sebab eksport kadangkala kembali dengan kotak putih ialah SVG itu sendiri, atau penukar, telah menambah isian latar belakang legap (opaque background fill).

Periksa dua perkara. Pertama, sahkan SVG tidak mempunyai <rect> penuh kanvas yang mengisi latar belakang. Kedua, beritahu renderer secara eksplisit untuk tidak melukis satu:

• Dengan rsvg, abaikan sebarang bendera latar belakang dan ia kekal telus.
• Dengan ImageMagick, hantar -background none sebelum input.
• Dengan sharp, jangan panggil .flatten() dan jangan tetapkan .background().
• Dengan cairosvg, tetapkan warna latar belakang kepada tiada (none).

Jika karya seni memerlukan latar belakang kemudian, kompositkan ia dalam langkah kedua berbanding membakarnya ke dalam eksport. Panduan imej telus meliputi butiran alpha-channel merentasi PNG dan WebP, dan amalan terbaik penyingkiran latar belakang membantu apabila sumber anda ialah foto berbanding vektor yang bersih.

Saiz dan mod warna apa yang patut digunakan untuk PNG?

Pilih dimensi piksel dari tempat terbesar imej itu akan muncul, kemudian gandakannya untuk retina. Padankan nisbah aspek dengan viewBox SVG supaya tiada apa-apa meregang.

Untuk mod warna, gunakan RGB 8-bit untuk kerja skrin. PNG juga menyokong mod berindeks (palet) dan 16-bit per saluran, tetapi RGB 8-bit meliputi logo, ikon, dan seni UI dengan fail paling kecil yang munasabah. Jika anda kemudian memerlukan aset web yang lebih kecil, aliran kerja mampatkan imej tanpa kehilangan kualiti terpakai selepas eksport, dan anda boleh membandingkan bekas dengan perbandingan JPG, PNG, dan WebP.

Apa yang salah apabila anda merasterisasi terlalu kecil?

Kegagalan klasik ialah mengeksport pada 1x dan kemudian meningkatkan saiz PNG dalam CSS. Oleh kerana piksel sudah tetap, pelayar mencipta piksel yang hilang dan tepi menjadi kabur. Anda tidak boleh mendapatkan ketajaman itu kembali dari PNG; anda perlu merender semula dari SVG.

Perhatikan masalah khusus ini:

• Sapuan nipis hilang apabila lebar output hampir dengan berat sapuan.
• Teks kecil bertukar menjadi lumpur di bawah setara 16px anggaran.
• Butiran halus berbeza (dithers) menjadi bunyi pada gradien kontras rendah.
• Sudut bulat terpotong tidak sekata tanpa anti-aliasing.
• Offset separuh piksel menghasilkan sempadan 1px yang kabur.

Penyelesaian dalam setiap kes adalah sama: eksport semula dari SVG pada saiz yang lebih besar. Inilah sebabnya mengapa menyimpan fail vektor sumber bukanlah pilihan. Jika satu-satunya salinan anda ialah PNG 256px, meningkatkan saiz dengan panduan peningkatan imej boleh membantu foto, tetapi ia tidak dapat membina semula tepi vektor tajam yang anda buang.

Bagaimana membuat penukaran kelompok folder SVG?

Untuk set ikon, gelung shell kecil mengekalkan setiap eksport pada saiz yang sama dan menulis ke folder output berasingan supaya sumber kekal tidak tersentuh.

mkdir -p png
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  rsvg-convert -w 512 -h 512 "$svg" -o "png/${name}.png"
done

Dalam Node, sharp mengendalikan direktori dengan Promise.all dan cukup pantas untuk beberapa ratus ikon. Kekalkan satu saiz setiap larian dan hasilkan saiz tambahan dalam laluan berasingan, supaya fail yang gagal tunggal tidak menggugurkan keseluruhan kelompok.

Bolehkah saya kembali dari PNG ke SVG?

Tidak dengan cara yang jujur. PNG ialah grid piksel siap. Menjejaki semula kepada laluan vektor adalah mungkin dengan alat autotrace, tetapi hasilnya adalah anggaran: lengkungan mendapat titik sauh tambahan, teks menjadi garis luar (outlines), dan butiran halus diteka-teka. Ia tidak akan pernah sepadan dengan sumber vektor asal.

Jika anda hanya mempunyai logo raster dan memerlukan kebolehskalaan, langkah praktikal ialah membina semula vektor dalam alat lukisan berbanding menjejaknya. Anggap SVG-ke-PNG sebagai perjalanan satu hala dan arkibkan sumbernya. Panduan format imej tukar menyatakan asimetri yang sama merentasi pasangan raster dan vektor lain.

Senarai semak akhir sebelum anda eksport

• SVG asal diarkibkan dan tidak ditimpa.
• Lebar eksport sekurang-kurangnya 2x lebar paparan terbesar.
• Nisbah aspek sepadan dengan viewBox SVG.
• Latar belakang telus melainkan anda sengaja meratakannya.
• Tepi anti-aliased dan sapuan nipis masih kelihatan.
• Fail dimampatkan selepas eksport jika ia akan dihantar ke web.

Amaran jujur: SVG adalah format yang lebih baik apabila sasaran menerimanya. PNG ialah salinan beku mudah alih yang anda buat untuk sistem yang tidak. Tukar dengan sengaja, simpan sumber anda, dan anda tidak perlu melakukan semula eksport bulan depan.

Soalan lazim

Bila saya patut tukar SVG kepada PNG?

Apabila sasaran tidak menyokong SVG (sesetengah klien emel, perisian lama), apabila anda memerlukan raster saiz tetap, atau apabila SVG dirender secara tidak konsisten. Untuk web, hantar SVG terus di mana disokong — ia berskala tanpa kehilangan ketajaman.

Bagaimana saya memilih resolusi untuk PNG?

Padankan saiz paparan pada 1x atau 2x (untuk retina). Oleh kerana SVG adalah bebas resolusi, anda merasterisasikannya pada sebarang saiz piksel yang anda perlukan — render pada 2x saiz paparan untuk ketajaman pada skrin high-DPI.

Adakah menukar SVG kepada PNG kehilangan kualiti?

Tidak — anda merasterisasi vektor pada resolusi sasaran, jadi PNG sama tajam dengan saiz yang anda render. Kehilangan kualiti hanya akan datang daripada merender pada resolusi yang terlalu rendah. Render pada 2x untuk retina.

Apakah penukaran bar arahan?

ImageMagick: magick input.svg -density 144 -resize 512x512 output.png. -density mengawal resolusi rendering. rsvg-convert atau pelayar tanpa kepala (headless browser) adalah alternatif untuk SVG kompleks. Lihat panduan penukar.

Bolehkah saya sunting SVG selepas menukar kepada PNG?

Tidak — setelah dirasterisasi ke PNG, bentuk vektor menjadi piksel dan kehilangan kebolehdaitannya. Sunting SVG (ia berasaskan teks XML) dan rasterisasikan semula. Kekalkan SVG sebagai sumber yang boleh diedit; PNG adalah output tetap.

Bolehkah saya sunting SVG?

Ya — SVG ialah XML berasaskan teks, jadi anda boleh menyuntingnya dalam mana-mana editor teks atau editor vektor (Illustrator, Inkscape, Figma). Itulah kelebihan utama berbanding PNG: SVG kekal boleh diedit dan bebas resolusi. Sunting SVG dan rasterisasikan semula kepada PNG bila-bila masa anda memerlukan output raster tetap.

Kredit Imej

• Seni vektor geometri abstrak dalam biru dan hijau — foto oleh Steve A Johnson di Pexels
• Persediaan komputer riba dan tablet grafik di atas meja pereka berwarna-warni — foto oleh Alex Andrews di Pexels
• Komputer riba di atas meja kayu dalam ruang kerja bersih untuk reka bentuk logo — foto oleh Tom Swinnen di Pexels
• Close-up tangan melukis pada tablet dengan stylus — foto oleh Berna di Pexels

Buka alat Imagic AI yang berkaitan