Een logo komt in twee bestanden: logo.svg bij 3 KB en logo.png bij 40 KB. Beide zien er hetzelfde uit in een browsertabblad Blaas ze op om een projectorscherm te vullen en slechts één blijft scherp Probeer ze te uploaden naar een sociaal profiel en alleen de andere wordt geaccepteerd En als je alleen de PNG hebt, de tools die beloven om & te quoten; PNG naar SVG" te converteren; iets teruggeven dat technisch gezien een SVG is maar niet het bestand dat je ontwerper zou hebben gemaakt.
Deze gids legt het verschil uit tussen de twee formaten in termen van wat elk bestand opslaat, wanneer het moet worden gebruikt, wat er gebeurt als je een SVG naar pixels rendert en wat het traceren van een PNG naar vectorvormen wel en niet kan herstellen. Het bevat reële getallen van de traceerengine achter de Toolz-converters, en zit onder de hub voor beeldhulpmiddelen.
tl;dr: SVG is een vectorformaat: het slaat vormen op als geometrie, dus het schaalt naar elke grootte zonder vervaging en is ideaal voor logo's, pictogrammen en diagrammen. PNG is een rasterformaat: het slaat verliesvrij een vast raster van pixels op, dat past bij screenshots, gedetailleerd artwork en overal waar alleen afbeeldingen worden geaccepteerd. Van SVG naar PNG gaan is exact op de gewenste grootte; gebruik de SVG naar PNG converter bij 2x of 4x voor scherpe output Gaan van PNG naar SVG is tracing, die vormen van pixels opnieuw opbouwt en geen origineel ontwerp herstelt Het werkt voor platte logo's en lijntekeningen, en mislukt op foto's Alle conversies hier draaien client-side, niets geüpload, gratis, geen aanmelding.
Wat is het verschil tussen SVG en PNG?
SVG beschrijft een afbeelding als instructies om deze te tekenen, terwijl PNG de voltooide tekening als pixels opslaat Al het andere aan de twee formaten volgt uit dat ene verschil.
Een SVG-bestand, gedefinieerd door de W3C in Schaalbare vectorafbeeldingen (SVG) 2, is XML tekst Het vermeldt paden, cirkels, rechthoeken, gradiënten en tekst, elk met coördinaten en kleuren Niets erin zegt hoeveel pixels de afbeelding heeft Wanneer een browser het weergeeft, werkt de renderer uit welke pixels elke vorm bedekt op de grootte op het scherm, daarom is hetzelfde bestand helder op een telefoon en op een 5K-monitor.
Een PNG-bestand, door het W3C gespecificeerd als Portable Network Graphics en gepubliceerd als ISO/IEC 15948, is een raster van gekleurde pixels gecomprimeerd met DEFLATE De compressie is verliesvrij, dus de pixels die je decodeert zijn precies de pixels die zijn opgeslagen Een PNG kan een volledig alfakanaal en maximaal 16 bits per kanaal dragen Wat het niet kan doen is details toevoegen: een 512 x 512 PNG getoond op 2048 x 2048 heeft elke pixel uitgerekt over een 4 x 4 blok, en randen worden zacht of blokkerig.
Hier is dezelfde eenvoudige badge als SVG bron:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
Die vier markeringslijnen zijn het hele beeld, en ze blijven vier regels, of je het nu op 240 pixels breed of 24.000 weergeeft. De PNG-versie van dezelfde badge op 240 x 80 bevat 19.200 pixels en op 960 x 320 307.200.
SVG vs PNG: welk formaat moet ik gebruiken?
Gebruik SVG voor alles wat gemaakt is van vormen die moeten schalen, en PNG voor alles wat gemaakt is van pixels of ergens naartoe gaat dat alleen rasterafbeeldingen accepteert Deze tabel zet ze naast elkaar:
| Property | SVG | Great |
|---|---|---|
| Afbeeldingsmodel | Vector: paden, vormen, tekst | Raster: vast pixelraster |
| standaard- | W3C SVG 2 | W3C PNG, ISO/IEC 15948 |
| schaading | Scherp in elke maat | Vervaagt of blokkeert wanneer vergroot |
| Compressie | Tekst; gzip op de server | Lossless DEFLATE |
| doorzichtigheid | ja | Ja, volle alfa |
| Bestandsgrootte voor een logo | Meestal een paar KB | Groeit met pixelafmetingen |
| Bestandsgrootte voor een foto | Onpraktisch | Groot maar redelijk |
| Bewerkbaar na export | Ja, vormen en kleuren in een vectoreditor | Alleen pixel voor pixel |
| Tekst binnen | Kan selecteerbaar en doorzoekbaar blijven | Gebakken in pixels |
| Kan scripts bevatten | Ja, dat is een veiligheidsprobleem | heel weinig |
| Geaccepteerd door sociale uploads, kantoorapps, e-mail | Vaak niet | Bijna altijd |
| het beste voor | Logo's, pictogrammen, diagrammen, grafieken, UI-illustraties | Screenshots, gedetailleerde kunst, activa van vaste grootte |
Een praktische regel: houd de SVG als uw meester voor alles vector, en exporteer PNGs van het op de maten elke bestemming nodig heeft Nooit alleen de PNG van een logo, want pixels terug in vormen draaien is verlies op een manier van vormen veranderen in pixels is niet.
Voor foto's is geen van beide formaten de juiste keuze voor levering Een foto in PNG is groot, en een foto in SVG is ofwel een PNG verpakt in XML of een getraceerde benadering JPEG, WebP of AVIF zijn gebouwd voor die taak; wat WebP is en wanneer het te gebruiken bedekt de fotozijde.
Waarom weigeren zoveel plaatsen SVG-uploads?
Omdat een SVG een document is dat actieve inhoud kan bevatten, niet alleen een afbeelding De SVG-specificatie staat dit toe <script> elementen, kenmerken van de gebeurtenishandler, zoals onload, links naar externe bronnen en ingebedde HTML via <foreignObject>. Een site die een SVG-upload accepteert en deze later vanuit zijn eigen domein bedient, kan uiteindelijk iemand anders draaien' s JavaScript voor elke bezoeker die het bestand rechtstreeks opent.
SVG veilig saniteren is mogelijk maar onhandig, dus veel platforms nemen de eenvoudigere route: profielfoto's, marktplaatsvermeldingen, advertentienetwerken, veel CMS-mediabibliotheken en de meeste e-mailclients accepteren alleen rasterformaten Office-documenten en chat-apps hebben ook patchier-ondersteuning.
Dat is de meest voorkomende reden om SVG naar PNG te converteren Een browser die een SVG als afbeelding tekent is het veilige geval, aangezien een SVG via een <img> element of op een canvas is het niet toegestaan om scripts uit te voeren of externe bestanden op te halen De Toolz-converters geven SVG's precies zo weer, wat het veilig maakt om een bestand van een onbekende bron te converteren.
Hoe converteert u SVG naar PNG zonder kwaliteitsverlies?
Render de SVG op de pixelgrootte die u nodig hebt, of groter, en schaal de PNG daarna nooit meer op Omdat de SVG geometrie is, is tekenen op 4x net zo exact als tekenen op 1x; al het kwaliteitsverlies in deze richting komt voort uit het kiezen van een te kleine uitvoer.
de SVG naar PNG converter werkt de grootte uit in deze volgorde
- Als de SVG-root is ingesteld
widthenheight, die worden gebruikt, met eenheden zoalsmm,pt,inencmomgezet naar CSS-pixels. - Als het alleen een
viewBox, de viewBox breedte en hoogte worden gebruikt. - Als het geen van beide heeft, wordt het getekend op 1024 x 1024.
- Als de langste zijde nog steeds minder dan 512 pixels bedraagt, wordt de tekening proportioneel vergroot totdat die zijde 512 is, omdat een pictogram van 24 x 24 getekend op de aangegeven grootte te klein is om te gebruiken.
- De SVG-schaaloptie vermenigvuldigt het resultaat vervolgens met 1, 2 of 4.
Neem de badge hierboven, die verklaart width="240" height="80". De langste zijde is onder de 512, dus vergroot naar 512 x 171. bij 2x komt de PNG uit op 1024x342, waarbij de ongeverfde hoeken transparant blijven Het briefje onder het resultaat vermeldt de grootte en waar het vandaan kwam, dus er wordt niet geraden.
Kies 2x voor schermen, waarbij de meeste telefoons en laptops twee of meer apparaatpixels per CSS-pixel gebruiken, en 4x voor print of grote beeldschermen Het uitvoerplafond is 100 megapixels of 16.384 pixels aan een kant, en SVG-bestanden van meer dan 50 MB worden geweigerd; een kleinere schaal repareert het eerste geval.
Twee soorten inhoud overleven de weergave niet Afbeeldingen en weblettertypen die door URL zijn gekoppeld, worden weggelaten, omdat een SVG die als afbeelding is getekend niets buiten het bestand kan ophalen, waardoor tekst terugvalt naar een systeemlettertype; het converteren van tekst naar contouren in uw vectoreditor vóór export vermijdt dat En een geanimeerde SVG wordt een enkel stilstaand frame.
Moet ik SVG converteren naar PNG, JPG of PDF?
Converteer standaard naar PNG, alleen naar JPG wanneer de bestemming PNG afwijst of een kleiner bestand nodig heeft voor een foto-achtige afbeelding, en naar PDF wanneer u een document nodig heeft om af te drukken of te e-mailen.
| schietwedstrijd | doorzichtigheid | Maat | Wat je verliest | gebruiken voor |
|---|---|---|---|---|
| Great | gevangen | Medium | Schaalbaarheid | Uploads, dia's, app-middelen, alles met een transparante achtergrond |
| JPG | Gevuld met wit | Kleinste voor complexe kunst | Schaalbaarheid, transparantie, enige scherpte van de randen | Formulieren die alleen JPG en e-mailbijlagen bevatten |
| PDF (gerasterd) | Transparante gebieden tonen de witte pagina | Groter | Schaalbaarheid, selecteerbare tekst, klikbare links | Proefbladen, het drukken van een grafiek, het verzenden van kunstwerken naar niet-ontwerpers |
de SVG naar JPG converter vult transparante gebieden met wit, omdat JPEG geen alfakanaal heeft, en past de kwaliteitsschuifregelaar toe, Knapperige randen op vlakke kleur zijn precies waar JPEG-compressie vage ringen achterlaat, dus een logo ziet er meestal beter uit als PNG.
de SVG naar PDF-converter verdient een duidelijke waarschuwing Het rastert: elke SVG wordt getekend naar pixels, opgeslagen als PNG, en op een pagina geplaatst De PDF bevat geen vectorvormen, tekst kan niet worden geselecteerd, en ver genoeg zoomen toont pixels De optie schaal helpt nog steeds, aangezien de paginagrootte vast blijft terwijl 2x en 4x meer pixels erin verpakken (72, 144 of 288 pixels per inch met Fit to image) Als een printshop vraagt om een vector PDF, per ISO32000 een PDF kan echte vectorpaden bevatten, maar je hebt daarvoor een vectoreditor en #39; s-export nodig, geen beeldconverter.
Wat doet het converteren van PNG naar SVG?
Het omzetten van PNG naar SVG traceert de afbeelding: het groepeert de pixels in gebieden van vergelijkbare kleur en past omtrekken rond elk gebied, waardoor gevulde vector paden Het vindt niet de originele vector bestand, omdat een PNG geen record van de vormen die het gemaakt Elke rand in de uitvoer is een schatting getrokken uit de pixels.
De tracer achter PNG naar SVG en JPG naar SVG op Toolz staat imagetracerjs, die op een achtergrond draait Web Worker, zodat de pagina responsief blijft. Het werkt in twee stappen:
- Kleurreductie. De afbeelding wordt teruggebracht tot een klein palet, het getal dat u kiest onder Kleuren: 2, 8 of 16.
- Randfitting. Voor elke kleurlaag loopt de tracer over de grens van elk verbonden gebied en past er rechte lijnen en bochten op, waardoor één gevuld pad per gebied ontstaat.
Elk pad krijgt ook een omtrek van 1 pixel in zijn eigen kleur. Zonder dit laten aangrenzende vormen haarlijnopeningen achter waar hun randen elkaar niet helemaal raken, en de achtergrond is zichtbaar als dunne witte naden.
Detail bepaalt hoe nauw deze contouren de pixels volgen:
| Detail | Lijn- en curvetolerantie | Specs die hieronder zijn gevallen | Voorvervagen | Resultaat |
|---|---|---|---|---|
| Laag | 2 px | 16 punten | Slight | Vlottere, eenvoudigere, kleinere bestanden |
| Medium (standaard) | 1 px | 8 punten | niet een | Evenwichtig |
| High | 0,5 px | 2 punten | niet een | Volgt pixels op de voet, houdt kleine vormen, zwaarder |
De getraceerde SVG is geschreven met zijn width en height ingesteld op de oorspronkelijke afbeeldingsgrootte en een viewBox in getraceerde pixels, dus het opent op de grootte die u verwacht en schaalt schoon waar u het ook plaatst.
Wat kan traceren goed doen, en waar mislukt het?
Traceren doet het goed op afbeeldingen die om te beginnen vectorachtig waren: platte kleur, harde randen, weinig kleuren Het faalt op alles met doorlopende tonen, omdat een foto geen randen heeft om te vinden, alleen gradiënten.
| Bron | Hoe het traceert | Voorgestelde instellingen |
|---|---|---|
| Plat logo, 2 tot 6 kleuren | Schoon vormen, klein bestand | 8 kleuren, Medium |
| Zwart-wit lijnkunst, handtekeningen, postzegels | Zeer schoon | 2 kleuren, Medium of High |
| Pictogrammen met een verloop | Gradiënt verandert in banden | 16 kleuren, Medium, vereenvoudig vervolgens in een editor |
| Gescande tekening op papier | Papiertextuur wordt stippen | 2 kleuren, Laag |
| JPG-logo met compressieartefacten | Spikkels langs randen, achtergrond getraceerd als een vorm | Laag detail; verwijder de achtergrondvorm daarna |
| Schermafbeelding met tekst | Letters worden blobby contouren | Houd het als PNG |
| Photograph | Blotchy geposteriseerde vormen, enorm bestand | Niet traceren |
De fotorij is geen kwestie van smaak Bij het testen van de Toolz-motor duurde een luidruchtige foto van 2000 px, getraceerd met 16 kleuren, 28 seconden en produceerde een SVG van 46 MB, vele malen zwaarder dan het beeld waar hij vandaan kwam en nog steeds zichtbaar slechter. Lawaai geeft de tracer duizenden kleine regio's, en elk wordt zijn eigen pad met zijn eigen coördinaten.
Die test is de reden waarom de converter elk beeld langer dan 1200 pixels aan een kant schaalt tot 1200 voordat het wordt getraceerd. Het traceren eindigt dan in seconden in plaats van minuten, en omdat de uitvoer de oorspronkelijke breedte en hoogte behoudt, verandert er niets aan de manier waarop de SVG wordt geplaatst. Een spoor dat na twee minuten nog steeds actief is, wordt gestopt met een bericht dat minder kleuren of lagere details suggereert, in plaats van het tabblad voor onbepaalde tijd bezig te laten.
JPG bronnen voegen twee specifieke problemen toe JPEG compressie laat vage blokken rond scherpe randen, die de tracer kan veranderen in verdwaalde vormen; Low detail vervaagt enigszins en laat spikkels vallen om het tegen te gaan En JPG heeft geen transparantie, dus de witte doos rond een logo wordt een meer gevulde vorm achter het artwork In een vector editor, selecteer die vorm en verwijder het.
Hoe krijg ik een schone SVG van een PNG-logo?
Begin met de eenvoudigste instellingen die het ontwerp behouden, kijk naar de preview en voeg alleen kleuren of details toe als er iets ontbreekt Zwaardere instellingen repareren zelden een slecht spoor; ze voegen er meer paden aan toe.
Een betrouwbare reeks:
- Gebruik de grootste, schoonste bron die je hebt Een PNG-export verslaat een screenshot, en een screenshot verslaat een foto van een afdruk.
- Tel de kleuren in het logo en kies de dichtstbijzijnde optie op of erboven Een tweekleurenteken wil 2, een vijfkleurenmerk wil 8.
- Traceer op Medium Controleer het voorbeeld en de bestandsgrootte die onder het resultaat wordt weergegeven.
- Als er stippen of ruwe randen zijn, ga dan terug bij Laag. Als dunne details verdwenen zijn, ga dan terug bij Hoog.
- Open het resultaat in een vectoreditor voor de laatste stap: verwijder de achtergrondvorm als die er is, voeg vormen samen die er één zouden moeten zijn, en vervang elke getraceerde tekst door echte tekst in het juiste lettertype.
Wanneer de bestandsgrootte die na tracering wordt weergegeven groter is dan de PNG, behandel dat dan als een signaal, voor een logo betekent het meestal dat er ruis wordt getraceerd; voor al het andere betekent het meestal dat de afbeelding raster moet blijven.
Als het spoor op weg is naar een snijmachine, lasergraveur of borduursoftware, zijn 2 kleuren vaak het juiste antwoord, zelfs voor een kleurrijk ontwerp, omdat die machines werken vanuit contouren in plaats van op vullingen.
Kan ik tussen deze formaten op één plek converteren?
Ja. De generaal Image Converter accepteert SVG samen met JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, CR2, DNG en PDF, en schrijft JPG, PNG, WebP, GIF, ICO, PDF of SVG. Door SVG als doel te kiezen, traceert u elke rasterbron met dezelfde kleuren- en detailinstellingen; het kiezen van een rasterdoel voor een SVG-bron toont de SVG-schaaloptie.
De speciale paarpagina's accepteren alleen hun eigen bronformaat, waardoor de opties op het scherm relevant blijven: de SVG-pagina's tonen schaal, de traceerpagina's tonen kleuren en details.
Eén combinatie wordt niet aangeboden: PDF naar SVG De converter weigert het met een bericht, en de route die het voorstelt is twee stappen: converteer eerst de PDF-pagina naar PNG, dan traceer de PNG Als de PDF afkomstig is van een vectorprogramma, houdt het exporteren van SVG uit dat programma de echte paden en is de betere optie.
Een SVG kan ook een favicon worden Het renderen ervan naar ICO levert vierkante PNG-afbeeldingen op elke pictogramgrootte, en het minimum van 512 px betekent dat een klein pictogram SVG nog steeds een schone invoer van 256 px geeft. Favicon-formaten en wat er in een ICO-bestand zit omslagen welke maten moeten worden opgenomen.
Zijn SVG - en PNG-conversies privé?
Ja. renderen, coderen en traceren gebeurt allemaal aan de clientzijde, op het browsertabblad, zodat er geen bestand wordt geüpload. De SVG-decoderingsstap en de tracer worden alleen gedownload als een bestand ze nodig heeft, waardoor het paginalicht blijft wanneer u alleen tussen rasterformaten converteert.
De limieten, op één plek: SVG-bestanden tot 50 MB, weergegeven uitvoer tot 100 megapixels en 16.384 pixels per kant, rasterbronnen tot 100 megapixels, tracering tot 1200 px aan de langste kant, en een plafond van twee minuten per spoor De tools zijn gratis, geen aanmelding, met een dagelijkse limiet op conversies.
