Vložte obsah SVG z editoru. Náhled se překreslí sám, tlačítko není potřeba.
Vektor jde zvětšit bez ztráty kvality — z ikony 24 px vyrobíte ostré PNG 1024 px.
Druhý rozměr se dopočítá z poměru stran zdroje.
PNG průhlednost umí. Po odškrtnutí se plocha vyplní vybranou barvou.
Jak převést SVG do PNG
- Nahrajte soubor SVG, nebo vložte jeho kód do textového pole.
- Nastavte velikost výsledku: buď násobkem původních rozměrů, nebo přesnou šířkou a výškou.
- Rozhodněte se pro průhledné pozadí, nebo si vyberte barvu.
- Náhled se překresluje průběžně. Hotové PNG si stáhněte nebo zkopírujte do schránky.
Rozdíl mezi SVG a PNG
SVG je vektor. Obrázek je v něm popsaný jako tvary a souřadnice, takže se dá zvětšit na jakoukoli velikost bez ztráty ostrosti. PNG je rastr, tedy mřížka pixelů s pevným rozlišením.
| Vlastnost | SVG | PNG |
|---|---|---|
| Typ | vektor | rastr (pixely) |
| Zvětšování | ostré v každé velikosti | nad původní rozlišení se rozmazává |
| Průhlednost | ano, i částečná | ano, alfa kanál |
| Fotografie | nevhodné | vhodné |
| Editace v kódu | ano, je to text | ne |
| Podpora | weby a moderní programy | všude |
Pro web a logo je lepší SVG, protože zůstane ostré na každé obrazovce. Do PNG převádějte, až když ho po vás někdo vyloženě chce.
Kdy se převod do PNG vyplatí
Nejčastěji tam, kde SVG neprojde. Sociální sítě vektor jako profilový obrázek nebo přílohu nepřijímají. Word a PowerPoint si s SVG poradí, ale u starších verzí a při sdílení mezi počítači bývá spolehlivější rastr.
Další případ jsou e-maily. Poštovní klienti SVG většinou blokují, takže se logo v hlavičce nezobrazí. A pak grafika pro tisk nebo zadání do výroby, kde protistrana chce hotové pixely v konkrétním rozlišení.
Jak vybrat rozlišení, aby výsledek nebyl rozmazaný
Tohle je hlavní věc, kterou u převodu ovlivníte. Vektor se dá vykreslit v jakékoli velikosti, ale jakmile je z něj PNG, rozlišení je dané a zvětšovat už nemá smysl.
Řekněme, že ikona má v SVG 64 pixelů a chcete ji na web s podporou displejů Retina. Zvolte násobek 2× nebo 3×, ať je ostrá i na telefonu. Pro tisk počítejte s tím, že obrazovka pracuje s 96 body na palec, takže tiskových 300 DPI odpovídá přibližně trojnásobku.
Zvětšení je omezené na 8 192 pixelů na stranu a 32 megapixelů celkem, protože nad tím plátno v prohlížeči naráží na limit. Když se přes limit dostanete, nástroj rozměry sám zmenší a napíše vám to.
Co se do PNG nepřenese
Při převodu se ztratí několik věcí a je lepší o nich vědět dopředu, než hledat chybu v souboru.
- Odkazy na externí soubory. Když SVG načítá bitmapu nebo font odjinud, prohlížeč to při vykreslování zablokuje a v PNG zůstane prázdné místo.
- Text vykreslený systémovým fontem. Nemá vložený obrys, takže se vykreslí jinak, než ho vidíte v editoru. Před převodem text v grafickém programu převeďte na křivky.
- Vložený HTML obsah. Prvek
foreignObjectse na plátno nevykreslí vůbec.
Nástroj vás na tyhle případy upozorní, když je ve zdroji najde.
Časté otázky
Jak z kódu SVG udělám obrázek PNG?
Zkopírujte kód a vložte ho do textového pole místo nahrávání souboru. Nástroj z něj rovnou vykreslí náhled. Funguje to i s kódem opsaným z HTML stránky, kterému chybí atribut xmlns, protože si ho nástroj sám doplní.
Ztratí se převodem do PNG kvalita?
Samotný převod je bezeztrátový, PNG kompresí nic nezahodí. Ztrácí se ale schopnost libovolného zvětšení. Vykreslení proběhne přesně v rozlišení, které nastavíte, takže při rozumně zvolené velikosti je výsledek ostrý.
Zachová se průhledné pozadí?
Ano, PNG průhlednost podporuje a nástroj ji zachovává. Když potřebujete pozadí naopak vyplnit, odškrtněte průhlednost a vyberte barvu. To se hodí pro tisk a pro místa, kde by průhledné pozadí zčernalo.
Jak otevřu soubor SVG ve Windows?
Nejjednodušší je přetáhnout ho do okna prohlížeče, ten SVG zobrazí bez instalace. Aplikace Fotky ve Windows vektor otevře taky, ale neumí s ním pracovat. Na úpravy je potřeba grafický editor, třeba Inkscape.
Jde převést PNG zpátky do SVG?
Ne tímto nástrojem a obecně to není totéž. Z pixelů se vektor musí odhadnout, čemuž se říká vektorizace, a u fotografie to nedává dobrý výsledek. U jednoduchého loga v jedné barvě to smysl má, ale je to jiná úloha než převod opačným směrem.