Verander skaalbare SVG-vektore in gebruiksklaar PNG-beelde
'n SVG-lêer is 'n stel instruksies, nie 'n voltooide prentjie nie. Maak een in 'n teksredigeerder oop en jy sal XML vind wat paaie, vorms, vullings en krommes beskryf — 'n resep wat 'n blaaier volg om die kunswerk vars te teken by watter grootte jy ook al vra. 'n PNG is die teenoorgestelde: 'n rooster van gekleurde pixels vasgevries teen 'n vaste breedte en hoogte. Om een na die ander te omskep word rasterisering genoem, en hierdie hulpmiddel doen dit heeltemal binne jou blaaier. Jy kies 'n uitsetgrootte, die SVG word op 'n HTML-canvas geverf, en 'n PNG kom terug — geen lêer verlaat ooit jou toestel nie.
Vektor teenoor raster, in gewone taal
Die kernverskil is hoe resolusie hanteer word. Omdat SVG wiskunde eerder as pixels stoor, is dit resolusie-onafhanklik: skaal 'n logo van 'n gunstelingikoon na 'n aanplakbord en elke rand word herbereken om wiskundig skerp te bly. 'n PNG het nie so 'n vryheid nie. Sy pixels is ingebak, dus dwing vergroting verby sy natuurlike grootte die kyker om bestaande stippels te rek, en jy begin die wasigheid en trapvorming sien wat rasterbeeide verklap.
Daardie kompromie sny albei kante toe. Vektore is ongeëwenaar vir logo's, ikone en plat illustrasies gemaak van skoon vorms, en die lêers is gewoonlik piepklein. Rasterformate soos PNG hanteer gradiënte, sagte skaduwees en fotografiese besonderhede meer natuurlik, en — belangrik — hulle word deur feitlik alles verstaan. Wanneer jy rasteriseer, ruil jy die SVG se oneindige skaalbaarheid vir die PNG se universele versoenbaarheid by een gekose grootte.
Waarom sou jy 'n SVG hoegenaamd rasteriseer?
As SVG so pragtig skaal, waarom omskep? Versoenbaarheid is die gewone antwoord. Baie plekke aanvaar eenvoudig nie SVG nie: talle e-posprogramme strip of weier om dit te vertoon, dokumentredigeerders en aanbiedingsagteware wil dikwels 'n plat beeld hê, markplekke en advertensienetwerke vereis PNG of JPG, en die meeste sosiale platforms ignoreer vektor-oplaaie heeltemal. Sommige inhoudstelsels blokkeer SVG ook uitdruklik om sekuriteitsredes, aangesien die formaat skripte kan inbed.
Die tweede rede is dat jy soms 'n vastegrootte-bate wil hê. Toepassingsikone, duimnaelsketse, Open Graph-voorskoubeelde en gedrukte materiaal verwag almal presiese pikselafmetings. 'n PNG sluit die kunswerk vas by daardie teiken sodat dit oral identies weergegee word, sonder verrassings van 'n kyker wat die vektor anders interpreteer. Om jou bron-SVG in die presiese groottes wat 'n platform vereis om te skep is dikwels die skoonste pad na 'n konsekwente resultaat.
Die regte uitvoerresolusie kies
Omdat 'n PNG nie elegant kan opskaal nie, maak die grootte waarteen jy uitvoer meer saak as met enige vektor. Voer te klein uit en die beeld lyk sag op moderne skerms; voer nodeloos groot uit en jy vermors bandwydte. 'n Eenvoudige vuistreël: besluit die grootste grootte waarteen die beeld ooit vertoon gaan word, en lewer minstens dit, en verkieslik meer vir hoë-digtheid-vertonings.
Standaardskerms is goed by 1x — die kunswerk se nominale grootte. Hoë-DPI- en Retina-vertonings pak ongeveer dubbel die pixels in dieselfde spasie, dus hou 'n 2x-uitvoer ikone en grafika skerp in plaas van wasig. Vir druk, plakkate of baie groot vertonings gee 3x of 4x jou speling. Aangesien die bron 'n vektor is, kos groter uitvoer jou niks in kwaliteit nie — die krommes word bloot herbereken by die hoër pikseltal voordat dit afgeplat word. As jy onseker is, lewer 'n ruim grootte; jy kan altyd 'n groot PNG afskaal, maar jy kan nooit besonderhede herwin deur 'n klein een op te skaal nie.
Deursigtigheid ry saam
PNG ondersteun 'n volledige alfakanaal, wat beteken deursigtigheid oorleef die omskakeling. As jou SVG geen agtergrondvulling het nie, hou die resulterende PNG daardie areas deursigtig, sodat 'n logo of ikoon skoon op enige kleur val sonder 'n lelike wit blokkie daar rondom. As jy eerder 'n soliede agtergrond nodig het, gee die SVG een voordat jy omskep. Hoe dit ook al sy, wat jy in die vektor sien is wat die PNG sal behou, wat presies is waarom PNG — eerder as JPG — die natuurlike teiken vir ikone, kentekens en oorlegsels is.
Alles bly op jou toestel
Hierdie omskakelaar loop as plaaslike kode in jou blaaier met die canvas-API. Jou SVG word gelees, geteken en uitgevoer sonder om ooit na 'n bediener gestuur te word, dus is daar geen oplaai, geen tou, en geen kopie van jou kunswerk wat in iemand anders se berging sit nie. Dit is vinniger vir jou en veiliger vir enigiets wat jy liewer nie aan 'n derde party sou oorhandig nie, van ongepubliseerde handelsmerke tot interne diagramme. Wanneer jy hier klaar is, verken die res van ons beeldhulpmiddels — as jy 'n Windows- of gunstelingikoon-bate bou, is die PNG-na-ICO-omskakelaar 'n natuurlike volgende stap.
Gereelde vrae
Sal die PNG so skerp soos die SVG lyk?
By die grootte waarteen jy uitvoer, ja. Omdat die vektor vars gerender word by jou gekose resolusie, bly rande skerp. Die verskil is dat die PNG nie daarna vergroot kan word sonder om sag te word nie, terwyl die oorspronklike SVG dit altyd kon.
Behou die omskakeling deursigtigheid?
Ja. PNG het 'n alfakanaal, dus enige deursigtige areas in jou SVG bly deursigtig in die PNG. Voeg eers 'n agtergrond by die SVG as jy eerder 'n soliede vulling wil hê.
Watter resolusie moet ek kies?
Pas by of oorskry die grootste grootte waarteen die beeld vertoon gaan word. Gebruik 1x vir standaardskerms, 2x vir Retina- en hoë-DPI-vertonings, en 3x of 4x vir druk of oorgrootte grafika. Groter render kos niks in kwaliteit nie aangesien die bron 'n vektor is.
Waarom nie net die SVG oral gebruik nie?
Baie e-posprogramme, dokumentredigeerders, markplekke en sosiale platforms aanvaar nie of vertoon nie SVG betroubaar nie. 'n PNG werk byna oral en sluit die kunswerk vas by 'n voorspelbare, vaste grootte.
Word my lêers iewers opgelaai?
Nee. Alles loop plaaslik in jou blaaier. Jou SVG word nooit na 'n bediener gestuur nie, dus word niks opgelaai, gestoor of nagespoor nie.
Kan ek die PNG terug in 'n SVG omskep?
Nie getrou nie. Rasterisering gooi die oorspronklike wiskunde weg, dus om terug te gaan beteken om die pixels na nuwe vektorpaaie na te trek, wat selde met die bron ooreenstem. Hou jou oorspronklike SVG as die meesterlêer.