Konvertera SVG till WebP

Rendera en vektorfil till en WebP med exakt den pixelbredd din layout kräver. Praktiskt när ett CMS inte tar emot SVG-filer, när en förhandsvisning i sociala medier kräver en rasterbild eller när en illustration har så många banor att webbläsaren ritar den långsamt.

eller släpp JPG, JPEG, JPE …-filer här ·

Max 95 MB per fil· Upp till 20 filer· Raderas efter 30 minuter

Utdata

Konvertera till

Filerna bearbetas på våra servrar och raderas efter 30 minuter.

Så använder du verktyget

1
Ladda upp SVG-filen
Lägg till upp till 20 .svg-filer exporterade från Figma, Illustrator, Inkscape eller ett diagrambibliotek, högst 95 MB per fil.
2
Ange bredden på resultatet
Ändra storlek på bilden börjar på en bredd på 1200 px; ändra den till dubbla den bredd som bilden tar upp på sidan. Kvalitet är 90, eller bocka i Förlustfri under Avancerade inställningar för platta logotyper och ikoner.
3
Konvertera till WebP
Klicka på Konvertera till WebP och ladda ner filerna eller en ZIP-fil. Genomskinliga områden förblir genomskinliga.

Svar

Hur konverterar jag SVG till WebP i en viss storlek?

Ladda upp SVG-filen, ställ in Ändra storlek på bilden på önskad bredd i pixlar (1200 px som standard) och klicka på Konvertera till WebP. Vektorn ritas upp på nytt i den bredden, så inget förstoras eller blir suddigt.

När en SVG bör bli en WebP

SVG blev en W3C-rekommendation 2001 och är rätt format för de flesta logotyper och ikoner: några kilobyte text som förblir skarp vid all zoom. Problemen börjar när filen lämnar din egen kod. WordPress och många webbshopsbyggare nekar SVG-uppladdningar, länkförhandsvisningar på Facebook, LinkedIn och X hämtas som bitmappar, och designverktyg exporterar illustrationer med inbäddade rastereffekter som gör en vektorfil till flera megabyte kod.

WebP, som Google lanserade 2010 och som Safari äntligen stödde från version 14 år 2020, är bitmappen som är gjord för det här: mindre än PNG med samma utseende och med en riktig alfakanal. Genom att rendera SVG direkt till WebP i slutstorleken slipper du den vanliga omvägen via en stor PNG-export. Vill du ha omvänd riktning förklarar vår sida om WebP till SVG varför den kräver vektorisering och inte vanlig konvertering.

SVG till WebP: storlekar för vanliga platser på webben

40:21

1200 × 630 px

Open Graph-länkförhandsvisning

Bilden som visas när sidan delas

16:9

1920 × 1080 px

Illustration i full bredd i sidhuvudet

Täcker de flesta datorskärmar i 1×

16:9

1600 × 900 px

Bild i bloggkolumn i 2×

För en innehållskolumn på 800 px

4:1

400 × 100 px

Logotyp i sidhuvud i 2×

För en logotypplats på 200 × 50 px

SVG

Scalable Vector Graphics

SVG är ett XML-baserat vektorformat som W3C standardiserade 2001. I stället för pixlar beskriver det former, banor och text, så det förblir skarpt i alla storlekar och är oftast mycket litet för logotyper och ikoner. Det stöder transparens, CSS-formatering, skript och animation, och alla webbläsare återger det direkt. SVG lämpar sig inte för foton, och komplexa illustrationer kan bli långsamma att rendera. Illustrator, Inkscape, Figma och webbläsare kan öppna och redigera det.

Komprimering: –
Transparens: Ja
Animation: Ja
Introducerades: 2001 · W3C

SVG-omvandlare

WEBP

WebP-bild

WebP är ett bildformat som Google släppte 2010 för att få webbsidor att laddas snabbare. Det stöder både förlustbringande och förlustfri komprimering, alfatransparens och animation i ett och samma format. Förlustbringande WebP-filer är vanligtvis 25–35 % mindre än JPEG med liknande visuell kvalitet, och förlustfri WebP är oftast mindre än PNG. Alla aktuella webbläsare stöder det, men en del äldre datorprogram, tryckerier och uppladdningsformulär avvisar det fortfarande. Windows, macOS och de flesta moderna bildredigerare kan öppna WebP-filer.

Komprimering: Förlustbaserad eller förlustfri
Transparens: Ja
Animation: Ja
Introducerades: 2010 · Google

WEBP-omvandlare

Man konverterar SVG till WebP för att få en lätt bitmapp i fast storlek till platser som inte tar emot vektorfiler eller ritar dem långsamt, som ett CMS, en förhandsvisning i sociala medier eller en tung landningssida; WebP till SVG är ett vektoriseringsjobb, inte ett formatbyte.

Så rastreras SVG-filen och det här ska du kontrollera

Konverteraren läser SVG-filens egna width, height och viewBox och ritar sedan varje bana i den bredd du anger; höjden följer proportionerna. Eftersom ritningen sker i slutstorleken kantutjämnas tunna linjer och liten text en enda gång, i rätt skala. Att förstora en liten PNG i efterhand blir aldrig lika rent.

Typsnitt är den vanliga överraskningen. Om SVG-filen anger ett typsnitt som inte är inbäddat eller konverterat till konturer används ett reservtypsnitt och radlängderna ändras. Konvertera texten till konturer i designverktyget före exporten. Externa bilder som länkas via URL i SVG-filen hämtas inte, så bädda in dem eller platta till bilden först.

Konvertera SVG till WebP: gör så här och undvik detta

Gör så här	Undvik
Rendera i 2× den visade CSS-bredden	Konvertera enkla inbäddade ikoner som är mindre som SVG
Använd Förlustfri för platta logotyper med få färger	Rendera i 4000 px för en plats på 600 px
Behåll SVG-originalet för framtida storlekar	Skicka WebP i e-postutskick
Ange width- och height-attribut för WebP-bilden för att undvika layoutskift	Räkna med levande text: WebP är pixlar, inte markerbar text

Frågor om SVG till WebP

Vilken pixelbredd ska jag välja när jag konverterar SVG till WebP?

Ta den bredd som bilden visas i, i CSS-pixlar, och dubblera den så att bilden blir skarp på telefon- och bärbara datorskärmar med hög pixeltäthet. En illustration som visas i en 800 px bred kolumn bör renderas i 1600 px. Att gå upp till 3× lönar sig sällan på webben, eftersom filen växer medan den synliga vinsten är liten.

Är WebP bättre än SVG för en webbplats?

Inte för enkla logotyper, ikoner och diagram: en ren SVG är liten och skarp i alla storlekar, så behåll den. WebP vinner för komplexa illustrationer med gradienter, filter eller tusentals banor, och överallt där bara bitmappar accepteras, som förhandsvisningar i sociala medier eller ett CMS utan SVG-stöd.

Behåller WebP-filen den transparenta bakgrunden från min SVG?

Ja. WebP har en fullständig alfakanal både i förlustbehäftat och förlustfritt läge, så ytor utan fyllning i SVG-filen förblir genomskinliga. Formernas kanter kantutjämnas mot transparens, vilket ser rätt ut på vilken bakgrundsfärg som helst.

Förstörande eller förlustfri WebP för vektorgrafik?

Förlustfri passar platta logotyper, ikoner och diagram med några få enfärgade ytor; de komprimeras mycket bra och behåller helt rena kanter. Förlustbehäftad med kvalitet 85 till 90 passar illustrationer med gradienter, skuggor eller texturer, där förlustfria filer blir tunga. Testa båda på en fil och behåll det mindre resultatet som ser rent ut.

Varför kan jag inte ladda upp SVG i WordPress?

WordPress tillåter inte SVG som uppladdningstyp eftersom en SVG kan innehålla skript. WebP har accepterats sedan version 5.8, som kom 2021, så med konvertering får du en fil som mediebiblioteket tar emot utan ett säkerhetstillägg. Webbplatser som behöver riktig vektorgrafik kan ändå lägga till SVG-stöd via ett tillägg som rensar filerna.

Kan jag använda WebP-filen i ett nyhetsbrev via e-post?

Undvik det. Flera e-postklienter, bland annat Outlook för Windows på datorn, visar inte WebP, och Gmail visar inte heller SVG. Rendera i stället bilden med SVG till PNG för e-post.

Format förklarade
AVIF vs HEIC vs WebP: så skiljer sig bildformaten
11 min läsning
Bildverktyg
Konvertera PNG till SVG: vektorisera logotyper och ikoner
12 min läsning