PNG sau SVG: ce format ar trebui să folosiți?
PNG și SVG comparate: cum funcționează fiecare format, transparența, dimensiunea fișierului, scalarea și scenariile potrivite, plus conversia dintre PNG și SVG.
1. Diferența esențială: grile de pixeli față de trasee matematice
Un PNG este o imagine raster: taie imaginea în pixeli individuali și reține culoarea fiecăruia. Mărirea unui PNG doar întinde acei pixeli, de aceea apar treptele și blurul. Un SVG este o imagine vectorială: descrie formele prin instrucțiuni matematice precum coordonatele și curbele Bézier, iar browserul redesenează desenul la noua dimensiune, așa că rămâne clar la orice scară. Acest unic fapt este rădăcina aproape tuturor diferențelor dintre cele două formate.
Cât privește transparența, PNG acceptă un canal alfa și poate stoca un fundal transparent. SVG este transparent prin natură — cât timp nu desenați un dreptunghi de fundal, tot ce e în afara desenului rămâne transparent. Ca observație secundară: JPG nu are deloc transparență; fundalul său alb este o culoare reală pictată în imagine.
2. Dimensiunea fișierului și viteza de încărcare
Pentru grafică simplă precum iconițele și logo-urile, un SVG are adesea doar câțiva KB, iar un singur fișier se potrivește fiecărei densități de ecran. PNG, în schimb, are de obicei nevoie de versiuni @2x și @3x pentru a rămâne clar pe display-urile Retina, ceea ce înmulțește dimensiunea fișierului. La fotografii situația se inversează: tranzițiile bogate de culoare produc un număr uriaș de trasee când sunt vectorizate, așa încât SVG-ul ajunge mult mai mare decât un JPG sau WEBP — nu merită.
Motivul stă în modul de comprimare. PNG înregistrează pixelii cu o comprimare fără pierderi, deci cu cât imaginea e mai complexă, cu atât fișierul e mai mare. SVG este text simplu, în care comenzile și coordonatele repetate se comprimă extrem de bine. De aceea două formate numite ambele „fără pierderi” se comportă atât de diferit ca dimensiune.
| Caz de utilizare | Format recomandat | De ce |
|---|---|---|
| Iconițe / logo-uri de site | SVG | Un fișier pentru orice rezoluție, iar CSS îl poate recolora |
| Fotografii | JPG / WEBP | Fișiere mici cu fidelitate fotografică |
| Capturi de ecran | PNG | Exact la nivel de pixel și fără pierderi |
| Diagrame de date | SVG | Clare la scalare și ușor de făcut interactive |
| Avatare pe rețele sociale | PNG / JPG | Cele mai multe platforme acceptă doar raster |
3. Când să folosiți PNG
- Fotografii, iluminare complexă și degradee fine;
- Capturi de ecran și interfețe care trebuie să fie exacte la nivel de pixel;
- Locuri unde platforma acceptă doar raster, precum încărcarea avatarului pe unele panouri;
- Ca variantă de compatibilitate pentru medii foarte vechi, care nu suportă SVG.
4. Când să folosiți SVG
- Iconițe și logo-uri de site: un fișier pentru orice rezoluție, în continuare clare pe display-urile Retina;
- Grafică care trebuie recolorată prin CSS sau JavaScript și animată prin desenarea liniilor;
- Diagrame de date: bibliotecile de vizualizare precum ECharts produc SVG implicit;
- Tipărire, gravare cu laser și tăiere de vinil, unde dispozitivul citește trasee vectoriale.
5. Se pot converti PNG și SVG unul în celălalt?
Da. PNG în SVG: folosiți instrumentul PNG în SVG PolySVG sau instrumentul Imagine în SVG, încărcați fișierul și faceți clic pe generare pentru a-l vectoriza — rezultatul este excelent pentru iconițe și logo-uri, iar fotografiile capătă un stil ilustrativ. Conversia este gratuită, iar un PNG transparent își păstrează fundalul transparent. SVG-ul rezultat poate fi deschis în continuare în editor pentru recolorare și eliminarea fundalului, ceea ce încheie fluxul de lucru. SVG în PNG: deschideți fișierul în editorul SVG online și exportați un PNG la rezoluția dorită — perfect pentru documente sau imagini de previzualizare.
Un lucru de reținut: conversia PNG în SVG nu este o simplă „salvează ca”, ci o vectorizare care redesenează contururile. Elementele grafice ies ca trasee curate, iar fotografiile sunt condensate în blocuri de culoare. Previzualizați mai întâi rezultatul în instrument și confirmați că stilul corespunde așteptării înainte de descărcare.
Regulă pe un rând: iconițele, logo-urile și diagramele iau SVG; fotografiile și capturile de ecran iau PNG/JPG/WEBP. La îndoială, preferați SVG pentru orice element grafic. Pentru mai multe detalii, citiți Ce este SVG și Trei moduri de a converti o imagine în SVG.
Întrebări frecvente
Iconițele de pe un site ar trebui să fie PNG sau SVG?
Preferați SVG: un singur fișier se potrivește fiecărei densități de ecran, este mic, iar CSS îl poate recolora. Folosiți PNG doar ca variantă de rezervă, când o platformă nu suportă SVG.
Un PNG transparent rămâne transparent după conversia în SVG?
Da. Când convertiți cu instrumentul PNG în SVG PolySVG, zonele transparente sunt păstrate integral și nu se inventează fundal alb.
Sunt fotografiile potrivite pentru conversia în SVG?
Nu dacă aveți nevoie de fidelitate fotografică. Vectorizarea condensează fotografia în blocuri de culoare și produce un stil ilustrativ; fotografiile sunt mai bine servite de JPG / WEBP.