0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Instellingen
Converteer een SVG naar PNG of JPG met de gewenste uitvoerresolutie: de vector wordt op het gevraagde formaat opnieuw getekend, dus het resultaat blijft scherp op elke schaal. Je kunt een bestand uploaden of de SVG-code plakken. Alle verwerking gebeurt in je browser, zonder uploads.
Bron

Sleep een SVG-bestand hierheen of klik om te selecteren

SVG

Hoe het werkt

SVG is een vectorformaat: het beschrijft vormen met coördinaten en kan dus op elk formaat worden getekend zonder scherpte te verliezen. PNG en JPG zijn daarentegen bitmaps met een vast aantal pixels. Rasteren is precies die stap: een resolutie vastleggen en de vector op dat pixelraster tekenen.

Daarom kies je de resolutie vóór het converteren en niet erna. De tool herschrijft de breedte en hoogte van de SVG naar het gevraagde formaat en tekent hem pas daarna, zodat de browser de curven op die schaal opnieuw trekt in plaats van een kleine afbeelding uit te vergroten. Je kunt een vermenigvuldiger opgeven (2×, 4×…) of een exacte breedte en hoogte in pixels.

PNG behoudt transparantie, JPG niet: transparante gebieden worden dan gevuld met de achtergrondkleur die je kiest. Al het tekenen gebeurt in je browser met Canvas: noch het bestand noch de SVG-code wordt naar een server gestuurd.

Voorbeelden

<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 pxEen pictogram van 24 px met vermenigvuldiger 4× wordt 96 × 96 px, het gebruikelijke formaat voor schermen met hoge pixeldichtheid.
<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 pxEen SVG zonder width- en height-attributen ontleent zijn formaat aan de viewBox; hier wordt hij op 1× gerasterd voor een previewafbeelding op sociale media.

Gebruiksscenario's

  • De PNG-pictogrammen maken die appstores of webmanifesten vragen, want die accepteren geen SVG.
  • Een vectorlogo omzetten naar PNG met transparante achtergrond om het in een presentatie of document te zetten.
  • Een SVG-diagram of -grafiek exporteren naar JPG om het aan een e-mail toe te voegen of te uploaden naar een platform dat geen vectoren accepteert.
  • Van hetzelfde pictogram @2x- en @3x-versies maken voor schermen met hoge pixeldichtheid.
  • De previewafbeelding (Open Graph) van een website maken vanuit een SVG-sjabloon.

Veelgestelde vragen

Welke resolutie kun je het beste kiezen?

Die van het uiteindelijke gebruik. Voor gewone schermen volstaat het formaat waarop de afbeelding wordt getoond; voor schermen met hoge pixeldichtheid kun je beter 2× of 3× die waarde nemen. Voor drukwerk vermenigvuldig je het formaat in inches met 300 om op 300 dpi uit te komen.

Waarom komt mijn SVG er op een onverwacht formaat uit?

Het beginformaat komt uit de attributen width en height; ontbreken die of staan ze in procenten, dan wordt de verhouding van de viewBox gebruikt. Zijn ze er geen van beide, dan gaat de browser uit van 300 × 150 px. Je kunt die waarde negeren en in de aangepaste modus een exacte breedte en hoogte invullen.

Blijft transparantie behouden?

Bij PNG wel, zolang je de optie voor een transparante achtergrond aangevinkt laat. JPG heeft geen alfakanaal en wordt dus altijd op een effen kleur getekend: standaard wit, maar je kunt die wijzigen.

Waarom mislukt een SVG die externe afbeeldingen of lettertypen gebruikt?

Wanneer de SVG binnen een afbeelding wordt getekend, kan hij geen bronnen van andere domeinen ophalen en blokkeert de browser het exporteren om veiligheidsredenen. De oplossing is die bronnen in de SVG zelf op te nemen: afbeeldingen als data-URI en tekst omgezet naar paden.

Kun je van PNG terug naar SVG?

Niet rechtstreeks: bij het rasteren gaat de vectorinformatie verloren en blijven alleen pixels over. De curven terughalen vergt vectoriseren, wat benaderende vormen oplevert en niet het origineel. Bewaar daarom altijd de oorspronkelijke SVG.

Zie ook