SVG naar WebP converteren
Zet een vectorbestand om naar een WebP op precies de pixelbreedte die uw lay-out nodig heeft. Handig als een CMS geen SVG-uploads accepteert, een social preview een bitmap vereist of een illustratie zoveel paden bevat dat de browser er traag mee tekent.
Afbeeldingsconverter
of sleep JPG, JPEG, JPE …-bestanden hierheen ·
Max. 95 MB per bestand· Tot 20 bestanden· Verwijderd na 30 minuten
Bestanden worden op onze servers verwerkt en na 30 minuten verwijderd.
85 houdt foto's visueel identiek aan het origineel. Verlaag dit alleen als u een kleiner bestand nodig hebt.
JPG, BMP en EPS hebben geen transparantie. Transparante pixels worden met deze kleur gevuld.
Hex-kleur achter transparante pixels, bijv. #FFFFFF.
Dit formaat bevat één afbeelding. Kies GIF- of WebP-uitvoer als u de animatie wilt behouden.
Een pictogram met meerdere formaten bevat meerdere resoluties in één bestand; browsers en besturingssystemen kiezen wat ze nodig hebben.
Behoud de oorspronkelijke afmetingen, of voer één zijde in en de beeldverhouding blijft behouden.
Pixels voor de hierboven gekozen zijde.
Percentage van de oorspronkelijke afmetingen.
sRGB is geschikt voor schermen en het web. Behoud het origineel voor drukwerk; grijstinten gooit kleur weg.
Alleen metadata, 0 behoudt de oorspronkelijke waarde. Printers en sommige portalen lezen dit getal; het verandert de pixelafmetingen niet.
Zo gebruikt u deze tool
- 1
Upload de SVG
Voeg maximaal 20 .svg-bestanden toe die zijn geëxporteerd uit Figma, Illustrator, Inkscape of een grafiekbibliotheek, elk maximaal 95 MB.
- 2
Stel de uitvoerbreedte in
Formaat van uitvoerafbeelding wijzigen begint bij een breedte van 1200 px; stel dit in op twee keer de breedte die de afbeelding op de pagina inneemt. Kwaliteit staat op 90, of vink Zonder verlies aan onder Geavanceerde instellingen voor vlakke logo's en pictogrammen.
- 3
Converteren naar WebP
Klik op Converteren naar WebP en download de bestanden of één ZIP. Transparante gebieden blijven transparant.
Hoe zet ik SVG om naar WebP op een specifiek formaat?
Upload de SVG, stel Formaat van uitvoerafbeelding wijzigen in op de gewenste breedte in pixels (standaard 1200 px) en klik op Converteren naar WebP. De vector wordt opnieuw getekend op die breedte, dus er wordt niets opgeschaald of onscherp.
Wanneer een SVG een WebP moet worden
SVG werd in 2001 een W3C-aanbeveling en is het juiste formaat voor de meeste logo's en pictogrammen: enkele kilobytes tekst die bij elke zoomstand scherp blijft. Het probleem begint zodra een bestand uw eigen code verlaat. WordPress en veel gehoste webshopbouwers weigeren SVG-uploads, linkvoorbeelden op Facebook, LinkedIn en X worden als bitmap opgehaald, en ontwerptools exporteren illustraties met ingebedde rastereffecten waardoor een vectorbestand uitgroeit tot enkele megabytes aan code.
WebP, dat Google in 2010 uitbracht en dat Safari pas in versie 14 in 2020 ondersteunde, is de bitmap die voor die taak is gemaakt: kleiner dan PNG bij dezelfde uitstraling, met een echt alfakanaal. Door de SVG direct op de eindgrootte naar WebP te renderen, slaat u de gebruikelijke omweg via een grote PNG-export over. Wilt u ook de omgekeerde richting, lees dan onze pagina over WebP naar SVG, die uitlegt waarom daarvoor overtrekken nodig is in plaats van converteren.
SVG naar WebP: afmetingen voor gangbare plekken op het web
1200 × 630 px
Open Graph-linkvoorbeeld
Afbeelding die wordt getoond wanneer de pagina wordt gedeeld
1920 × 1080 px
Illustratie over de volle breedte
Dekt de meeste desktopschermen op 1×
1600 × 900 px
Blogkolomafbeelding op 2×
Voor een inhoudskolom van 800 px
400 × 100 px
Headerlogo op 2×
Voor een logoplek van 200 × 50 px
SVG
Scalable Vector Graphics
SVG is een op XML gebaseerd vectorformaat dat het W3C in 2001 standaardiseerde. In plaats van pixels beschrijft het vormen, paden en tekst, waardoor het op elk formaat scherp blijft en voor logo's en pictogrammen meestal piepklein is. Het ondersteunt transparantie, CSS-opmaak, scripting en animatie, en elke browser geeft het native weer. SVG is niet geschikt voor foto's, en complexe illustraties kunnen traag worden weergegeven. Illustrator, Inkscape, Figma en browsers kunnen het openen en bewerken.
- Compressie
- –
- Transparantie
- Ja
- Animatie
- Ja
- Geïntroduceerd
- 2001 · W3C
WEBP
WebP-afbeelding
WebP is een afbeeldingsformaat dat Google in 2010 uitbracht om webpagina's sneller te laten laden. Het ondersteunt zowel verliesgevende als verliesvrije compressie, alfatransparantie en animatie in één formaat. Verliesgevende WebP-bestanden zijn doorgaans 25–35% kleiner dan JPEG's van vergelijkbare beeldkwaliteit, en verliesvrije WebP is meestal kleiner dan PNG. Alle huidige browsers ondersteunen het, maar sommige oudere desktopsoftware, drukdiensten en uploadformulieren weigeren het nog. Windows, macOS en de meeste moderne afbeeldingseditors kunnen WebP-bestanden openen.
- Compressie
- Met of zonder verlies
- Transparantie
- Ja
- Animatie
- Ja
- Geïntroduceerd
- 2010 · Google
Mensen zetten SVG om naar WebP om een lichte bitmap met vast formaat te krijgen voor plekken die geen vectorbestanden accepteren of ze traag tekenen, zoals een cms, een socialemediavoorbeeld of een drukke landingspagina; WebP naar SVG is een overtrekklus, geen formaatwissel.
Hoe de SVG wordt gerasterd en wat u moet controleren
De converter leest de eigen breedte, hoogte en viewBox van de SVG en tekent elk pad op de breedte die u instelt; de hoogte volgt de beeldverhouding. Doordat het tekenen op het eindformaat gebeurt, worden dunne lijnen en kleine tekst één keer anti-aliased, op de juiste schaal. Een kleine PNG later opschalen ziet er nooit zo schoon uit.
Lettertypen zijn de gebruikelijke verrassing. Als de SVG een lettertype noemt dat niet is ingebed of omgezet naar contouren, wordt een vervangend lettertype gebruikt en veranderen de regellengtes. Zet de tekst in uw ontwerptool om naar contouren voordat u exporteert. Externe afbeeldingen die via een URL in de SVG zijn gekoppeld, worden niet opgehaald, dus sluit ze in of vlak het ontwerp eerst af.
SVG naar WebP converteren: wel en niet doen
| Doen | Niet doen |
|---|---|
| Render op 2× de weergegeven CSS-breedte | Eenvoudige inline pictogrammen converteren die als SVG kleiner zijn |
| Gebruik Zonder verlies voor vlakke logo's met weinig kleuren | Renderen op 4000 px voor een plek van 600 px |
| Bewaar de SVG-master voor toekomstige formaten | WebP versturen in e-mailnieuwsbrieven |
| Lever de WebP met width- en height-attributen om layoutverschuiving te voorkomen | Live tekst verwachten: de WebP bestaat uit pixels, niet uit selecteerbare tekst |
Vragen over SVG naar WebP
Welke pixelbreedte gebruik ik bij het converteren van SVG naar WebP?
Neem de breedte waarop de afbeelding in CSS-pixels wordt weergegeven en verdubbel die, zodat de afbeelding scherp blijft op telefoon- en laptopschermen met hoge pixeldichtheid. Een illustratie in een kolom van 800 px moet op 1600 px worden gerenderd. 3× loont op het web zelden, omdat het bestand groeit terwijl de zichtbare winst klein is.
Is WebP beter dan SVG voor een website?
Niet voor eenvoudige logo's, pictogrammen en diagrammen: een nette SVG is klein en bij elk formaat scherp, dus bewaar hem. WebP wint bij complexe illustraties met verlopen, filters of duizenden paden, en overal waar alleen bitmaps worden geaccepteerd, zoals socialemediavoorbeelden of een cms zonder SVG-ondersteuning.
Behoudt de WebP de transparante achtergrond van mijn SVG?
Ja. WebP heeft een volledig alfakanaal, zowel in verliesgevende als in verliesvrije modus, dus gebieden zonder vulling in de SVG blijven transparant. Randen van vormen worden anti-aliased tegen transparantie, wat er op elke achtergrondkleur goed uitziet.
Lossy of lossless WebP voor vectorillustraties?
Zonder verlies past bij vlakke logo's, pictogrammen en grafieken met een handvol effen kleuren; die comprimeren zeer goed en houden perfect schone randen. Met verlies op kwaliteit 85 tot 90 past bij illustraties met verlopen, schaduwen of texturen, waar verliesvrije bestanden zwaar worden. Probeer beide op één bestand en houd het kleinste resultaat dat er schoon uitziet.
Waarom kan ik geen SVG uploaden naar WordPress?
WordPress laat SVG weg uit de toegestane uploadtypen omdat een SVG scripts kan bevatten. WebP wordt sinds versie 5.8, uitgebracht in 2021, wel geaccepteerd, dus na conversie krijgt u een bestand dat de mediabibliotheek zonder beveiligingsplugin accepteert. Sites die echte vectoren nodig hebben, kunnen SVG-ondersteuning nog steeds toevoegen via een plugin die bestanden opschoont.
Kan ik de WebP gebruiken in een e-mailnieuwsbrief?
Vermijd het. Meerdere e-mailprogramma's, waaronder Outlook voor Windows op de desktop, tonen WebP niet, en Gmail geeft SVG ook niet weer. Render de afbeelding voor e-mail liever met SVG naar PNG.
