SVG není obrázek v pravém slova smyslu, ale návod, jak ho nakreslit: křivky, barvy, texty a souřadnice zapsané v XML. PNG je naopak hotová mřížka pixelů. Převod SVG do PNG tedy znamená jednou vykreslit kresbu v určité velikosti a výsledek uložit. Skoro všechny potíže s tímto převodem se točí kolem dvou otázek: jak velké má PNG být a jestli má vykreslovací program k dispozici všechno, na co se SVG odkazuje.
Kdy se SVG převádí do PNG
- Formulář SVG nepřijme. E-shopy, inzertní servery, profilové fotky na sociálních sítích i řada redakčních systémů berou jen bitmapy. SVG může obsahovat skripty, a proto ho formuláře často blokují záměrně.
- E-mail a podpis. Gmail ani desktopový Outlook SVG spolehlivě nezobrazí. Logo v e-mailovém podpisu nebo newsletteru proto bývá v PNG.
- Přesná velikost v pixelech. Favikony, ikony aplikací a obrázky do obchodů s aplikacemi mají předepsané rozměry.
- Stejný vzhled všude. Vzhled SVG závisí na písmech a podpoře filtrů a CSS v prohlížeči. PNG vypadá na každém zařízení stejně.
Jak převodník SVG vykresluje
Soubor vykreslíme v rozlišení 150 DPI. Náš převodník stejně jako prohlížeče a norma SVG počítá s 96 jednotkami (px) na palec, takže z každého pixelu SVG se stane 1,5625 pixelu PNG. Rozměry v mm, cm nebo pt se přepočítají přes tentýž palec.
| Velikost dokumentu SVG | Výsledné PNG |
|---|---|
| ikona 24 × 24 px | asi 38 × 38 px |
| 640 × 480 px | 1000 × 750 px |
| stránka A4, 210 × 297 mm | 1240 × 1754 px |
| plakát A0, 841 × 1189 mm | 4967 × 7022 px |
Exportuje se plocha stránky daná atributy width, height a viewBox, ne obrys kresby. Co leží mimo stránku, bude oříznuto, a prázdné okraje zůstanou. Pokud soubor má jen viewBox, jeho čísla se berou jako pixely. PNG je RGBA s 8 bity na kanál a v hlavičce nese 150 DPI, takže po vložení do dokumentu pro tisk má správnou fyzickou velikost.
Průhlednost zůstává: kde SVG nic nekreslí, je PNG průhledné. Bílé pozadí vznikne, jen když ho SVG samo obsahuje (obdélník přes celou plochu) nebo bylo v Inkscapu uloženo s neprůhlednou barvou stránky. Filtry jako rozostření a stíny se rastrují ve stejných 150 DPI.
Písma, propojené obrázky a jiné vnější odkazy
Převod běží na našem serveru bez přístupu k internetu a server dostane jen ten jeden soubor, který nahrajete.
- Písma. Text v SVG nese jen název písma. Když písmo na serveru není, použije se náhradní a text změní šířku, vyleze z rámečku nebo se překrývá. K dispozici jsou DejaVu, Liberation (metricky shodná s Arial, Times New Roman a Courier New), Carlito a Caladea (náhrada Calibri a Cambria), klony písem Helvetica a Times od URW a rodina Noto včetně čínštiny, japonštiny a korejštiny. Firemní písma typu Montserrat nebo Roboto a webová písma přes
@font-facechybí. Spolehlivé řešení je převést text na křivky ještě před exportem: v Inkscapu Cesta → Objekt na cestu, v Illustratoru Text → Vytvořit obrysy, ve Figmě volba exportu Outline text. - Propojené obrázky. Bitmapa odkazovaná jako
href="foto.jpg"nebo cestou na vašem disku se s SVG nenahraje a ve výsledku chybí. Obrázky z adreshttps://se také nestahují. Fungují obrázky vložené přímo jako base64 (data:). V Inkscapu je do souboru vložíte rozšířením Embed Images v nabídce Rozšíření → Obrázky. - HTML uvnitř SVG. Nástroje na diagramy často ukládají popisky do
<foreignObject>jako HTML. To náš převodník nevykreslí, zobrazí se jen náhradní prostý text, někdy s hláškou „Viewer does not support full SVG 1.1“. Před exportem diagramu vypněte u popisků formátovaný (HTML) text. - Animace a skripty se ignorují, PNG zachytí výchozí stav.
Časté problémy při převodu SVG do PNG
PNG je moc malé nebo rozmazané
Výstup má vždy 1,5625násobek velikosti SVG a jinou velikost tu zvolit nejde. Potřebujete-li konkrétní šířku, upravte dokument před nahráním: pro PNG široké 512 px nastavte SVG šířku 327,68 px (viewBox nechte, měňte jen width a height). Na sady ikon v mnoha velikostech se víc hodí dialog Export v Inkscapu nebo příkaz inkscape --export-width=512 ikona.svg.
Místo průhledného pozadí je černé
PNG průhledné je, jen některé prohlížeče obrázků kreslí průhlednost černě. Ověříte to otevřením v internetovém prohlížeči. Chcete-li plné bílé pozadí, převeďte PNG dál do JPG, kde se průhlednost vyplní bílou.
Část kresby chybí
Ty objekty leží mimo stránku. V Inkscapu vyberte celou kresbu (Ctrl+A) a zkratkou Shift+Ctrl+R přizpůsobte stránku výběru.
SVG a PNG ve zkratce
SVG je norma konsorcia W3C: verze 1.0 vyšla jako doporučení v září 2001, verze 1.1 v roce 2003 a její druhé vydání ze srpna 2011 je dodnes verze, kterou programy podporují nejúplněji (specifikace). PNG vzniklo v polovině 90. let jako náhrada formátu GIF bez patentových omezení, doporučením W3C se stalo v říjnu 1996 a mezinárodní normou jako ISO/IEC 15948:2004. Třetí vydání z června 2025 oficiálně přidává animované PNG a HDR (popis v Library of Congress).
| SVG | PNG | |
|---|---|---|
| Obsah | vektorové tvary a text v XML | pixely, bezeztrátová komprese |
| Zvětšení | ostré v libovolné velikosti | pevné rozlišení |
| Průhlednost | ano | ano, plný alfa kanál |
| Text | upravitelný, závisí na písmech | součást obrázku |
Jak převést SVG do PNG jinak
Máte-li nainstalovaný Inkscape, export přímo v něm dává plnou kontrolu nad velikostí i plochou. SVG zobrazí každý prohlížeč, snímek obrazovky ale má jen rozlišení monitoru. Náš převodník se hodí, když po ruce žádný program nemáte, pracujete na telefonu nebo potřebujete převést až 10 souborů najednou a stáhnout je jako jeden ZIP.