SVG na PNG/JPG/WebP - online konvertor zdarma

Návod k použití – pro zobrazení klikněte sem

Pomocí tohoto nástroje můžete převést jakýkoliv platný soubor nebo kód SVG na obrázek ve formátu PNG, JPG nebo WebP.

1. Nejdříve nahrajte soubor ze svého zařízení, nebo vložte obsah tohoto souboru jako text, a to včetně tagů <svg>. Pokud budete chtít soubor SVG upravit, udělejte to přímo v něm například přes CSS nebo v některém online editoru.
2. Po nahrání uvidíte velikost souboru, kterou můžete snadno změnit. Díky tomu, že je SVG vytvořený vektorovou grafikou, bude i změna velikosti bezztrátová, pokud neobsahuje prvky, které vektorově vykresleny nejsou.

Formáty PNG a WebP podporují alfa kanál, tedy průhlednost jednotlivých pixelů. Pokud tedy i SVG obsahuje průhledné oblasti, budou v těchto formátech přesně zachovány.

Formát JPG proti tomu průhlednost nepodporuje. Převod ze SVG na JPG obecně vzato není tak vhodný, protože JPG je formát typicky nejvhodnější na fotografie, a ne na grafiku, která je typicky používaná ve formátu SVG. Pokud ovšem budete opravdu formát JPG potřebovat, zobrazí se také volba barvy, kterou se nahradí všechny průhledné části obrázku.

Při převodu na JPG můžete narazit na různé fragmenty nebo menší znetvoření obrázku, které je dané tím, že některé části SVG mohou být poloprůhledné, ovšem bylo potřeba je převést na viditelné. Pokud se vám výsledek nezamlouvá, doporučujeme využít formátů PNG nebo WebP, které budou převedeny lépe a bude i zachována průhlednost všech pixelů.

Po zkonvertování obrázku si jej můžete zkontrolovat a rovnou také stáhnout do svého zařízení. Pokud se obrázek nezamlouvá, můžete nahrát nové SVG, změnit velikost či formát a zkusit to znovu.

Několik poznámek:

• Veškerá konverze probíhá pouze a jenom na vašem zařízení. Obrázky se nikam neposílají a nemáme k nim žádný přístup.
• Ke konvertování se používá novější syntaxe a funkce JavaScriptu. To v praxi znamená, že je potřeba JavaScript ve svém prohlížeči povolit (což je základní nastavení, takže pokud jste jej nevypínali, nemusíte nic dělat).
• Je také potřeba využít modernějšího prohlížeče typu Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Safari V praxi jakýkoliv mainstreamověji používaný a aktualizovaný prohlížeč bude pro konverzi fungovat. Konverze nebude fungovat v jakékoliv verzi prohlížeče Internet Explorer.
• Pokud si zvolíte soubor větší, než je šířka stránky, tak se vytvoří správně a můžete si jej stáhnout ve vámi zvolené velikosti. Na stránce ale onen soubor uvidíte menší, aby nepřekrýval celou obrazovku.

Co je formát SVG a jak se liší od JPG/PNG/WebP

SVG je zkratka pro „Scalable Vector Graphics“, tedy „Škálovatelná Vektorová Grafika“. V praxi jde o takovou grafiku, která je popsaná matematickými vzorci a geometrickými tvary. Škálovatelná je potom proto, že pokud nějaký tvar popíšete vzorcem, můžete ho pak neomezeně zvětšovat nebo zmenšovat.

Pokud například popíšeme geometricky kruh, není problém mu navolit libovolnou velikost, kdy si zachováme neomezené detaily.

To je rozdíl oproti rastrové grafice (například JPG, PNG, BMP, GIF), která popisuje každý jeden pixel obrázku. Pokud ale chceme obrázek například zvětšit, nepovede se nám to se zachováním všech informací. Pokud vezmeme kruh zakreslený rastrovou grafikou, a zvětšíme ho, bude takříkajíc zubatý a již to nebude kruh.

SVG se tak hodí pro popis obrázků, které je možné snadno popsat vektory. Může jít o geometrické tvary či linky. Jejich popis se zadává ve specifickém formátu, ale v praxi nejde o nic složitého. Klíčové je ovšem to, že formát SVG je popisován formou textu. Nejde o náhodnou změť bitů, kterou nelze v textovém editoru jen tak přečíst a rozumět jí (leda, že bychom si obrázek převedli na Base64), ale reálný text, který můžeme číst a upravovat dle libosti.

Naopak je SVG prakticky nepoužitelný pro klasickou fotografii, kterou nelze snadno popsat, a je výhodnější ji popsat na základě jednotlivých pixelů, ne matematicky. Pro fotografie se tedy využívá spíše formát JPG, který nabízí perfektní kombinaci komprese a kvality obrázku.

Formát jako PNG je pak ideální pro rastrové zobrazení jednodušší grafiky a celistvějších tvarů a stejně jako SVG podporuje průhlednost. V praxi tedy vlastně to podobné, jako SVG. Proto pokud chcete využít konvertoru ze SVG na nějaký formát, tak je PNG pravděpodobně přesně ten, který budete využívat nejčastěji se zachováním té nejlepší kvality.

Pokud tedy budete mít uložený soubor SVG, můžete si pomocí něho vytvořit libovolně velký soubor PNG bez ztráty kvality. Pozor ale, pokud vytvoříte soubor PNG a budete jej chtít zvětšit přes jiný editor, ke ztrátě kvality dojde. Je tedy vždy potřeba využít právě původního SVG souboru pro správné škálování a vygenerování obrázku v maximální velikosti.

Několik poznámek k SVG a převodu na jiný formát

Pokud si otevřete jakýkoliv SVG soubor třeba v poznámkovém bloku, můžete se přímo podívat, jak byl daný obrázek vytvořen a klidně si řadu věcí i okamžitě upravit. Často jde o různé barvy nebo původní rozměry obrázku, které jsou snadno čitelné a není problém je prostě přepsat na to, co chcete. Chce to samozřejmě znalost HTML/CSS, ale nejde o nic vyloženě komplikovaného. Využít můžete i různých online nástrojů.

Tento kód, co najdete v souboru nebo klidně i použitý na webu mezi tagy <svg>, můžete takový, jaký je, překopírovat do konvertoru a převést na obrázky jiného formátu. Pokud v souboru provedete nějaké změny typu přebarvení nějakého elementu, tak se i tato změna provede v převodu na nový formát.

SVG se pak velmi často využívají na webech jako různé ikonky. Jejich velikost se může libovolně měnit a na webu budou vždy vypadat tak velké a ostré, jak je potřeba. SVG lze také upravit přes CSS a cokoliv změnit, přebarvit atp.

Pokud si tedy odněkud stáhnete ikonku v SVG a budete jí potřebovat změnit barvu, budete muset přes CSS vložit přes inline styly novou/jinou barvu, a tento celý kód s novými styly si uložit do souboru, nebo vložit do konvertoru i se styly, které chcete. Obrázek se pak převede se styly, které jste si navolili.