I-convert ang mga Vector SVG file sa mataas na kalidad na Raster PNG na mga larawan. I-customize ang sukat ng output at kulay ng background nang madali sa iyong browser.
Sinusuportahan ang hanggang 50MB
Inilalarawan ng SVG (Scalable Vector Graphics) ang mga larawan bilang isang hanay ng mga geometric na primitive — mga path, hugis, text, gradient — na sukat sa anumang laki nang hindi nawawala ang kalidad. Ang PNG ay nag-iimbak ng isang parihabang pixel grid sa isang nakapirming resolution. Ang pag-convert ng SVG sa PNG ay isang hakbang sa rasterization: ang mga tagubilin sa pagguhit ng SVG ay sinusuri sa napiling laki ng pixel at ang resultang bitmap ay naka-encode bilang PNG. Ang output ay mukhang malutong sa laki na iyong tinukoy ngunit pixelates kung pinalaki.
Ang converter na ito ay nagre-render ng SVG gamit ang built-in na SVG engine ng browser. Ang SVG ay na-load sa isang elemento ng Larawan, iginuhit sa isang HTML5 canvas sa napiling mga sukat ng output, at na-export bilang PNG sa pamamagitan ng canvas.toBlob. Dahil ginagawa ng browser ang rasterization, ang mga kumplikadong feature ng SVG — mga gradient, mga filter, mga mask, mga animation bilang isang static na frame — ay nagre-render sa parehong paraan na ginagawa nila sa isang tunay na webpage.
Ang pinakamahalagang desisyon sa SVG-to-PNG conversion ay ang laki ng target. Ang SVG ay resolution-independent, kaya ang pagpili ng PNG size na tumutugma sa aktwal na paggamit ay maiiwasan ang sobrang provisioning (malaking file para sa thumbnail-sized na mga icon) at under-provisioning (blurry na output kapag na-scale up sa ibang pagkakataon). Mga karaniwang target: 32×32 o 64×64 para sa mga icon, 256×256 o 512×512 para sa mga logo, 1024×1024 para sa hero graphics, 2048×2048 para sa mga asset na may kalidad ng retina.
Ang SVG ay kahanga-hanga para sa web at modernong mga tool sa disenyo ngunit kakila-kilabot para sa maraming iba pang mga konteksto. Ang mga email client ay nag-render ng SVG nang hindi pare-pareho; hinaharangan ito ng ilan bilang panganib sa seguridad. Ang mas lumang software ng opisina, ilang mga CMS, mga serbisyo ng third-party, at halos lahat ng pipeline ng pag-print ng larawan ay hindi tumatanggap ng SVG. Ang pag-convert sa PNG ay gumagawa ng isang pangkalahatang tinatanggap na raster na mukhang magkapareho sa napiling laki.
Mapagkakatiwalaan ding nag-e-embed ang PNG sa mga dokumento ng opisina, slide deck, at PDF nang hindi umaasa sa SVG renderer ng tatanggap. Para sa mga logo at graphics na kailangang lumabas nang tuluy-tuloy sa maraming platform, PNG ang mas ligtas na pagpipilian — kahit na nawawala ang resolution-independence na ginagawang kaakit-akit ang SVG sa simula pa lang.
Piliin ang iyong target na laki, i-render. Ginagawa ng browser ang rasterization.
Ang SVG (W3C Recommendation) ay isang XML-based na vector format na may mga elemento para sa mga path, mga pangunahing hugis (rect, circle, ellipse, line, polygon, polyline), text, gradients (linearGradient, radialGradient), mga filter, mask, at clip path. Pina-parse ng browser ang XML, bumubuo ng DOM, naglalapat ng CSS, at nira-rasterize ang resulta habang nagre-render ng page.
Nilo-load ng converter na ito ang SVG sa isang HTMLImageElement (na nagti-trigger sa normal na SVG-as-image rendering path ng browser), pagkatapos ay iguguhit ito sa isang canvas sa pamamagitan ng drawImage. Ang canvas ay na-export bilang PNG gamit ang canvas.toBlob('image/png'). Ang eksaktong mga pixel sa output ay tumutugma sa kung ano ang ire-render ng SVG sa parehong laki sa isang tab ng browser.
Edge cases: Ang SVG na gumagamit ng foreignObject ay hindi palaging sinusuportahan kapag ginamit sa pamamagitan ng Image element. Maaaring mabigong ma-load ang SVG na tumutukoy sa mga panlabas na mapagkukunan (xlink:href sa ibang domain) dahil sa CORS. Ang mga SMIL animation at JavaScript-driven na animation ay nagre-render bilang paunang frame lamang.