SVG ↔ PNG-converter

Wat doet deze tool

SVG is geweldig voor logo's en iconen omdat het oneindig schaalbaar is zonder vervaging, maar veel platforms willen toch een platte rasterafbeelding: app-icooninzendingen, uploads voor sociale media, ingebedde e-mailafbeeldingen, OS-achtergronden. Deze tool neemt elke SVG — bestand of geplakte markup — en rasteriseert die naar PNG (met optionele transparantie) of JPG (met een verplichte achtergrond) op de resolutie die jij kiest. Kies 1×, 2× of 4× de natuurlijke grootte van de SVG, of stel een aangepaste breedte in pixels in en de hoogte wordt berekend om de beeldverhouding te behouden. De hele pijplijn draait in je browser via een <canvas>-element: je SVG verlaat dit tabblad nooit. Dat is belangrijk voor merkmateriaal dat eigendom is, ongepubliceerde ontwerpen, of elk bestand dat je niet aan een willekeurige webservice wilt geven. Het voorbeeld werkt live mee terwijl je instellingen wijzigt, zodat je kunt zien hoe achtergrond en resolutie de uiteindelijke afbeelding beïnvloeden voordat je op downloaden klikt. Er is ook een JPG-modus voor gevallen waarin je het kleinst mogelijke bestand nodig hebt en geen transparantie — vooral voor sociale kaarten en dichte thumbnails.

Hoe gebruik je de converter

1. Drop je SVG of PNG — Sleep een bestand of plak de markup. De SVG moet een viewBox of width/height-attributen bevatten; anders weet de browser niet hoe groot hij moet tekenen.
2. Stel de afmetingen in — 1× komt overeen met de nominale grootte van de SVG. 2× is geweldig voor retina-schermen. 4× voor print. Met aangepast richt je je op een exacte pixelbreedte, zoals 1200px voor OG-afbeeldingen.
3. Kies achtergrond — Transparant werkt alleen voor PNG. JPG heeft een effen achtergrond nodig — wit is de veilige standaard, maar kies wat het beste bij de illustratie past.
4. Download de uitvoer — Klik op downloaden. De PNG wordt lokaal gegenereerd en opgeslagen met een logische bestandsnaam — geen rondje langs de server.

Hoe het renderen werkt

We coderen de SVG-markup base64 in een data:image/svg+xml;base64-URL en wijzen die toe aan een HTMLImageElement. Zodra de browser de SVG heeft geparsed en de lay-out heeft berekend, tekenen we hem op een canvas met de gekozen resolutie — de browser doet de rasterisatie, dus het resultaat komt overeen met wat Chrome of Safari native zou renderen. Het canvas wordt vervolgens gecodeerd naar PNG (lossless) of JPG (lossy, kwaliteit 92). Breedte en hoogte worden afgeleid uit de viewBox van de SVG of uit expliciete attributen; de beeldverhouding blijft altijd behouden.

SVG vs PNG-vergelijking

Gebruik PNG voor logo's, iconen en alle illustraties met scherpe randen of tekst — lossless compressie houdt lijnen scherp en je kunt transparantie behouden. Gebruik JPG alleen voor foto-achtige SVG's of gevallen waarin je het kleinst mogelijke bestand nodig hebt en een effen achtergrond acceptabel is. JPG's blokgebaseerde compressie verminkt dunne lijnen en schaadt het contrast op egale kleurvlakken, dus het is zelden de juiste keuze voor vectorkunst.

Veelgestelde vragen