Proměňte škálovatelné vektory SVG na použitelné obrázky PNG
Soubor SVG je sada instrukcí, ne hotový obrázek. Otevřete ho v textovém editoru a najdete XML popisující cesty, tvary, výplně a křivky — recept, podle kterého prohlížeč znovu nakreslí grafiku v jakékoli velikosti, o kterou požádáte. PNG je pravý opak: mřížka barevných pixelů zmrazená na pevné šířce a výšce. Převod jednoho na druhé se nazývá rasterizace a tento nástroj ji provádí zcela uvnitř vašeho prohlížeče. Vyberete výstupní velikost, SVG se vykreslí na plátno HTML a vrátí se PNG — žádný soubor nikdy neopustí vaše zařízení.
Vektor versus rastr, jednoduše řečeno
Klíčový rozdíl je v tom, jak se zachází s rozlišením. Protože SVG ukládá matematiku, ne pixely, je nezávislé na rozlišení: zvětšíte-li logo z favikony na billboard, každá hrana se přepočítá tak, aby zůstala matematicky ostrá. PNG takovou volnost nemá. Jeho pixely jsou napevno dané, takže zvětšení nad jeho nativní velikost nutí prohlížeč natahovat existující body a začnete vidět rozmazání a schodovitý efekt, který rastrové obrázky prozrazuje.
Tento kompromis platí oběma směry. Vektory jsou neporazitelné pro loga, ikony a plochou ilustraci tvořenou čistými tvary, a soubory bývají obvykle drobné. Rastrové formáty jako PNG zvládají přechody, jemné stíny a fotografický detail přirozeněji, a — což je klíčové — rozumí jim prakticky vše. Když rasterizujete, měníte nekonečnou škálovatelnost SVG za univerzální kompatibilitu PNG v jedné zvolené velikosti.
Proč vůbec SVG rasterizovat?
Když SVG škáluje tak krásně, proč ho převádět? Odpovědí bývá obvykle kompatibilita. Spousta míst SVG prostě nepřijímá: mnoho e-mailových klientů ho odstraní nebo odmítne vykreslit, editory dokumentů a prezentační software často chtějí plochý obrázek, tržiště a reklamní sítě vyžadují PNG nebo JPG, a většina sociálních platforem nahrání vektoru zcela ignoruje. Některé redakční systémy navíc SVG rovnou blokují z bezpečnostních důvodů, protože formát umí obsahovat skripty.
Druhým důvodem je, že někdy prostě chcete obsah s pevnou velikostí. Ikony aplikací, náhledy, Open Graph obrázky a tiskoviny - to vše očekává přesné rozměry v pixelech. PNG grafiku uzamkne na tomto cíli, takže se vykresluje všude identicky, bez překvapení od prohlížeče, který by vektor interpretoval jinak. Převod zdrojového SVG do přesných velikostí, které platforma vyžaduje, bývá často nejčistší cestou k jednotnému výsledku.
Výběr správného exportního rozlišení
Protože se PNG nedokáže elegantně zvětšit, na velikosti, ve které exportujete, záleží víc než u jakéhokoli vektoru. Exportujete-li příliš malé, obrázek na moderních obrazovkách vypadá měkce; exportujete-li zbytečně velké, plýtváte přenosovou kapacitou. Jednoduché pravidlo: rozhodněte, jaká bude největší velikost, ve které se obrázek kdy zobrazí, a vykreslete alespoň tuto, ideálně víc kvůli displejům s vysokou hustotou pixelů.
Standardní obrazovky si vystačí s 1x — nominální velikostí grafiky. Displeje s vysokým rozlišením a Retina nahustí do stejného prostoru zhruba dvojnásobek pixelů, takže export 2x udrží ikony a grafiku ostré místo rozmazané. Pro tisk, plakáty nebo velmi velké displeje dává 3x nebo 4x rezervu navíc. Protože je zdrojem vektor, větší export vás nestojí nic na kvalitě — křivky se před zploštěním jednoduše přepočítají na vyšší počet pixelů. V případě pochybností vykreslete velkoryse velkou verzi; velké PNG můžete kdykoli zmenšit, ale detail zmenšeného obrázku už nikdy nezískáte zvětšením zpět.
Průhlednost jede s sebou
PNG podporuje plný alfa kanál, což znamená, že průhlednost konverzi přežije. Pokud vaše SVG nemá žádnou výplň pozadí, výsledné PNG tyto plochy ponechá průhledné, takže logo nebo ikona sedne čistě na jakoukoli barvu bez ošklivého bílého rámečku kolem. Pokud místo toho potřebujete plné pozadí, dejte ho SVG před konverzí. Ať tak či tak, co vidíte ve vektoru, to PNG zachová, a přesně proto je PNG — a ne JPG — přirozeným cílem pro ikony, odznaky a překryvné vrstvy.
Vše zůstává na vašem zařízení
Tento konvertor běží jako lokální kód ve vašem prohlížeči pomocí canvas API. Vaše SVG se čte, kreslí a exportuje, aniž by se kdy odeslalo na server, takže neexistuje žádné nahrávání, žádná fronta ani kopie vaší grafiky ležící v cizím úložišti. To je pro vás rychlejší a bezpečnější pro cokoli, co byste raději nesvěřili třetí straně, od nezveřejněného brandingu po interní diagramy. Až tu skončíte, prozkoumejte zbytek našich nástrojů pro obrázky — pokud stavíte obsah pro Windows nebo favikonu, přirozeným dalším krokem je konvertor PNG na ICO.
Často kladené otázky
Bude PNG vypadat stejně ostře jako SVG?
Ve velikosti, ve které exportujete, ano. Protože se vektor vykresluje znovu ve vámi zvoleném rozlišení, hrany zůstávají ostré. Rozdíl je v tom, že PNG už nelze dodatečně zvětšit bez rozmazání, zatímco původní SVG to vždy dokázalo.
Zachová konverze průhlednost?
Ano. PNG má alfa kanál, takže všechny průhledné plochy ve vašem SVG zůstanou průhledné i v PNG. Pokud chcete místo toho plnou výplň, přidejte pozadí do SVG nejdřív.
Jaké rozlišení mám zvolit?
Vyrovnejte se nebo přesáhněte největší velikost, ve které se obrázek zobrazí. Použijte 1x pro standardní obrazovky, 2x pro Retina a displeje s vysokou hustotou pixelů a 3x nebo 4x pro tisk či nadměrně velkou grafiku. Vykreslení ve větší velikosti nestojí nic na kvalitě, protože zdrojem je vektor.
Proč jednoduše nepoužívat SVG všude?
Mnoho e-mailových klientů, editorů dokumentů, tržišť a sociálních platforem SVG nepřijímá nebo spolehlivě nevykresluje. PNG funguje téměř všude a uzamyká grafiku na předvídatelné pevné velikosti.
Nahrávají se moje soubory někam?
Ne. Vše běží lokálně ve vašem prohlížeči. Vaše SVG se nikdy neposílá na server, takže se nic nenahrává, neukládá ani nesleduje.
Můžu PNG převést zpátky na SVG?
Ne věrně. Rasterizace zahazuje původní matematiku, takže cesta zpět znamená obkreslení pixelů do nových vektorových cest, což se se zdrojem málokdy shoduje. Uchovejte si původní SVG jako hlavní soubor.