Alakítsd a skálázható SVG vektorokat felhasználásra kész PNG képekké
Egy SVG fájl egy utasításkészlet, nem egy kész kép. Nyisd meg egy szövegszerkesztőben, és XML-t találsz, ami útvonalakat, alakzatokat, kitöltéseket és görbéket ír le — egy receptet, amit a böngésző követ, hogy az adott méretben újrarajzolja a grafikát. A PNG ennek az ellentéte: színes pixelek rácsa, fixen rögzített szélességgel és magassággal. Az egyik másikká alakítását raszterizálásnak hívják, és ez az eszköz teljes egészében a böngésződben végzi el. Kiválasztasz egy kimeneti méretet, az SVG-t egy HTML vászonra (canvas) rajzoljuk, és egy PNG jön vissza — a fájl soha nem hagyja el az eszközödet.
Vektor kontra raszter, egyszerűen elmagyarázva
A lényegi különbség a felbontás kezelésében rejlik. Mivel az SVG matematikát tárol pixelek helyett, felbontásfüggetlen: skálázz egy logót favicon-mérettől óriásplakát-méretig, és minden él újraszámolódik, hogy matematikailag éles maradjon. A PNG-nek nincs ilyen szabadsága. A pixelei beégetve vannak, tehát ha a natív méretén túl nagyítod, a nézőnek meglévő pontokat kell nyújtania, és megjelenik az elmosódás és lépcsőzetesség, ami leleplezi a raszterképeket.
Ez a kompromisszum mindkét irányban érvényesül. A vektorok verhetetlenek logóknál, ikonoknál és tiszta alakzatokból álló sík illusztrációknál, és a fájlok jellemzően parányiak. A raszterformátumok, mint a PNG, természetesebben kezelik a színátmeneteket, lágy árnyékokat és fényképszerű részleteket, és — ami döntő — szinte mindenhol érthetőek. Amikor raszterizálsz, az SVG végtelen skálázhatóságát cseréled a PNG univerzális kompatibilitására egy kiválasztott méretnél.
Miért raszterizáljunk egyáltalán egy SVG-t?
Ha az SVG ilyen szépen skálázódik, miért konvertáljuk? A kompatibilitás a szokásos válasz. Rengeteg helyen egyszerűen nem fogadják el az SVG-t: sok e-mail kliens eltávolítja vagy visszautasítja a megjelenítését, dokumentumszerkesztők és bemutatókészítő szoftverek gyakran lapos képet akarnak, piacterek és hirdetési hálózatok PNG-t vagy JPG-t követelnek, a legtöbb közösségi platform pedig teljesen figyelmen kívül hagyja a vektoros feltöltéseket. Néhány tartalomkezelő rendszer biztonsági okokból teljesen letiltja az SVG-t, mivel a formátum szkripteket is beágyazhat.
A második ok, hogy néha szeretnél egy fix méretű elemet. Az app ikonok, bélyegképek, Open Graph előnézeti képek és nyomtatott anyagok mind pontos pixelméreteket várnak. A PNG rögzíti a grafikát erre a célra, hogy mindenhol azonosan jelenjen meg, meglepetések nélkül egy olyan nézőtől, ami másképp értelmezi a vektort. A forrás SVG-d pontos, egy platform által megkövetelt méretekre konvertálása gyakran a legtisztább út a következetes eredményhez.
A megfelelő exportfelbontás kiválasztása
Mivel egy PNG nem tud kecsesen felnagyítódni, az exportálási méret jobban számít, mint bármelyik vektornál. Ha túl kicsire exportálsz, a kép puhának tűnik modern képernyőkön; ha feleslegesen nagyra, sávszélességet pazarolsz. Egy egyszerű ökölszabály: döntsd el, mekkora lesz a legnagyobb megjelenítési méret, majd legalább azt renderelj, és lehetőleg még nagyobbat a nagy sűrűségű kijelzőkhöz.
A hagyományos képernyők jól működnek 1x-nél — a grafika névleges méreténél. A magas DPI-jű és Retina kijelzők nagyjából kétszer annyi pixelt zsúfolnak ugyanabba a helyre, tehát egy 2x export élesen tartja az ikonokat és grafikákat elmosódás helyett. Nyomtatáshoz, poszterekhez vagy nagyon nagy kijelzőkhöz a 3x vagy 4x mozgásteret ad. Mivel a forrás vektoros, a nagyobb exportálás semmibe nem kerül minőségben — a görbék egyszerűen újraszámolódnak a magasabb pixelszámnál, mielőtt ellapítanák őket. Kétség esetén renderelj bőkezű méretet; egy nagy PNG-t mindig lecsökkenthetsz, de egy kicsit felnagyítva soha nem nyered vissza a részletet.
Az átlátszóság végig veled tart
A PNG teljes alfacsatornát támogat, ami azt jelenti, hogy az átlátszóság túléli a konverziót. Ha az SVG-dnek nincs háttérkitöltése, a kapott PNG megőrzi azokat a területeket átlátszóként, tehát egy logó vagy ikon bármely színre tisztán illeszkedik, csúnya fehér doboz nélkül körülötte. Ha inkább egyszínű háttérre van szükséged, adj hozzá egyet az SVG-hez a konverzió előtt. Bármelyik esetben, amit a vektorban látsz, azt őrzi meg a PNG, és pontosan ezért a PNG — nem a JPG — a természetes célformátum ikonoknál, jelvényeknél és rátéteknél.
Minden az eszközödön marad
Ez a konverter helyi kódként fut a böngésződben, a vászon (canvas) API-t használva. Az SVG-det beolvassuk, kirajzoljuk és exportáljuk anélkül, hogy valaha is elküldenénk egy szerverre, tehát nincs feltöltés, nincs várólista, és nincs a grafikádról másolat valaki más tárhelyén. Ez gyorsabb neked, és biztonságosabb bármihez, amit inkább nem adnál egy harmadik félnek, a meg nem jelent márkajelzéstől a belső diagramokig. Ha végeztél itt, fedezd fel a többi képes eszközünket — ha Windows- vagy favicon-elemet építesz, a PNG-ből ICO-ba konverter természetes következő lépés.
Gyakran ismételt kérdések
Olyan éles lesz a PNG, mint az SVG?
A választott exportálási méretnél igen. Mivel a vektor frissen renderelődik a kiválasztott felbontáson, az élek élesek maradnak. A különbség, hogy a PNG utólag nem nagyítható elmosódás nélkül, míg az eredeti SVG mindig megtehette volna.
Megőrzi a konverzió az átlátszóságot?
Igen. A PNG-nek van alfacsatornája, tehát az SVG-d bármely átlátszó területe átlátszó marad a PNG-ben is. Ha inkább egyszínű kitöltést szeretnél, adj hozzá előbb hátteret az SVG-hez.
Milyen felbontást válasszak?
Illeszd vagy haladd meg a kép legnagyobb megjelenítési méretét. Használj 1x-et hagyományos képernyőkhöz, 2x-et Retina és magas DPI-jű kijelzőkhöz, és 3x-at vagy 4x-et nyomtatáshoz vagy méretes grafikákhoz. A nagyobb renderelés semmibe nem kerül minőségben, mivel a forrás vektoros.
Miért ne használjam egyszerűen az SVG-t mindenhol?
Sok e-mail kliens, dokumentumszerkesztő, piactér és közösségi platform nem fogadja el vagy nem jeleníti meg megbízhatóan az SVG-t. A PNG szinte mindenhol működik, és rögzíti a grafikát egy kiszámítható, fix méretre.
Feltöltésre kerülnek valahova a fájljaim?
Nem. Minden helyben fut a böngésződben. Az SVG-d soha nem kerül szerverre, tehát semmi nem kerül feltöltésre, tárolásra vagy nyomon követésre.
Visszaalakíthatom a PNG-t SVG-vé?
Nem hűen. A raszterizálás eldobja az eredeti matematikát, tehát a visszaút azt jelenti, hogy a pixeleket új vektoros útvonalakká kell nyomon követni, ami ritkán egyezik a forrással. Tartsd meg az eredeti SVG-t mesterfájlként.