Prevod SVG na WebP
Vykreslite vektorový súbor do WebP presne v šírke v pixeloch, ktorú potrebuje váš layout. Hodí sa, keď CMS neprijíma SVG, náhľad pre sociálne siete vyžaduje bitmapu alebo má ilustrácia toľko ciest, že ju prehliadač vykresľuje pomaly.
Prevodník obrázkov
alebo sem presuňte súbory JPG, JPEG, JPE … ·
Max. 95 MB na súbor· Až 20 súborov· Odstránenie po 30 minútach
Súbory sa spracúvajú na našich serveroch a po 30 minútach sa odstránia.
85 zachová fotografie vizuálne rovnaké ako originál. Znížte ju, len keď potrebujete menší súbor.
JPG, BMP a EPS nemajú priehľadnosť. Priehľadné pixely sa vyplnia touto farbou.
Hex farba použitá za priehľadnými pixelmi, napr. #FFFFFF.
Tento formát obsahuje jediný obrázok. Ak chcete zachovať animáciu, vyberte výstup GIF alebo WebP.
Ikona s viacerými veľkosťami obsahuje niekoľko rozlíšení v jednom súbore; prehliadače a operačné systémy si vyberú, ktoré potrebujú.
Ponechajte pôvodné rozmery alebo zadajte jednu stranu a pomer strán sa zachová.
Pixely pre stranu vybranú vyššie.
Percento pôvodných rozmerov.
sRGB je správne pre obrazovky a web. Pôvodný ponechajte pre tlačové postupy; odtiene sivej zahodia farbu.
Len metadáta, 0 ponechá pôvodnú hodnotu. Tlačiarne a niektoré portály toto číslo čítajú; nemení rozmery v pixeloch.
Ako používať tento nástroj
- 1
Nahrajte SVG
Pridajte až 20 súborov .svg exportovaných z Figmy, Illustratora, Inkscapu alebo z knižnice na grafy, každý do 95 MB.
- 2
Nastavte výstupnú šírku
Zmeniť veľkosť výstupného obrázka začína na šírke 1200 px; zmeňte ju na dvojnásobok šírky, akú bude obrázok zaberať na stránke. Kvalita je 90, alebo pri plochých logách a ikonách zaškrtnite Bezstratovo v časti Rozšírené nastavenia.
- 3
Previeďte na WebP
Stlačte Previesť na WebP a stiahnite si súbory alebo jeden ZIP. Priehľadné oblasti zostanú priehľadné.
Ako previesť SVG na WebP v konkrétnej veľkosti?
Nahrajte SVG, v poli Zmeniť veľkosť výstupného obrázka nastavte potrebnú šírku v pixeloch (predvolene 1200 px) a stlačte Previesť na WebP. Vektor sa nakreslí nanovo v danej šírke, takže sa nič nezväčšuje ani nerozmazáva.
Kedy sa oplatí previesť SVG na WebP
SVG sa stalo odporúčaním W3C v roku 2001 a je správnym formátom pre väčšinu log a ikon: pár kilobajtov textu, ktorý zostane ostrý pri akomkoľvek priblížení. Problémy začnú, keď súbor opustí váš kód. WordPress a mnohé hostované nástroje na tvorbu e-shopov SVG nahrávať nedovolia, náhľady odkazov na Facebooku, LinkedIne a X sa sťahujú ako bitmapy a dizajnové nástroje exportujú ilustrácie s vloženými rastrovými efektmi, ktoré z vektorového súboru urobia niekoľko megabajtov kódu.
WebP, ktorý Google vydal v roku 2010 a Safari ho napokon podporil vo verzii 14 v roku 2020, je bitmapa vytvorená práve na takúto úlohu: pri rovnakom vzhľade menšia než PNG a so skutočným alfa kanálom. Vykreslenie SVG priamo do WebP v konečnej veľkosti preskočí obvyklú okľuku cez veľký export do PNG. Ak potrebujete aj opačný smer, na stránke WebP na SVG vysvetľujeme, prečo si vyžaduje vektorizáciu, nie konverziu.
Rozmery pri prevode SVG na WebP pre bežné miesta na webe
1200 × 630 px
Náhľad odkazu Open Graph
Obrázok zobrazený pri zdieľaní stránky
1920 × 1080 px
Ilustrácia hero na celú šírku
Pokryje väčšinu desktopových obrazoviek pri 1×
1600 × 900 px
Obrázok v blogovom stĺpci pri 2×
Pre obsahový stĺpec s šírkou 800 px
400 × 100 px
Logo v hlavičke pri 2×
Pre miesto na logo 200 × 50 px
SVG
Scalable Vector Graphics
SVG je vektorový formát založený na XML, ktorý v roku 2001 štandardizovalo W3C. Namiesto pixelov opisuje tvary, cesty a text, takže je ostrý v každej veľkosti a pri logách a ikonách býva drobný. Podporuje priehľadnosť, štýlovanie CSS, skriptovanie a animáciu a každý prehliadač ho vykresľuje natívne. SVG nie je vhodný pre fotografie a zložité ilustrácie sa môžu vykresľovať pomaly. Otvoria a upravia ho Illustrator, Inkscape, Figma a prehliadače.
- Kompresia
- –
- Priehľadnosť
- Áno
- Animácia
- Áno
- Rok vzniku
- 2001 · W3C
WEBP
Obrázok WebP
WebP je obrazový formát, ktorý Google vydal v roku 2010 na zrýchlenie načítavania webových stránok. V jednom formáte podporuje stratovú aj bezstratovú kompresiu, alfa priehľadnosť a animáciu. Stratové súbory WebP sú pri porovnateľnej vizuálnej kvalite zvyčajne o 25–35 % menšie ako JPEG a bezstratové WebP je zvyčajne menšie ako PNG. Podporujú ho všetky aktuálne prehliadače, no niektorý starší desktopový softvér, tlačové služby a formuláre na nahrávanie ho stále odmietajú. Súbory WebP otvoria Windows, macOS aj väčšina moderných obrazových editorov.
- Kompresia
- So stratou alebo bezstratová
- Priehľadnosť
- Áno
- Animácia
- Áno
- Rok vzniku
- 2010 · Google
SVG sa prevádza na WebP, aby vznikla ľahká bitmapa pevnej veľkosti pre miesta, ktoré vektorové súbory neprijmú alebo ich kreslia pomaly, napríklad CMS, náhľad na sociálnej sieti či vyťaženú vstupnú stránku; WebP na SVG je vektorizácia, nie zámena formátu.
Ako sa SVG rastrovo vykreslí a čo skontrolovať
Konvertor načíta šírku, výšku a viewBox samotného SVG a potom nakreslí každú cestu v šírke, ktorú nastavíte; výška vychádza zo pomeru strán. Keďže sa kreslí už v konečnej veľkosti, tenké čiary a malý text sa vyhladia jedenkrát, vo vhodnej mierke. Neskoršie zväčšenie malého PNG nikdy nevyzerá tak čisto.
Najčastejším prekvapením sú písma. Ak SVG používa písmo, ktoré nie je vložené ani prevedené na krivky, použije sa náhradné písmo a zmenia sa dĺžky riadkov. Pred exportom preto text v dizajnovom nástroji previesť na krivky. Externé obrázky odkazované cez URL vnútri SVG sa nesťahujú, preto ich vložte alebo najprv zlúčte vrstvy grafiky.
Prevod SVG na WebP: čo robiť a čomu sa vyhnúť
| Áno | Nie |
|---|---|
| Vykresľujte v 2× zobrazenej šírke CSS | Neprevádzajte jednoduché vložené ikony, ktoré sú ako SVG menšie |
| Pri plochých logách s niekoľkými farbami použite Bezstratovo | Nevykresľujte na 4000 px pre miesto široké 600 px |
| Ponechajte si hlavné SVG pre budúce veľkosti | Neposielajte WebP v e-mailových newsletteroch |
| WebP nasadzujte s atribútmi width a height, aby sa predišlo posunu rozloženia | Nečakajte živý text: WebP sú pixely, nie vybrateľné písmo |
Otázky o prevode SVG na WebP
Akú šírku v pixeloch zvoliť pri prevode SVG na WebP?
Vezmite šírku, v akej sa obrázok zobrazuje v pixeloch CSS, a zdvojnásobte ju, aby zostal ostrý aj na telefónoch a notebookoch s vysokou hustotou pixelov. Ilustrácia zobrazená v 800 px stĺpci by sa mala vykresliť na 1600 px. Zväčšenie na 3× sa na webe málokedy oplatí, lebo súbor rastie a viditeľný prínos je malý.
Je WebP pre webovú stránku lepší ako SVG?
Pri jednoduchých logách, ikonách a diagramoch nie: čisté SVG je malé a ostré v každej veľkosti, preto ho ponechajte. WebP vyhráva pri zložitých ilustráciách s prechodmi, filtrami alebo tisíckami ciest a všade, kde sa akceptujú iba bitmapy, napríklad pri náhľadoch na sociálnych sieťach alebo v CMS bez podpory SVG.
Zachová WebP priehľadné pozadie môjho SVG?
Áno. WebP má plnohodnotný alfa kanál v stratovom aj bezstratovom režime, takže oblasti bez výplne v SVG zostanú priehľadné. Okraje tvarov sú vyhladené voči priehľadnosti, čo vyzerá správne na akejkoľvek farbe pozadia.
Stratový alebo bezstratový WebP pre vektorovú grafiku?
Bezstratovo sa hodí na ploché logá, ikony a grafy s niekoľkými plnými farbami; tie sa komprimujú veľmi dobre a majú dokonale čisté hrany. Stratové s kvalitou 85 až 90 sa hodí na ilustrácie s prechodmi, tieňmi alebo textúrami, pri ktorých sú bezstratové súbory ťažké. Vyskúšajte oba spôsoby na jednom súbore a ponechajte menší výsledok, ktorý vyzerá čisto.
Prečo nemôžem nahrať SVG do WordPressu?
WordPress nezahŕňa SVG medzi povolené typy nahrávania, pretože SVG môže obsahovať skripty. WebP akceptuje od verzie 5.8 z roku 2021, takže po konverzii dostanete súbor, ktorý knižnica médií prijme bez bezpečnostného doplnku. Weby, ktoré potrebujú skutočné vektory, môžu podporu SVG stále pridať cez doplnok, ktorý súbory sanitizuje.
Môžem WebP použiť v e-mailovom newsletteri?
Nepoužívajte ho. Viaceré e-mailové klienty vrátane desktopového Outlooku pre Windows WebP nezobrazujú a Gmail nevykresľuje ani SVG. Na e-mail radšej vykreslite obrázok cez SVG do PNG.
