PNG vs SVG - khi nao dung tung dinh dang
PNG va SVG la hai dinh dang duoc lua chon cho logo, icon va phan tu UI tren web hien dai. Chung giai quyet cung mot van de - anh sac net tren moi man hinh - nhung theo cach co ban khac nhau. PNG luu pixel; SVG luu chi dan ve. Lua chon dung phu thuoc vao cai ban dang hien thi, no di den dau va render cuoi cung can lon den dau. Huong dan nay che do co che, su danh doi va bon quyet dinh thuc te xac dinh dinh dang nao thang.
Moi dinh dang thuc su hoat dong nhu the nao
PNG (Portable Network Graphics) la dinh dang raster. Mot tep PNG luu mot luoi pixel mau - moi pixel co gia tri do, xanh la, xanh duong va alpha ro rang. Khi trinh duyet hoac trinh xem anh cua ban mo mot PNG, no doc cac gia tri pixel do tu tep va ve len man hinh o do phan giai goc. Phong to mot PNG tren man hinh keo dan tung pixel, tao ra upscale mo quen thuoc. Thu nho mot PNG lay mau lai luoi; tuy thuoc thuat toan, canh co the lam mem.
SVG (Scalable Vector Graphics) la dinh dang vector. Mot tep SVG la mot tai lieu XML mo ta hinh dang, duong thang, duong cong va to mau. Khong co pixel trong nguon - chi co chi dan nhu "ve mot hinh tron tai (20,20) voi ban kinh 15, to mau do". Khi trinh duyet render SVG, no tinh toan pixel tai cho o do phan giai ma man hinh yeu cau. Cung tep SVG render sac net o 16×16 cho favicon va o 3000×3000 cho bang quang cao, khong mat chat luong.
So sanh ben canh nhau
| Thuoc tinh | PNG | SVG |
|---|---|---|
| Ma hoa | Luoi pixel (raster) | Chi dan ve (vector) |
| Kha nang scale | Mat chat luong khi phong to | Vo han, khong mat |
| Kich thuoc tep (logo don gian) | ~20-80 KB | ~2-8 KB |
| Kich thuoc tep (minh hoa phuc tap) | Vua (~150 KB) | Co the phong (~500 KB+) |
| Kich thuoc tep (anh chup) | Lon (~1-3 MB) | Khong phu hop |
| Trong suot | Co (kenh alpha) | Co (do mo tung hinh) |
| Hoat hinh | Qua APNG (ho tro han che) | SMIL + CSS (ho tro rong) |
| Ho tro trinh duyet | Pho thong | IE9+, tat ca hien dai |
| Co the sua trong trinh chinh sua van ban | Khong | Co (la XML) |
| Tao kieu CSS luc chay | Khong | Co (mau, net, bo loc) |
Khi nao PNG thang
Anh chup. Anh chup co hang trieu gia tri pixel thay doi dan dan - chinh xac la cai ma dinh dang raster duoc thiet ke. SVG khong the bieu dien anh chup hieu qua; nhung pixel duoi dang blob base64 trong SVG anh huong loi the vector. Dung PNG cho anh chup, hoac tot hon, dung JPG hoac WebP cho anh khong trong suot de cat them kich thuoc tep.
Minh hoa phuc tap voi nhieu gradient, bong va chi tiet o muc pixel. Neu icon cua ban trong nhu mot buc tranh nho - bong do mem, gradient nhieu diem, lop ket cau - mot PNG cua render cuoi cung phang thuong nho hon SVG voi bo loc tuong duong.
Anh chup UI, van ban hoac code. Anh chup von la du lieu pixel. PNG bao toan do sac net chinh xac cua van ban render va chrome UI khong co artefact nen mat. Uu tien WebP khong mat de tiet kiem kich thuoc tep neu khan gia dung trinh duyet hien dai.
Khi nen tang muc tieu khong ho tro SVG. Mot so dinh dang tai lieu (Word, mot so ung dung email, PowerPoint cu) van render SVG khong nhat quan. Neu dich cuoi cung khong dam bao ho tro SVG, xuat SVG sang PNG o do phan giai muc tieu truoc.
Khi nao SVG thang
Logo. Logo cua ban phai trong dep o 24×24 trong tab trinh duyet, 200×200 tren man hinh dang nhap va 2000×2000 tren banner hoi nghi. Mot tep SVG duy nhat lam ca ba voi do trung thuc hoan hao. PNG yeu cau xuat nhieu kich thuoc (24, 48, 96, 200, 400, 1000, 2000) va chon dung cai theo ngu canh - mot ganh nang bao tri.
Icon trong UI. Icon SVG co the duoc tao kieu voi CSS (fill, stroke, opacity, filter) va hoat hinh khi hover/focus. Cung icon ke thua mau van ban hien tai bang cach dat fill: currentColor. Icon PNG yeu cau tep rieng cho moi bien the mau.
Bieu do, so do va infographic. Bat cu thu gi ve tu hinh dang va van ban - so do to chuc, so do kien truc, luu do, do thi thong ke - render sach se trong SVG va luon sac net o moi muc zoom. Phong to so do PNG nhanh chong tiet lo aliasing.
Phan tu UI hoat hinh. Hoat hinh SVG qua SMIL, chuyen tiep CSS hoac JavaScript scale tot hon APNG hoac GIF dong cho hinh dang hinh hoc (spinner tai, chi bao trang thai, micro-interaction). Kich thuoc tep van nho ngay ca cho hoat hinh phuc tap.
Bon quyet dinh thuc te trong cong viec hang ngay
Logo tren trang marketing. → SVG. Cung tep xu ly header (nho), hero (vua) va xuat ban in/banner (lon) ma khong can tep rieng va khong mat chat luong. Chi quay lai PNG neu can nhung logo trong dinh dang tai lieu tu choi SVG.
Icon ung dung / favicon. → SVG cho master; xuat sang PNG o 16, 32, 48, 180, 192, 512 cho fallback apple-touch-icon va favicon.ico. Ca hai tep di trong bundle trien khai; trinh duyet chon dung cai theo ngu canh.
Anh chup san pham. → PNG neu trong suot quan trong (cat tren nen trang hoac nen co hoa van); neu khong JPG hoac WebP cho mot nua kich thuoc tep. Khong bao gio SVG.
So do hoac bieu do trong tai lieu. → SVG nhung trong HTML (de no co zoom, tiep can qua van ban ben trong SVG va co the chia se nhu mot tep duy nhat). Xuat sang PNG chi khi muc tieu la PDF hoac Word khong ton trong do trung thuc SVG.
Duong chuyen doi giua PNG va SVG
PNG → SVG la thao tac "tracing". Dinh dang muc tieu can dinh nghia hinh dang, vi vay tracer phan tich canh va vung mau trong PNG va tao duong vector xap xi. Ket qua tuyet voi cho logo va icon don gian (canh sach, it mau) va kem cho anh chup (qua nhieu vung mau de trace co y nghia). Dung PNG to SVG - chinh tham so lam muot, xem truoc va lap di lap lai cho den khi duong da trace khop voi ban goc.
SVG → PNG la thao tac "rasterize". Trinh duyet (hoac mot bo chuyen doi) danh gia chi dan SVG o do phan giai cu the va ghi gia tri pixel. Dung SVG to PNG - chon kich thuoc dau ra truoc khi xuat; khac voi huong nguoc, rasterize khong mat cho kich thuoc muc tieu nhung co nghia ban cam ket voi mot do phan giai duy nhat.
Chuyen doi vong (SVG → PNG → SVG) cong don mat trong giai doan PNG va trace tiep theo. Giu nguon SVG master va xuat huong vi PNG khi can; dung bao gio di huong nguoc tru khi ban khong co nguon SVG de lam viec.
Cong cu lien quan
- PNG to SVG Converter - trace anh raster sang vector co the scale.
- SVG to PNG Converter - rasterize vector sang PNG hoac WebP o moi kich thuoc.
- Compress JPEG - giam kich thuoc tep anh chup voi chat luong duoc AI dieu chinh.
- Resize Image - dat kich thuoc pixel chinh xac voi noi suy bicubic.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- Truly in-browser - no upload. Every file-processing tool on this site runs in your browser through modern Web APIs (File, FileReader, Canvas, Web Audio, WebGL, Web Workers). Your photo, PDF, audio, or text never leaves your device.
- No tracking during tool use. Analytics ends at the page view. The actual input you paste, drop, or capture is never sent to any server and never written to any log.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.