Proč byste dnes měli používat SVG na vašem webu

Výhody použití škálovatelné vektorové grafiky

Scalable Vector Graphics, nebo SVG, hrají důležitou roli v designu webových stránek dnes. Pokud ve vaší tvorbě webových stránek momentálně nepoužíváte SVG, je zde několik důvodů, proč byste měli začít, stejně jako zálohování, které můžete použít pro starší prohlížeče, které tyto soubory nepodporují.

Rozlišení

Největší výhodou SVG je nezávislost řešení. Vzhledem k tomu, že soubory SVG jsou vektorovou grafikou místo rastrových obrazů založených na pixelech, lze je měnit bez ztráty kvality obrazu. To je obzvláště užitečné, když vytváříte citlivé webové stránky, které musí vypadat dobře a fungovat dobře v široké škále velikostí a zařízení obrazovky .

Soubory SVG mohou být zmenšeny nebo zmenšeny tak, aby vyhovovaly měnícím se potřebám rozměrů a rozvržení vašich citlivých webových stránek a nemusíte se obávat, že tyto grafiky budou mít ohroženou kvalitu jakéhokoli kroku.

Velikost souboru

Jednou z problémů s použitím rastrových obrázků (JPG, PNG, GIF) na citlivých webových stránkách je velikost souborů těchto obrázků. Vzhledem k tomu, že rastrové obrázky nemění měřítko tak, jak to dělají vektorové pixely, je třeba dodat obrazy založené na pixelech v největší velikosti, na které budou zobrazeny. Je to proto, že můžete vždy snížit obraz a udržet si jeho kvalitu, ale totéž platí pro větší obraz. Konečným výsledkem je, že často máte obrázky, které jsou mnohem větší, než jsou zobrazeny na obrazovce člověka, což znamená, že je zbytečně nucen stáhnout velmi velký soubor.

SVG řeší tuto výzvu. Vzhledem k tomu, že vektorová grafika je škálovatelná, můžete mít velmi malé velikosti souborů bez ohledu na to, jak velké mohou být tyto obrázky třeba zobrazovat. To nakonec bude mít pozitivní vliv na celkový výkon webu a rychlost stahování.

CSS Styling

Kód SVG lze také přidat přímo do HTML stránky. Toto je známé jako "inline SVG". Jednou z výhod použití inline SVG je skutečnost, že vzhledem k tomu, že grafika je skutečně kreslena prohlížečem na základě vašeho kódu, není třeba provádět žádost HTTP pro načtení souboru obrázku. Další výhodou je, že inline SVG může být stylizovaný s CSS.

Potřebujete změnit barvu ikony SVG? Namísto toho, že potřebujete otevřít tento obrázek v nějakém editovacím softwaru a znovu exportovat a nahrát soubor, můžete jednoduše změnit soubor SVG několika řádky CSS.

Můžete také použít jiné styly CSS na grafiku SVG, abyste je mohli změnit na základě stavu vznášení nebo pro určité konstrukční potřeby. Můžete dokonce animovat tyto grafiky, abyste do stránky přidali nějaký pohyb a interaktivitu.

Animace

Protože inline soubory SVG mohou být stylizovány pomocí CSS, můžete použít i animace CSS. Transformace a přechody CSS jsou dva snadné způsoby, jak přidat do souborů SVG nějaký život. Můžete získat bohaté zážitky podobné typu Flash na stránce, aniž byste podhodnocovali nevýhody, které dnes přinášejí používání Flash na webových stránkách.

Použití SVG

Stejně silný jako SVG, tato grafika nemůže nahradit každý jiný formát obrázku, který používáte na vašem webu. Fotografie, které vyžadují hlubokou hloubku barev, budou stále muset být JPG nebo snad PNG, ale jednoduché obrázky jako ikony jsou dokonale vhodné pro provedení jako SVG.

SVG může být také vhodný pro složitější ilustrace, jako jsou firemní loga nebo grafy a grafy. Všechny grafiky budou mít prospěch z toho, že budou škálovatelné, mohou být stylizovány pomocí CSS a další výhody uvedené v tomto článku.

Podpora pro starší prohlížeče

Současná podpora SVG je v moderních webových prohlížečích velmi dobrá. Jediné prohlížeče, které skutečně postrádají podporu pro tyto grafiky, jsou starší verze aplikace Internet Explorer (verze 8 a nižší) a několik starších verzí systému Android. Celkově velmi malé procento populace procházení používá tyto prohlížeče a toto číslo se nadále snižuje. To znamená, že SVG lze dnes na webech bezpečně používat.

Chcete-li zálohovat SVG, můžete použít nástroj Grumpicon ze skupiny Filament. Tento zdroj pořizuje vaše soubory obrázků SVG a vytvoří záložní PNG pro starší prohlížeče.

Upravil Jeremy Girard dne 27.1.17