Wat het doet
Deze tool zet SVG-code of een .svg-bestand om naar een PNG-, JPG- of WebP-afbeelding. Plak de markup, sleep een bestand erin, kies een schaal of een exacte breedte en download de bitmap. Het renderen gebeurt in je browser, dus iconen, logo’s en diagrammen verlaten je computer nooit.
Het is handig overal waar SVG niet wordt geaccepteerd: app-iconen, afbeeldingen voor sociale media, presentaties, documenten, e-mailhandtekeningen of oudere software. Je krijgt een live preview op een dambordpatroon, zodat je precies ziet welke delen transparant zijn.
Zo gebruik je het
- Plak je
<svg>-code in de editor, klik op Uploaden om een bestand te openen of sleep er een op de pagina. Voorbeeld laadt een klein logo. - Kies een Grootte: 1× gebruikt de eigen afmetingen van de SVG, 2×–4× vermenigvuldigen die. Of typ een Eigen breedte (px); de hoogte volgt de beeldverhouding.
- Kies het Formaat: PNG voor verliesvrije uitvoer met transparantie, JPG voor foto’s en compatibiliteit, WebP voor kleine bestanden.
- Kies de Achtergrond: transparant, wit of een willekeurige kleur.
- Klik op Downloaden. De regel onder de preview toont de uiteindelijke pixelgrootte, het formaat en de bestandsgrootte.
Hoe het formaat wordt bepaald
De tool kijkt naar het root-element <svg>. width en height in px, pt, mm, cm, in of em worden omgerekend naar pixels. Als ze ontbreken of als percentage zijn opgegeven, worden in plaats daarvan de breedte en hoogte van de viewBox gebruikt. Daarna wordt de gekozen schaal of eigen breedte toegepast en wordt de SVG herschreven met expliciete pixelafmetingen, zodat elke browser hem op dezelfde manier tekent.
Voorbeeld
Een icoon met viewBox="0 0 24 24" en zonder breedte of hoogte wordt op 1× een PNG van 24 × 24. Op 4× wordt het 96 × 96, en met een eigen breedte van 512 wordt het een PNG van 512 × 512 die geschikt is als icoon voor een app store, nog steeds perfect scherp omdat hij vanuit vectoren wordt gerenderd in plaats van opgeschaald.
Tips
- Ongeldige XML wordt gemeld met een regelnummer, zodat je direct naar het probleem kunt springen.
- Ingesloten rasterafbeeldingen (
<image href="data:...">) werken; externe links niet. - Tekst gebruikt de lettertypen die op je computer zijn geïnstalleerd. Wil je overal pixel-identieke resultaten, zet tekst dan eerst om naar contouren in je ontwerptool.
- De grootst mogelijke uitvoer wordt beperkt door de canvasgrootte van de browser, ongeveer 16.000 pixels per zijde.
Veelgestelde vragen
› Wordt de SVG ergens naartoe geüpload?
Nee. Je browser tekent de SVG op een canvas en slaat het resultaat op. De code en de afbeelding blijven op je apparaat.
› Hoe krijg ik een scherpere PNG?
Kies schaal 2×, 3× of 4×, of typ een exacte breedte. SVG is een vectorformaat, dus renderen op een groter formaat geeft scherpe randen op schermen met hoge pixeldichtheid. 2× is een goede standaard voor retina-schermen.
› Waarom ontbreken sommige afbeeldingen of lettertypen in de uitvoer?
Om veiligheidsredenen laden browsers geen externe bestanden (gelinkte afbeeldingen, webfonts, CSS) als een SVG als afbeelding wordt getekend. Sluit afbeeldingen in als data-URL's en zet tekst om naar paden, of gebruik systeemlettertypen.
› Kan ik de transparante achtergrond behouden?
Ja. Kies Transparant met PNG- of WebP-uitvoer. JPG kent geen transparantie, dus transparante delen worden gevuld met wit of de kleur die je kiest.
› Mijn SVG heeft geen breedte of hoogte. Welk formaat wordt gebruikt?
De tool leest de viewBox en gebruikt de breedte en hoogte daarvan. Als er geen formaat en geen viewBox is, valt hij terug op de browserstandaard van 300 × 150 en meldt dat.