Převod SVG do WebP
Vykreslete vektorový soubor do WebP přesně v té šířce v pixelech, kterou potřebuje vaše rozvržení. Hodí se, když redakční systém odmítá nahrání SVG, náhled pro sociální sítě vyžaduje bitmapu nebo má ilustrace tolik cest, že ji prohlížeč vykresluje pomalu.
Převodník obrázků
nebo sem přetáhněte soubory JPG, JPEG, JPE … ·
Max. 95 MB na soubor· Až 20 souborů· Smazáno po 30 minutách
Soubory se zpracovávají na našich serverech a po 30 minutách se smažou.
85 udrží fotografie vizuálně shodné s originálem. Snižte ji, jen když potřebujete menší soubor.
JPG, BMP a EPS nemají průhlednost. Průhledné pixely se vyplní touto barvou.
Hexadecimální barva použitá za průhlednými pixely, např. #FFFFFF.
Tento formát obsahuje jediný obrázek. Chcete-li zachovat animaci, zvolte výstup GIF nebo WebP.
Ikona s více velikostmi obsahuje několik rozlišení v jednom souboru; prohlížeče a operační systémy si vyberou to, které potřebují.
Ponechte původní rozměry, nebo zadejte jednu stranu a poměr stran se zachová.
Pixely pro stranu vybranou výše.
Procento původních rozměrů.
sRGB je správná volba pro obrazovky a web. Pro tiskové postupy ponechte originál; odstíny šedi zahodí barvu.
Pouze metadata, 0 ponechá původní hodnotu. Tiskárny a některé portály toto číslo čtou; rozměry v pixelech nemění.
Jak nástroj používat
- 1
Nahrajte SVG
Přidejte až 20 souborů .svg exportovaných z Figmy, Illustratoru, Inkscapu nebo knihovny pro grafy, každý do 95 MB.
- 2
Nastavte výstupní šířku
Změnit velikost výstupního obrázku začíná na šířce 1200 px; nastavte dvojnásobek šířky, kterou bude obrázek na stránce zabírat. Kvalita je 90, nebo u plochých log a ikon zaškrtněte Bezeztrátově v části Pokročilá nastavení.
- 3
Převeďte do WebP
Stiskněte Převést na WebP a stáhněte soubory nebo jeden ZIP. Průhledné oblasti zůstanou průhledné.
Jak převést SVG do WebP na konkrétní velikost?
Nahrajte SVG, nastavte Změnit velikost výstupního obrázku na požadovanou šířku v pixelech (výchozí je 1200 px) a stiskněte Převést na WebP. Vektor se vykreslí znovu v dané šířce, takže se nic nezvětšuje ani nerozmazává.
Kdy převést SVG do WebP
SVG se stalo doporučením W3C v roce 2001 a je správným formátem pro většinu log a ikon: pár kilobajtů textu, který zůstává ostrý při jakémkoli přiblížení. Potíže začínají, když soubor opustí váš vlastní kód. WordPress a mnoho hostovaných tvůrců e-shopů nahrávání SVG odmítá, náhledy odkazů na Facebooku, LinkedInu a X se načítají jako bitmapy a designové nástroje exportují ilustrace s vloženými rastrovými efekty, které z vektorového souboru udělají několik megabajtů kódu.
WebP, který Google vydal v roce 2010 a Safari ho podpořil až ve verzi 14 v roce 2020, je bitmapa vytvořená právě pro tento úkol: při stejném vzhledu menší než PNG a se skutečným alfa kanálem. Vykreslení SVG přímo do WebP v cílové velikosti ušetří obvyklou oklikou přes velký export do PNG. Pokud potřebujete i opačný směr, stránka WebP do SVG vysvětluje, proč to vyžaduje vektorizaci, ne převod.
Velikosti při převodu SVG do WebP pro běžná místa na webu
1200 × 630 px
Náhled odkazu Open Graph
Obrázek zobrazený při sdílení stránky
1920 × 1080 px
Ilustrace přes celou šířku
Pokryje většinu stolních displejů v 1×
1600 × 900 px
Obrázek v blogovém sloupci ve 2×
Pro 800px sloupec obsahu
400 × 100 px
Logo v záhlaví ve 2×
Pro místo na logo 200 × 50 px
SVG
Scalable Vector Graphics
SVG je vektorový formát založený na XML, který W3C standardizovalo v roce 2001. Místo pixelů popisuje tvary, křivky a text, takže zůstává ostrý v libovolné velikosti a u log a ikon bývá drobný. Podporuje průhlednost, stylování pomocí CSS, skriptování a animace a každý prohlížeč ho zobrazí nativně. Pro fotografie SVG nevyhovuje a složité ilustrace se mohou vykreslovat pomalu. Otevřou a upraví ho Illustrator, Inkscape, Figma i prohlížeče.
- Komprese
- –
- Průhlednost
- Ano
- Animace
- Ano
- Představeno
- 2001 · W3C
WEBP
Obrázek WebP
WebP je obrazový formát, který Google vydal v roce 2010 pro rychlejší načítání webových stránek. V jednom formátu podporuje ztrátovou i bezeztrátovou kompresi, alfa průhlednost a animace. Ztrátové soubory WebP bývají při podobné vizuální kvalitě o 25–35 % menší než JPEG a bezeztrátový WebP bývá menší než PNG. Podporují ho všechny současné prohlížeče, ale některý starší desktopový software, tiskové služby a formuláře pro nahrávání jej stále odmítají. Windows, macOS i většina moderních obrazových editorů soubory WebP otevře.
- Komprese
- Ztrátová i bezztrátová
- Průhlednost
- Ano
- Animace
- Ano
- Představeno
- 2010 · Google
SVG se převádí do WebP, aby vznikla lehká bitmapa pevné velikosti pro místa, která vektorové soubory nepřijímají nebo je vykreslují pomalu, například CMS, náhled na sociální síti nebo vytížená vstupní stránka; WebP do SVG je vektorizace, ne pouhá změna formátu.
Jak se SVG rastruje a co zkontrolovat
Převodník přečte vlastní šířku, výšku a viewBox souboru SVG a každou cestu vykreslí v nastavené šířce; výška se řídí poměrem stran. Protože se kreslí rovnou v cílové velikosti, tenké čáry a malý text se vyhladí jednou, ve správném měřítku. Pozdější zvětšení malého PNG nikdy nevypadá tak čistě.
Překvapením bývají fonty. Pokud SVG odkazuje na písmo, které není vložené ani převedené na křivky, použije se náhradní font a změní se délky řádků. Před exportem převeďte text v návrhovém nástroji na křivky. Externí obrázky odkazované v SVG adresou URL se nenačítají, proto je vložte nebo grafiku nejdřív sloučte.
Převod SVG do WebP: co dělat a čemu se vyhnout
| Ano | Ne |
|---|---|
| Vykreslujte ve 2× zobrazované šířky v CSS | Nepřevádějte jednoduché vložené ikony, které jsou jako SVG menší |
| U plochých log s málo barvami použijte Bezeztrátově | Nevykreslujte na 4000 px pro místo široké 600 px |
| Ponechte si původní SVG pro budoucí velikosti | Neposílejte WebP v e-mailových newsletterech |
| WebP nasaďte s atributy width a height, aby nedocházelo k posunu rozvržení | Nečekejte živý text: WebP jsou pixely, ne vybíratelné písmo |
Otázky k převodu SVG do WebP
Jakou šířku v pixelech zvolit při převodu SVG do WebP?
Vezměte šířku, ve které se obrázek zobrazuje v CSS pixelech, a zdvojnásobte ji, aby zůstal ostrý na displejích telefonů a notebooků s vysokou hustotou. Ilustrace zobrazená v 800px sloupci by se měla vykreslit na 1600 px. Zvětšení na 3× se na webu málokdy vyplatí, protože soubor naroste a viditelný přínos je malý.
Je pro web lepší WebP, nebo SVG?
U jednoduchých log, ikon a diagramů ne: čisté SVG je malé a ostré v jakékoli velikosti, takže si ho nechte. WebP vyhrává u složitých ilustrací s přechody, filtry nebo tisíci cest a všude, kde jsou povoleny jen bitmapy, například u náhledů na sociálních sítích nebo v CMS bez podpory SVG.
Zachová WebP průhledné pozadí mého SVG?
Ano. WebP má plnohodnotný alfa kanál v ztrátovém i bezeztrátovém režimu, takže oblasti bez výplně v SVG zůstanou průhledné. Okraje tvarů jsou vyhlazeny vůči průhlednosti, což vypadá správně na jakékoli barvě pozadí.
Ztrátový, nebo bezztrátový WebP pro vektorovou grafiku?
Bezeztrátový režim se hodí pro ploché logo, ikony a grafy s několika plnými barvami; ty se komprimují velmi dobře a mají dokonale čisté hrany. Ztrátový režim s kvalitou 85 až 90 se hodí pro ilustrace s přechody, stíny nebo texturami, kde jsou bezeztrátové soubory těžké. Vyzkoušejte oba na jednom souboru a ponechte menší výsledek, který vypadá čistě.
Proč nejde do WordPressu nahrát SVG?
WordPress SVG nezahrnuje mezi povolené typy nahrávání, protože SVG může obsahovat skripty. WebP přijímá od verze 5.8 z roku 2021, takže po převodu získáte soubor, který knihovna médií přijme bez bezpečnostního pluginu. Weby, které potřebují skutečné vektory, mohou podporu SVG stále doplnit pluginem s čištěním kódu.
Mohu WebP použít v e-mailovém newsletteru?
Raději ne. Několik e-mailových klientů, včetně desktopového Outlooku pro Windows, WebP nezobrazuje a Gmail nevykresluje ani SVG. Pro e-mail grafiku raději vykreslete pomocí SVG do PNG.
