Škálovatelná vektorová grafika nebo SVG dnes hraje důležitou roli v designu webových stránek. Pokud aktuálně nepoužíváte SVG při práci s webovým designem, zde je několik důvodů, proč byste s tím měli začít, a také záložní možnosti, které můžete použít pro starší prohlížeče, které tyto soubory nepodporují.
Řešení
Největší výhodou SVG je nezávislost na rozlišení. Protože soubory SVG jsou vektorová grafika (na rozdíl od rastrových obrázků založených na pixelech), můžete změnit jejich velikost bez ztráty kvality obrazu. To je obzvláště užitečné při vytváření responzivních webů, které musí dobře vypadat a dobře fungovat v celé řadě velikostí obrazovek a zařízení. Soubory SVG můžete škálovat nahoru nebo dolů tak, aby vyhovovaly měnícím se potřebám velikosti a rozložení vašich responzivních webových stránek, aniž byste jakkoli ohrozili jejich kvalitu. SVG mají obecně hladší a ostřejší vzhled než obrázky jiných formátů, bez ohledu na velikost.
Velikost souboru
Jednou z výzev používání rastrových obrázků (např. JPG, PNG, GIF) na responzivních webech je velikost souboru. Protože rastrové obrázky nemají měřítko tak, jak to dělají vektorové obrázky, musíte své pixelové obrázky doručit v největší velikosti, v jaké budou zobrazeny. Důvodem je, že můžete vždy zmenšit obrázek a zachovat jeho kvalitu, ale totéž neplatí pro zvětšení obrázků. Výsledkem jsou obrázky, které jsou mnohem větší než velikost, ve které jsou prohlíženy, což nutí prohlížeče stahovat velké soubory. Naproti tomu vektorová grafika je škálovatelná, takže můžete použít velmi malé velikosti souborů bez ohledu na to, jak velké tyto obrázky může být nutné zobrazit. To v konečném důsledku optimalizuje celkový výkon webu a rychlost stahování.
Styling CSS
SVG můžete snadno přidat přímo do HTML stránky. Toto je známé jako inline SVG. Jednou z výhod použití vloženého SVG je to, že protože grafiku ve skutečnosti kreslí prohlížeč, není potřeba požadavek HTTP na načtení souboru obrázku. Další výhoda: Můžete stylovat vložené SVG pomocí CSS. Potřebujete změnit barvu ikony SVG? Místo úpravy tohoto obrázku v softwaru pro úpravu grafiky a následného exportu a odeslání souboru můžete soubor SVG změnit jednoduše pomocí několika řádků CSS. CSS můžete použít ke změně SVG pro stavy vznášení a další potřeby návrhu.
Animace
Protože můžete stylizovat vložené soubory SVG pomocí CSS, můžete na ně použít také CSS animace. Transformace a přechody CSS jsou dva snadné způsoby, jak SVG přidat trochu života. Na stránce můžete získat bohaté zážitky podobné Flash, aniž byste používali Flash-který iPad již nepodporuje. Společnost Adobe ve skutečnosti Flash do konce roku 2020 vyřazuje.
Využití SVG
Jakkoli jsou SVG výkonné, nemohou nahradit každý jiný formát obrázku. Fotografie, které vyžadují bohatou barevnou hloubku, by stále měly být ve formátu JPG nebo PNG, ale jednoduché obrázky, jako jsou ikony, se dokonale hodí k provedení jako SVG. SVG je také vhodné pro některé složité ilustrace, jako jsou grafy, grafy a firemní loga. Všechny tyto grafiky těží z toho, že jsou škálovatelné a lze je stylizovat pomocí CSS.
Podpora pro starší prohlížeče
Současná podpora SVG je v moderních webových prohlížečích velmi dobrá. Jedinými prohlížeči, kterým tato grafika chybí, jsou staré verze aplikace Internet Explorer (verze 8 a starší) a několik starších verzí systému Android. Celkově vzato, velmi malé procento procházející populace stále používá tyto prohlížeče a toto číslo se stále zmenšuje. To znamená, že SVG můžete na svém webu používat bez obav. Pokud chcete poskytnout záložní řešení pro SVG, použijte nástroj, jako je Grumpicon ze skupiny vláken. Tento zdroj vytváří soubory PNG z vašich obrazových souborů SVG.