Konvertor vektorových SVG souborů na PNG obrázky
Převedením vektorových souborů SVG na rastrové obrázky PNG se škálovatelná grafika založená na kódu transformuje na mřížku s pevnými pixely pro zajištění univerzální kompatibility aplikací.
Porovnání formátů a technické specifikace
| Specifikace | SVG | PNG |
|---|---|---|
| MIME typ | image/svg+xml | image/png |
| Typ | vector | raster |
| Komprese | lossless XML text (GZIP compressible via .svgz) | lossless (DEFLATE / LZ77 + Huffman) |
| Standardní specifikace | W3C SVG 2 Specification | W3C PNG 3rd Edition |
| Hlavička souboru (Magic bytes) | 3C 3F 78 6D 6C (<?xml) or 3C 73 76 67 (<svg) | 89 50 4E 47 0D 0A 1A 0A |
Přehled formátu a použití
Formát SVG (Scalable Vector Graphics) spoléhá na textový kód XML, který vykresluje geometrické cesty, čáry a tvary přímo na obrazovkách. Tento formát se skvěle hodí pro webová loga a ikony, protože grafika zůstává ostrá při libovolné velikosti obrazovky. Některý starší software, přísní poštovní klienti a specifické tiskové nástroje však nedokážou vektorový kód přečíst. Převedením souboru na soubor PNG (Portable Network Graphics) se tento problém vyřeší tak, že se vektorové tvary vykreslí do pevné mřížky barevných pixelů. Weboví vývojáři a grafici tuto konverzi často potřebují při přípravě ikon pro obchody s mobilními aplikacemi nebo starší platformy. Obchody s aplikacemi vyžadují pro ikony aplikací specifické rastrové rozměry. Změnou vektorového zdroje na pevnou mřížku obrázku tvůrci zajistí, že se grafika zobrazí správně na každém zařízení, aniž by se museli spoléhat na to, že cílová aplikace bude analyzovat kód XML.
Technické specifikace a přehled kodeků
Soubory SVG používají typ MIME image/svg+xml a skládají se z obyčejných textových značek XML uzavřených v závorkách značkovacího jazyka. Nepoužívají žádné magické bajty, protože se jedná o lidsky čitelné textové dokumenty. Soubory PNG používají typ MIME image/png a začínají přesným osmibajtovým magickým podpisem 89 50 4E 47 0D 0A 1A 0A. Po strukturální stránce se SVG spoléhá na matematické pokyny pro cesty a souřadnice. PNG spoléhá na rastrovou mřížku pixelů komprimovanou pomocí algoritmu DEFLATE, který kombinuje vyrovnávací paměť LZ77 a Huffmanovo kódování pro Bezztrátová komprese.
Kompatibilita s operačními systémy a prohlížeči
Soubory SVG se otevírají nativně ve všech moderních webových prohlížečích včetně Chrome, Safari, Firefox a Edge, ale chybí jim podpora ve starším desktopovém softwaru, jako jsou starší verze sady Microsoft Office. Obrázky PNG se těší univerzální kompatibilitě ve všech hlavních operačních systémech včetně Windows, macOS, Linux, iOS a Android. Každý moderní webový prohlížeč, prohlížeč obrázků a kancelářský balík otevírá soubory PNG bez nutnosti instalace dalších pluginů.
💡 Užitečné informace
Při převodu vektorů na rastry zvolte rozměr rozlišení, který odpovídá vašemu konečnému zobrazovacímu zařízení. Export v dvojnásobném rozměru vytvoří ostrý obrázek pro displeje Retina s vysokou hustotou pixelů.
Porovnání formátů a technické specifikace
Typický soubor vektoru loga má velikost přibližně 15 KB. Jeho převedením na PNG s vysokým rozlišením vznikne soubor o velikosti kolem 250 KB. Při rychlém připojení přes optické vlákno se tento soubor přenese za méně než jednu milisekundu. Přes mobilní připojení 5G to trvá asi dvě milisekundy a na standardní síti 4G je přenos dokončen přibližně za deset milisekund.
Často kladené otázky
Jak převést vektor SVG na obrázek PNG bez ztráty kvality?
Aby byl výstup ostrý, vykreslete vektorovou matematiku ve vysokém rozlišení pixelů před použitím bezztrátové komprese DEFLATE, která se používá v souborech PNG. Protože jsou oba formáty bezztrátové, konverze zachovává každý ostrý okraj a barvu přesně za předpokladu, že nezvětšujete konečnou mřížku pixelů nad její vygenerovanou velikost.
Jaký je rozdíl mezi vektorem SVG a obrázkem PNG?
SVG je vektorový formát vytvořený z textových instrukcí XML, které se nekonečně škálují bez pixelace. PNG je rastrový formát vytvořený z pevné mřížky jednotlivých barevných pixelů. Vektory zvládají nejlépe změnu velikosti a responzivní webdesign, zatímco rastry zvládají nejlépe složité fotografické textury a univerzální softwarovou kompatibilitu.