Az eszközről
Az SVG (Scalable Vector Graphics) a képeket geometriai primitívek – útvonalak, alakzatok, szöveg, színátmenetek – halmazaként írja le, amelyek a minőség romlása nélkül bármilyen méretre méretezhetők. A PNG egyetlen téglalap alakú pixelrácsot tárol rögzített felbontásban. Az SVG konvertálása PNG-re egy raszterezési lépés: az SVG rajzi utasításait a rendszer egy kiválasztott pixelméretben értékeli ki, és az eredményül kapott bittérképet PNG-ként kódolja. A kimenet élesnek tűnik a megadott méretben, de pixeles lesz, ha felnagyítja.
Ez a konverter a böngésző beépített SVG motorjával jeleníti meg az SVG-t. Az SVG betöltődik egy képelembe, rárajzolódik egy HTML5 vászonra a kiválasztott kimeneti méretekben, és PNG formátumban exportálódik a canvas.toBlob fájlon keresztül. Mivel a böngésző végzi a raszterezést, az összetett SVG-funkciók – színátmenetek, szűrők, maszkok, animációk statikus keretként – ugyanúgy jelennek meg, mint egy valódi weboldalon.
Az SVG-ből PNG-be konvertálás során a legfontosabb döntés a célméret. Az SVG felbontásfüggetlen, így a tényleges használatnak megfelelő PNG-méret kiválasztása elkerüli a túlzott kiépítést (nagy fájlok miniatűr méretű ikonokhoz) és az alulkiépítést (későbbi méretezéskor elmosódott kimenet). Gyakori célok: 32×32 vagy 64×64 az ikonokhoz, 256×256 vagy 512×512 a logókhoz, 1024×1024 a hősgrafikákhoz, 2048×2048 a retina minőségű eszközökhöz.
Miért konvertálja az SVG-t PNG-re?
Az SVG nagyszerű a web és a modern tervezőeszközök számára, de szörnyű sok más környezetben. Az e-mail kliensek következetlenül jelenítik meg az SVG-t; egyesek biztonsági kockázatként blokkolják. A régebbi irodai szoftverek, bizonyos CMS-ek, harmadik féltől származó szolgáltatások és szinte az összes fotónyomtatási folyamat egyáltalán nem fogadja el az SVG-t. A PNG-re konvertálás egy általánosan elfogadott rasztert eredményez, amely a kiválasztott méretben megegyezik.
A PNG megbízhatóan beágyaz irodai dokumentumokba, diacsomagokba és PDF-ekbe is anélkül, hogy a címzett SVG-megjelenítőjétől függne. Azon logók és grafikák esetében, amelyeknek konzisztensen kell megjelenniük számos platformon, a PNG a biztonságosabb választás – még akkor is, ha elveszíti azt a felbontás-függetlenséget, amely az SVG-t elsősorban vonzóvá teszi.
Használati útmutató
Válassza ki a célméretet, renderelje meg. A böngésző elvégzi a raszterezést.
- Töltse fel az SVG fájlt: Húzzon egy SVG-t a feltöltési területre, vagy kattintson a böngészéshez. Az 50 MB-ig terjedő fájlok támogatottak, bár a tipikus SVG-k mérete jóval 1 MB alatt van. Az önálló SVG-k működnek a legjobban; Azok az SVG-k, amelyek az xlink:href-en keresztül külső képekre hivatkoznak távoli URL-ekre, hiányossá válhatnak.
- Válassza ki a kimeneti méretet: Az alapértelmezés az SVG natív viewBox méretei, de felülírhatja bármely pixelméretet. Olyan méretet válasszon, amely megfelel a tényleges használatnak – ne hozzon létre 4K PNG-ket a 32 × 32-es ikonokhoz.
- Render: A böngésző elemzi az SVG-t, rárajzolja egy vászonra a kívánt méretben, és exportálja a vásznat PNG formátumban. Az összetett SVG-k szűrőkkel vagy nagy útvonalszámokkal eltarthatnak egy pillanatig; Az egyszerű ikonok azonnal megjelennek.
- Töltse le a PNG-t: Mentse el a fájlt. Az SVG átlátszósága (a rajzolt alakzatokon kívül bármi) alfa-csatornaként megmarad a PNG-ben.
Gyakori használati esetek
Műszaki részletek
Az SVG (W3C Recommendation) egy XML-alapú vektorformátum, amely útvonalak, alapformák (egyenes, kör, ellipszis, vonal, sokszög, vonallánc), szöveg, színátmenetek (lineáris gradiens, radiális színátmenet), szűrők, maszkok és klipútvonalak elemeit tartalmazza. A böngésző elemzi az XML-t, létrehoz egy DOM-ot, alkalmazza a CSS-t, és raszterizálja az eredményt az oldal megjelenítése során.
Ez a konverter betölti az SVG-t egy HTMLImageElement-be (ami elindítja a böngésző normál SVG-képként megjelenítési útvonalát), majd a drawImage segítségével egy vászonra rajzolja. A vászon exportálása PNG formátumban történik a canvas.toBlob('image/png') használatával. A kimenetben lévő pontos képpontok megegyeznek azzal, amit az SVG ugyanolyan méretben jelenít meg a böngésző lapján.
Edge esetek: Az idegenobjektumot használó SVG nem mindig támogatott, ha az Image elemen keresztül használja. A külső erőforrásokra hivatkozó SVG (xlink:href egy másik tartományra) előfordulhat, hogy a CORS miatt nem töltődik be. A SMIL-animációk és a JavaScript-vezérelt animációk csak kezdeti keretként jelennek meg.
Gyakran ismételt kérdések
- Az SVG-m minősége romlik, ha PNG-re konvertálom?
- Vektor-raszter konverzió azt jelenti, hogy a kép pixel alapúvá válik, és többé nem méretezhető végtelenül. Válasszon nagy felbontást, hogy a PNG élesen nézzen ki a tervezett kijelzőméret mellett.
- Mire használható a PNG formátum?
- A PNG-t (Portable Network Graphics) elsősorban átlátszó grafikákhoz, képernyőképekhez, logókhoz, ikonokhoz használják.
- Vannak-e korlátozások, amelyekkel tisztában kell lenni?
- A fájlok legfeljebb 50 MB-ig támogatottak. A nagyon nagy vagy összetett fájlok feldolgozása tovább tarthat. Minden átalakítás a böngészőben történik, így a feldolgozás sebessége az eszköztől függ.
- A képeim titkosak maradnak az átalakítás során?
- Igen. Az SVG-fájlok feldolgozása teljes egészében a böngészőben történik a Canvas API és a JavaScript használatával. Semmi sem töltődik fel egyetlen szerverre sem – a fájl közvetlenül az eszközről a konverterre kerül, majd vissza az eszközre.
- A szöveg szövegként vagy útvonalként jelenik meg?
- A kimeneti PNG-ben a szöveg pixelként raszterizálódik. A kimenet már nem kereshető vagy választható. Ha az SVG a böngészőben nem elérhető betűtípusokat használ, a szöveg tartalék betűtípussal jelenhet meg; konvertálja a szöveget elérési utakra az SVG-ben a megjelenítés előtt a garantált megjelenés érdekében.
- Fel van töltve az SVG-m egy szerverre?
- Nem. Az SVG elemzés és megjelenítés a böngészőjében történik; A PNG-kódolás a böngészőben történik. A fájl nem hagyja el az eszközt.
- Miért üres az átalakított PNG-m?
- Gyakori okok: az SVG olyan külső képekre hivatkozik, amelyeket a CORS miatt nem sikerült betölteni; az SVG olyan szolgáltatásokat használ, amelyeket a képelem megjelenítési útvonala nem támogat (foreignObject, bizonyos szűrők); az SVG nulldimenziós viewBox-szal rendelkezik. Nyissa meg az SVG-t közvetlenül egy böngészőben, és ellenőrizze, hogy a konvertálás előtt megjelenik-e.
- Átalakíthatom az SVG-t PNG-re egy szkriptben?
- Igen – kötegelt feladatok esetén a Node.js éles vagy bábjátékos beállítása a böngészőhöz hasonló hűséggel jeleníti meg az SVG-t PNG-be. Ez az eszköz a böngészőben történő egyszeri konverziókra szolgál anélkül, hogy bármit is telepítene.
Related Articles
File FormatsImage Format Guide: JPG vs PNG vs WebP vs SVG Explained
Learn the differences between popular image formats, when to use each one, and how to convert between them for optimal quality and file size.
8 min readFile FormatsThe Complete Guide to PDF Conversion: Methods, Tools, and Best Practices
Everything you need to know about converting PDFs to other formats and vice versa. Covers PDF to Word, Excel, PNG, and more.
10 min readFile FormatsDocument Formats Explained: Word, PDF, TXT, and When to Use Each
Understand the differences between document formats like DOCX, PDF, TXT, RTF, and ODT. Learn which format to use for different purposes and how to convert between them.
8 min readFile FormatsAudio and Video Formats Explained: MP3, MP4, WAV, WebM, and Beyond
Understand the differences between audio and video formats, codecs, containers, and how to choose the right format for your needs.
9 min readPrivacy & SecurityHow to Convert Files Online Safely: Privacy and Security Guide
Understand the risks of online file conversion and learn how browser-based tools keep your data private. A guide to safe file handling.
7 min readPrivacy & TechnologyWhy Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk
Discover why browser-based tools are replacing desktop software and cloud uploads. Learn how client-side processing keeps your files private while delivering powerful functionality.
7 min read