SVG na WebP-omskakelaar
Skakel 'n vektorlêer om na 'n WebP teen presies die pikselwydte wat u uitleg nodig het. Handig wanneer 'n CMS nie SVG-oplaaie aanvaar nie, 'n sosiale voorskou 'n bitmap vereis, of 'n illustrasie soveel paaie bevat dat die blaaier dit stadig teken.
Beeldomskakelaar
of los JPG, JPEG, JPE …-lêers hier ·
Maks. 95 MB per lêer· Tot 20 lêers· Uitgevee na 30 minute
Lêers word op ons bedieners verwerk en na 30 minute uitgevee.
85 hou foto's visueel identies aan die oorspronklike. Verlaag dit slegs wanneer jy 'n kleiner lêer nodig het.
JPG, BMP en EPS het geen deursigtigheid nie. Deursigtige pixels word met hierdie kleur gevul.
Heks-kleur agter deursigtige pixels, bv. #FFFFFF.
Hierdie formaat hou een beeld. Kies GIF- of WebP-uitvoer as jy die animasie wil behou.
'n Multi-grootte-ikoon bevat verskeie resolusies in een lêer; blaaiers en bedryfstelsels kies die een wat hulle nodig het.
Behou die oorspronklike afmetings, of voer een kant in en die aspekverhouding word behou.
Pixels vir die kant wat jy hierbo gekies het.
Persentasie van die oorspronklike afmetings.
sRGB is reg vir skerms en die web. Behou die oorspronklike vir drukwerkvloei; grysskaal gooi kleur weg.
Slegs metadata, 0 behou die oorspronklike waarde. Drukkers en sommige portale lees hierdie getal; dit verander nie die pixelafmetings nie.
Hoe om hierdie nutsding te gebruik
- 1
Laai die SVG op
Voeg tot 20 .svg-lêers by wat uit Figma, Illustrator, Inkscape of 'n grafiekbiblioteek uitgevoer is, elk tot 95 MB.
- 2
Stel die uitvoerwydte
Verander grootte van uitvoerbeeld begin by 'n breedte van 1200 px; verander dit na twee keer die breedte wat die beeld op die bladsy sal beslaan. Kwaliteit is 90, of merk Verliesloos onder Gevorderde instellings vir plat logo's en ikone.
- 3
Skakel om na WebP
Druk Skakel om na WebP en laai die lêers of een ZIP af. Deursigtige areas bly deursigtig.
Hoe skakel ek SVG na WebP om teen 'n spesifieke grootte?
Laai die SVG op, stel Verander grootte van uitvoerbeeld op die breedte in piksels wat jy nodig het (1200 px by verstek), en druk Skakel om na WebP. Die vektor word vars teen daardie breedte geteken, so niks word vergroot of vaag gemaak nie.
Wanneer 'n SVG 'n WebP moet word
SVG het in 2001 'n W3C-aanbeveling geword en is die regte formaat vir die meeste logo's en ikone: 'n paar kilogreep teks wat by enige inzoem skerp bly. Die probleem begin wanneer 'n lêer jou eie kode verlaat. WordPress en baie gehoste winkelbouers weier SVG-oplaaie, skakelvoorskoue op Facebook, LinkedIn en X word as bitmaps gehaal, en ontwerpgereedskap voer illustrasies uit met ingebedde rastereffekte wat 'n vektorlêer in etlike megagrepe opmerking verander.
WebP, wat Google in 2010 vrygestel het en Safari uiteindelik in weergawe 14 in 2020 ondersteun het, is die bitmap wat vir hierdie taak gebou is: kleiner as PNG met dieselfde voorkoms, met 'n regte alfakanaal. As die SVG direk teen sy finale grootte na WebP gelewer word, slaan dit die gewone ompad deur 'n groot PNG-uitvoer oor. As jy ook die omgekeerde wil hê, verduidelik ons bladsy oor WebP na SVG waarom daardie rigting natrekwerk eerder as omskakeling vereis.
SVG na WebP-groottes vir algemene webplekke
1200 × 630 px
Open Graph-skakelvoorskou
Beeld wat gewys word wanneer die bladsy gedeel word
1920 × 1080 px
Volbreedte-heldillustrasie
Dek die meeste lessenaarskerms teen 1×
1600 × 900 px
Blogkolombeeld teen 2×
Vir 'n 800 px-inhoudkolom
400 × 100 px
Kopstuk-logo teen 2×
Vir 'n 200 × 50 px-logoplek
SVG
Scalable Vector Graphics
SVG is 'n XML-gebaseerde vektorformaat wat die W3C in 2001 gestandaardiseer het. In plaas van pixels beskryf dit vorms, paaie en teks, so dit bly skerp op enige grootte en is gewoonlik piepklein vir logo's en ikone. Dit ondersteun deursigtigheid, CSS-stileer, skripte en animasie, en elke blaaier lewer dit inheems. SVG is ongeskik vir foto's, en komplekse illustrasies kan stadig word om te lewer. Illustrator, Inkscape, Figma en blaaiers kan dit oopmaak en redigeer.
- Kompressie
- –
- Deursigtigheid
- Ja
- Animasie
- Ja
- Bekendgestel
- 2001 · W3C
WEBP
WebP-beeld
WebP is 'n beeldformaat wat Google in 2010 vrygestel het om webbladsye vinniger te laat laai. Dit ondersteun beide verlieslike en verlieslose kompressie, alfadeursigtigheid en animasie in een formaat. Verlieslike WebP-lêers is gewoonlik 25–35% kleiner as JPEG's van soortgelyke visuele gehalte, en verlieslose WebP is gewoonlik kleiner as PNG. Elke huidige blaaier ondersteun dit, maar sommige ouer rekenaarsagteware, drukdienste en oplaaivorms weier dit steeds. Windows, macOS en die meeste moderne beeldredigeerders kan WebP-lêers oopmaak.
- Kompressie
- Met verlies of verliesloos
- Deursigtigheid
- Ja
- Animasie
- Ja
- Bekendgestel
- 2010 · Google
Mense skakel SVG na WebP om om 'n ligte bitmap van vaste grootte te kry vir plekke wat nie vektorlêers aanvaar nie of dit stadig teken, soos 'n CMS, 'n sosiale voorskou of 'n besige landingsbladsy; WebP na SVG is 'n natrekwerk, nie 'n formaatwisseling nie.
Hoe die SVG gerasteriseer word en wat om na te gaan
Die omskakelaar lees die SVG se eie width, height en viewBox, en teken dan elke pad teen die breedte wat jy stel; die hoogte volg die aspekverhouding. Omdat die tekenwerk teen die finale grootte gebeur, word dun lyne en klein teks net een keer, teen die regte skaal, anti-gealias. Om 'n klein PNG later te vergroot lyk nooit so skoon nie.
Lettertipes is gewoonlik die verrassing. As die SVG 'n lettertipe noem wat nie ingebed of na omlyne omgeskakel is nie, word 'n terugvallettertipe gebruik en lynlengtes verander. Skakel die teks in jou ontwerpgereedskap na omlyne om voordat jy uitvoer. Eksterne beelde wat per URL in die SVG gekoppel is, word nie gehaal nie, so bed dit in of maak die kunswerk eers plat.
SVG na WebP-omskakelaar: doen en moenie
| Doen | Moenie |
|---|---|
| Lewer teen 2× die vertoonde CSS-breedte | Skakel eenvoudige inlyn-ikone om wat as SVG kleiner is |
| Gebruik Verliesloos vir plat logo's met min kleure | Lewer teen 4000 px vir 'n 600 px-plek |
| Behou die SVG-meester vir toekomstige groottes | Stuur WebP in e-poknuusbriewe |
| Lewer die WebP met width- en height-eienskappe om uitlegverskuiwing te vermy | Verwag nie lewendige teks nie: die WebP is piksels, nie kiesbare teks nie |
Vrae oor SVG na WebP
Watter pikselwydte moet ek gebruik wanneer ek SVG na WebP omskakel?
Neem die breedte waarteen die beeld in CSS-piksels vertoon word en verdubbel dit, sodat dit skerp bly op foon- en skootrekenaarskerms met hoë digtheid. 'n Illustrasie in 'n 800 px-kolom moet teen 1600 px gelewer word. Om na 3× te gaan loon selde op die web, want die lêer word groter terwyl die sigbare verbetering klein is.
Is WebP beter as SVG vir 'n webwerf?
Nie vir eenvoudige logo's, ikone en diagramme nie: 'n skoon SVG is piepklein en skerp teen elke grootte, so behou dit. WebP is beter vir komplekse illustrasies met gradiënte, filters of duisende paaie, en vir enige plek wat net bitmaps aanvaar, soos sosiale voorskoue of 'n CMS sonder SVG-ondersteuning.
Behou die WebP die deursigtige agtergrond van my SVG?
Ja. WebP het 'n volle alfakanaal in sowel verlieslywende as verliesloze modus, so areas sonder vulling in die SVG bly deursigtig. Rande van vorms word teen deursigtigheid anti-gealias, wat op enige agtergrondkleur reg lyk.
Verlieslike of verlieslose WebP vir vektorkuns?
Verliesloos pas by plat logo's, ikone en grafieke met 'n handvol soliede kleure; dié pers baie goed saam en behou volmaak skoon rande. Verlieslywend teen kwaliteit 85 tot 90 pas by illustrasies met gradiënte, skaduwees of teksture, waar verliesloze lêers swaar word. Probeer albei op een lêer en behou die kleiner resultaat wat skoon lyk.
Waarom kan ek nie SVG na WordPress oplaai nie?
WordPress laat SVG weg uit sy toegelate oplaaitipes omdat 'n SVG skrips kan dra. Dit aanvaar WebP sedert weergawe 5.8, in 2021 vrygestel, so omskakeling gee 'n lêer wat die media-biblioteek sonder 'n sekuriteitsprogramtuig aanvaar. Webwerwe wat ware vektore nodig het, kan steeds SVG-ondersteuning deur 'n suiweringsprogramtuig byvoeg.
Kan ek die WebP in 'n e-posnuusbrief gebruik?
Vermy dit. Verskeie e-poskliënte, insluitend die lessenaar-Outlook vir Windows, vertoon nie WebP nie, en Gmail lewer ook nie SVG nie. Lewer die kunswerk eerder met SVG na PNG vir e-pos.
