SVG je jedním z nejdůležitějších obrazových formátů na moderním webu, i když ho mnoho lidí nikdy záměrně nevybere. Pokud jste někdy stáhli logo z brandové sady, přidali ikonu na web nebo použili designový systém pro rozhraní aplikace, je velká šance, že jste pracovali s SVG. Důvod je jednoduchý: SVG je vybudováno pro ostrou, škálovatelnou grafiku, která zůstává ostrá v libovolné velikosti.
Pokud jsou JPG a PNG povědomé, protože jsou to "normální obrázky", SVG se often cítí jinak, protože se jinak chová. Není to fotografický formát. Je to formát navržený pro grafiku, ikony, diagramy a loga. Může se škálovat od malého po velké bez rozmazání, díky čemuž je ideální pro moderní vysokorozlišovací obrazovky a responzivní design.
Tento článek vysvětluje, co je SVG, jak funguje, proč je populární pro webový a UI design a kdy byste měli převést SVG na PNG.
Co znamená SVG?
SVG je zkratka pro Scalable Vector Graphics (Škálovatelná vektorová grafika). Klíčové slovo je škálovatelná. Obrázky SVG jsou vektorové, což znamená, že jsou popsány pomocí tvarů a cest, nikoli uloženy jako mřížka pixelů.
Tento rozdíl mění chování obrázku. Pixelové obrázky jako JPG a PNG mají pevné rozlišení. Příliš velkým zvětšením se stanou rozmazanými nebo hrubými. Vektorové obrázky jako SVG lze opakovaně zvětšovat bez ztráty ostrosti, protože jsou matematicky překresleny pokaždé, když jsou zobrazeny.
Co je soubor SVG?
Soubor SVG je vektorový obrazový formát, který popisuje grafiku pomocí XML značkování. Místo ukládání každého pixelu ukládá pokyny, jak obrázek nakreslit. Tyto pokyny mohou definovat tvary, linie, křivky, výplně, tahy, přechody a text.
Protože SVG je v podstatě strukturovaný text popisující grafiku, je often lehký pro ikony a loga. Lze jej také upravovat v designovém softwaru a v mnoha případech přímo v kódu.
To činí SVG jedinečně užitečným pro webový a produktový design. Může se dokonale škálovat, ostře vykreslovat na retina displejích a hladce integrovat do webových stránek a rozhraní.
Proč se SVG tak často používá na webových stránkách?
SVG se stalo webovým standardem, protože řeší běžný designový problém: chcete grafiku, která vypadá ostře všude a přizpůsobuje se různým velikostem obrazovek.
Loga, ikony, tlačítka, prvky uživatelského rozhraní a jednoduché ilustrace dobře fungují jako SVG, protože zůstávají ostré na mobilních i desktopových obrazovkách. Také se often rychle načítají, protože vektorové popisy mohou být menší než velké pixelové obrázky.
SVG také podporuje funkce, které jsou užitečné pro webová rozhraní. Lze jej stylizovat, přizpůsobit barvy a animovat způsoby, které jsou obtížnější u standardních obrazových souborů.
Z praktického hlediska je SVG spolehlivým řešením, když chcete, aby táž grafika vypadala dokonale v různých velikostech bez exportu více verzí obrázků.
SVG vs PNG
PNG je pixelový formát, který podporuje průhlednost a bezeztrátovou kompresi. Je široce používán pro snímky obrazovky, UI grafiku a obrázky vyžadující ostré hrany a průhledná pozadí.
SVG není pixelový. Je vektorový. To znamená, že SVG neukládá obrázek s pevným rozlišením, zatímco PNG ano.
Pokud je vaše grafika logo, ikona nebo ilustrace, SVG often vyhrává, protože se donekonečna škáluje bez ztráty přehlednosti. Verze PNG téže grafiky musí být exportována v konkrétním rozlišení. Pokud později potřebujete větší verzi, buď ji zvětšíte a ztratíte ostrost, nebo ji znovu exportujete z původního designového souboru.
PNG je stále lepší v určitých scénářích. Pokud vaše "grafika" zahrnuje komplexní textury nebo efekty, které se dobře nepřevedou do vektorových cest, PNG může být bezpečnější. PNG je také užitečné, když potřebujete konzistentní chování napříč prostředími, která SVG nepodporují, jako jsou některé dokumentové pracovní postupy nebo starší aplikace.
Mnoho lidí používá převod SVG na PNG, když potřebují pevný obrazový soubor pro platformy, které nahrávání SVG nepřijímají.
SVG vs JPG
JPG se primárně používá pro fotografie. Používá ztrátovou kompresi a je efektivní pro složité obrázky s mnoha barvami a přechody.
SVG není navrženo pro fotografie. Teoreticky můžete vložit fotografické obrázky do kontejneru SVG, ale to maří účel a obvykle neposkytuje smysluplné výhody.
Praktické srovnání se týká případů použití. JPG je pro fotografie. SVG je pro škálovatelnou grafiku.
Pokud se pokusíte uložit ikonu jako JPG, often bude vypadat hůře a bude rozmazaná kolem hran, protože komprese JPG není ideální pro ostré linie a text. Proto jsou loga a ikony zřídka doručovány jako JPG.
SVG a velikost souboru: Proč může být malé nebo velké?
Soubory SVG mohou být velmi malé, když obsahují jednoduché tvary, ikony nebo textové cesty. To je jeden z důvodů, proč jsou vynikající pro UI ikony.
Soubory SVG však mohou být velké, pokud obsahují komplexní ilustrace s tisíci vektorových bodů. V takových případech se soubor stává těžkým, protože "pokyny" pro kreslení grafiky jsou rozsáhlé.
Toto je důležitá praktická úvaha. SVG není automaticky menší než PNG. Závisí to na složitosti grafiky. Pro jednoduché ikony je SVG often extrémně efektivní. Pro velmi složité vektorové ilustrace může být PNG menší a snazší na zpracování.
Kompatibilita SVG a praktická omezení
Moderní prohlížeče SVG dobře podporují, proto je na webových stránkách tak běžné. Existují však prostředí, kde SVG je méně pohodlné.
Některé platformy neumožňují nahrávání SVG z bezpečnostních důvodů. Je tomu tak proto, že SVG je textový formát, který může obsahovat skriptovatelné prvky, a některé systémy jej omezují, aby zabránily zneužití. V normálních legitimních pracovních postupech obvykle používáte SVG z důvěryhodných zdrojů a zachováváte je čistě grafické.
Dalším omezením je, že některé starší softwarové nástroje a dokumentové systémy SVG nativně nepodporují. Pokud potřebujete vložit logo do programu, který přijímá pouze PNG nebo JPG, je nutná konverze.
V těchto případech je SVG na PNG often nejbezpečnějším přístupem, protože PNG zachovává ostré hrany a podporuje průhlednost.
Kdy byste měli použít SVG?
SVG je ideální, když je váš obrázek logo, ikona, diagram nebo ilustrace, která musí zůstat ostrá v libovolné velikosti.
Je také ideální, když chcete jeden prvek, který funguje napříč více velikostmi obrazovky bez exportu více rozlišení.
Pokud je vaším cílem ostré webové rozhraní nebo škálovatelná brandová grafika, SVG je often nejlepším formátem.
Kdy byste měli převést SVG na PNG?
Převod na PNG dává smysl, když potřebujete kompatibilitu s platformou, která SVG nepodporuje. Dává to smysl také tehdy, když potřebujete pevný obrázek pro e-mailové podpisy, určité exporty dokumentů nebo systémy pro nahrávání, které vyžadují PNG.
SVG na PNG také pomáhá, když potřebujete rastrový obrázek pro použití v kontextech, které vektorovou grafiku nevykreslují správně.
Kvalita SVG a realita konverze
Pomáhá nastavit správná očekávání. Převod SVG na PNG znamená přeměnu škálovatelného vektoru na pixelový obrázek. Kvalita výstupu závisí na zvoleném rozlišení. Pokud exportujete v nízkém rozlišení a poté jej zvětšíte, může vypadat rozmazaně, protože se stává standardním rastrovým obrázkem.
Dobrým pracovním postupem je převod v potřebné velikosti nebo mírně větší, pokud očekáváte použití obrázku v různých kontextech.
SVG je "nezávislé na rozlišení", ale jakmile je převedeno na PNG, stává se na rozlišení závislým.
Závěr: SVG je správný formát pro škálovatelnou grafiku
SVG existuje k řešení základního problému: vytvoření grafiky, která zůstane ostrá na každé velikosti obrazovky. Je jedním z nejužitečnějších formátů pro moderní webový design, protože podporuje škálovatelnost, přehlednost a flexibilitu.
PNG zůstává nezbytný pro snímky obrazovky, rastrovou grafiku a průhledné obrázky, kde vektorový přístup není vhodný. JPG zůstává nezbytný pro fotografie. Nejlepším přístupem je použití každého formátu pro to, co dělá nejlépe.
Když potřebujete kompatibilitu, SVG na PNG je often nejjednodušším řešením. Když potřebujete dokonalou škálovatelnost, SVG je obvykle lepším výchozím bodem.
Často kladené otázky
K čemu se soubor SVG používá?
SVG se používá pro škálovatelnou grafiku, jako jsou loga, ikony, diagramy a ilustrace, které musí zůstat ostré v libovolné velikosti, zejména na webových stránkách a v aplikacích.
Je SVG lepší než PNG?
SVG může být lepší než PNG pro loga a ikony, protože se škáluje bez ztráty kvality. PNG je lepší pro snímky obrazovky a pixelové obrázky, kde vektorové cesty nejsou praktické.
Lze SVG použít pro fotografie?
SVG není navrženo pro fotografie. Fotografie jsou typicky ukládány jako JPG nebo PNG. SVG je nejlepší pro vektorovou grafiku.
Proč některé webové stránky neumožňují nahrávání SVG?
Některé platformy omezují nahrávání SVG, protože SVG je textový formát a může obsahovat pokročilé prvky. Mnoho systémů z bezpečnostních a konzistentnostních důvodů povoluje pouze rastrové formáty jako PNG a JPG.
Jak převedu SVG na PNG?
Můžete převést SVG na PNG pomocí online konvertoru, když potřebujete pevný pixelový obrázek pro platformy, které SVG nepodporují.
Sníží převod SVG na PNG kvalitu?
SVG samo o sobě při změně velikosti neztrácí kvalitu, ale export PNG má pevné rozlišení. Pokud exportujete v nízkém rozlišení, může při zvětšení vypadat rozmazaně.