Brezplačni pretvornik

SVG v PNG Pretvornik

Pretvorite vektorske datoteke SVG v visokokakovostne rastrske slike PNG. V brskalniku enostavno prilagodite izhodno lestvico in barvo ozadja.

Povleci in spusti SVG tukaj

Podpira do 50 MB

oz

O tem orodju

SVG (razširljiva vektorska grafika) opisuje slike kot nabor geometrijskih primitivov — poti, oblik, besedila, prelivov — ki se spreminjajo v poljubno velikost brez izgube kakovosti. PNG shrani eno pravokotno slikovno mrežo s fiksno ločljivostjo. Pretvorba SVG v PNG je korak rastriranja: navodila za risanje SVG so ovrednotena pri izbrani velikosti slikovnih pik in nastala bitna slika je kodirana kot PNG. Izhod je videti jasen pri velikosti, ki ste jo navedli, vendar ima slikovne pike, če ga povečate.

Ta pretvornik upodablja SVG z uporabo motorja SVG, ki je vgrajen v brskalnik. SVG se naloži v element slike, nariše na platno HTML5 pri izbranih izhodnih dimenzijah in izvozi kot PNG prek canvas.toBlob. Ker brskalnik izvaja rastrizacijo, se zapletene funkcije SVG – prelivi, filtri, maske, animacije kot statični okvir – upodabljajo na enak način kot na pravi spletni strani.

Najpomembnejša odločitev pri pretvorbi SVG v PNG je ciljna velikost. SVG je neodvisen od ločljivosti, zato se z izbiro velikosti PNG, ki se ujema z dejansko uporabo, izognete prekomernemu zagotavljanju (ogromne datoteke za ikone v velikosti sličic) in premajhnemu zagotavljanju (zamegljen izpis pri poznejšem povečanju). Pogosti cilji: 32×32 ali 64×64 za ikone, 256×256 ali 512×512 za logotipe, 1024×1024 za junake grafike, 2048×2048 za sredstva kakovosti mrežnice.

Zakaj pretvoriti SVG v PNG

SVG je čudovit za splet in sodobna oblikovalska orodja, a grozen za številne druge kontekste. Email clients render SVG inconsistently; some block it as a security risk. Starejša pisarniška programska oprema, določeni CMS-ji, storitve tretjih oseb in skoraj vsi cevovodi za tiskanje fotografij sploh ne sprejemajo SVG. Pretvorba v PNG ustvari splošno sprejet raster, ki je videti enak pri izbrani velikosti.

PNG se prav tako zanesljivo vdela v pisarniške dokumente, diapozitive in PDF-je, ne da bi bil odvisen od prejemnikovega upodabljalnika SVG. Za logotipe in grafike, ki se morajo dosledno pojavljati na številnih platformah, je PNG varnejša izbira - čeprav izgubi neodvisnost od ločljivosti, zaradi katere je SVG sploh privlačen.

Kako uporabljati

Izberite ciljno velikost, upodabljajte. Brskalnik naredi rastrizacijo.

  1. Naložite datoteko SVG: Povlecite SVG v območje za nalaganje ali kliknite za brskanje. Podprte so datoteke do 50 MB, čeprav so tipični SVG precej pod 1 MB. Samostojni SVG delujejo najbolje; SVG, ki se sklicujejo na zunanje slike prek xlink:href na oddaljene URL-je, se lahko prikažejo kot nepopolni.
  2. Izberite izhodno velikost: Privzete so izvorne dimenzije viewBox SVG, vendar jih lahko preglasite na poljubno velikost slikovnih pik. Izberite velikost, ki se ujema z vašo dejansko uporabo – izogibajte se ustvarjanju 4K PNG za ikone, ki bodo prikazane v velikosti 32×32.
  3. Upodabljanje: Brskalnik razčleni SVG, ga nariše na platno v zahtevanih dimenzijah in izvozi platno kot PNG. Zapleteni SVG s filtri ali velikim številom poti lahko traja nekaj trenutkov; preproste ikone se upodobijo takoj.
  4. Prenesite PNG: Shranite datoteko. Prosojnost v SVG (vse, kar je zunaj narisanih oblik) se ohrani kot alfa kanal v PNG.

Pogosti primeri uporabe

Tehnične podrobnosti

SVG (priporočilo W3C) je vektorski format, ki temelji na XML, z elementi za poti, osnovne oblike (pravokotnica, krog, elipsa, črta, poligon, poličrta), besedilo, prelive (linearniGradient, radialniGradient), filtre, maske in izrezovalne poti. Brskalnik razčleni XML, zgradi DOM, uporabi CSS in rasterizira rezultat med upodabljanjem strani.

Ta pretvornik naloži SVG v HTMLImageElement (ki sproži brskalnikovo običajno pot upodabljanja SVG kot slike), nato pa ga nariše na platno prek drawImage. Platno se izvozi kot PNG z uporabo canvas.toBlob('image/png'). Točne slikovne pike v izhodu se ujemajo s tistim, kar bi SVG upodobil pri enaki velikosti na zavihku brskalnika.

Robni primeri: SVG z uporabo ForeignObject ni vedno podprt, če se uporablja prek elementa Image. SVG, ki se sklicuje na zunanje vire (xlink:href na drugo domeno), se morda ne bo naložil zaradi CORS. Animacije SMIL in animacije, ki jih poganja JavaScript, so upodobljene samo kot začetni okvir.

Najboljše prakse

Pogosta vprašanja

Bo moj SVG ob pretvorbi v PNG izgubil kakovost?
Pretvorba vektorja v raster pomeni, da slika postane temelji na slikovnih pikah in je ni več mogoče neskončno spreminjati. Izberite visoko ločljivost, da zagotovite, da je PNG videti oster pri predvideni velikosti zaslona.
Za kaj se uporablja format PNG?
PNG (Portable Network Graphics) se uporablja predvsem za grafiko s prosojnostjo, posnetke zaslona, logotipe, ikone.
Ali obstajajo kakšne omejitve, na katere se morate zavedati?
Podprte so datoteke do 50 MB. Obdelava zelo velikih ali zapletenih datotek lahko traja dlje. Vse pretvorbe se zgodijo v vašem brskalniku, zato je hitrost obdelave odvisna od vaše naprave.
Ali so moje slike med pretvorbo zasebne?
ja Vaše datoteke SVG se v celoti obdelajo v vašem brskalniku z uporabo Canvas API in JavaScript. Nič se ne naloži na noben strežnik — datoteka gre neposredno iz vaše naprave v pretvornik in nazaj v vašo napravo.
Ali je besedilo upodobljeno kot besedilo ali kot poti?
Besedilo je rastrizirano kot slikovne pike v izhodnem PNG. Izhoda ni več mogoče iskati ali izbrati. Če vaš SVG uporablja pisave, ki niso na voljo v brskalniku, se lahko besedilo upodobi v nadomestni pisavi; pretvori besedilo v poti v SVG pred upodabljanjem za zajamčen videz.
Ali je moj SVG naložen na strežnik?
Ne. Razčlenjevanje in upodabljanje SVG poteka v vašem brskalniku; Kodiranje PNG poteka v vašem brskalniku. Datoteka ne zapusti vaše naprave.
Zakaj je moj pretvorjeni PNG prazen?
Pogosti vzroki: SVG se sklicuje na zunanje slike, ki se niso uspele naložiti zaradi CORS; SVG uporablja funkcije, ki jih pot upodabljanja elementa slike ne podpira (tuji predmet, določeni filtri); SVG ima nič-dimenzionalni viewBox. Odprite SVG neposredno v brskalniku, da potrdite upodobitev pred pretvorbo.
Ali lahko pretvorim SVG v PNG v skriptu?
Da — za paketna opravila nastavitev Node.js z uporabo Sharp ali Puppeteer upodablja SVG v PNG s podobno natančnostjo kot brskalnik. To orodje je za enkratne pretvorbe v brskalniku brez namestitve ničesar.