Scalable Vector Graphics, neboli SVG, dnes hraje důležitou roli v designu webových stránek. Pokud v současné době nepoužíváte SVG ve své práci na tvorbě webu, zde je několik důvodů, proč byste s tím měli začít, a také záložní verze, které můžete použít pro starší prohlížeče, které tyto soubory nepodporují.
Rozliš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 zvláště užitečné, když vytváříte responzivní webové stránky, které musí vypadat dobře a fungovat na široké škále velikostí obrazovek a zařízení. Soubory SVG můžete zvětšit nebo zmenšit tak, aby vyhovovaly měnící se velikosti a rozvržení vašeho responzivního webu, aniž byste jakkoli ohrozili jejich kvalitu.
Obecně platí, že SVG mají hladší a ostřejší vzhled než obrázky jiných formátů, bez ohledu na velikost.
Velikost souboru
Jedním problémem při používání rastrových obrázků (např. JPG, PNG, GIF) na responzivních webech je velikost souboru. Vzhledem k tomu, že rastrové obrázky nemají měřítko tak jako vektorové obrázky, musíte obrázky založené na pixelech doručit v největší velikosti, ve které budou zobrazeny. Je to proto, že vždy můžete obrázek zmenšit a zachovat jeho kvalitu, ale totéž neplatí pro zvětšování 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é bude potřeba tyto obrázky zobrazit. To nakonec 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í inline SVG je to, že vzhledem k tomu, že grafiku ve skutečnosti kreslí prohlížeč, není potřeba požadavek HTTP k načtení souboru obrázku.
Další výhoda: Můžete stylovat inline SVG pomocí CSS. Potřebujete změnit barvu ikony SVG? Namísto úpravy tohoto obrázku v softwaru pro úpravu grafiky a následného exportu a opětovného nahrání souboru můžete změnit soubor SVG jednoduše pomocí několika řádků CSS. Můžete také použít CSS ke změně SVG pro stavy přechodu a další potřeby návrhu.
Sečteno podtrženo
Protože můžete stylovat vložené soubory SVG pomocí CSS, můžete na ně použít animace CSS. CSS transformace a přechody jsou dva snadné způsoby, jak přidat do SVG trochu života. Bohaté zážitky podobné Flash můžete na stránce získat i bez použití Flash – který iPad již nepodporuje. Společnost Adobe ve skutečnosti do konce roku 2020 postupně vyřazuje Flash.
Použití SVG
Jakkoliv jsou SVG výkonné, nemohou nahradit všechny ostatní formáty obrázků. Fotografie, které stále vyžadují bohatou barevnou hloubku, by měly být ve formátu-j.webp
SVG je také vhodné pro některé složité ilustrace, jako jsou grafy, tabulky a loga společností. Všechny tyto grafiky těží z toho, že jsou škálovatelné a lze je stylovat pomocí CSS.
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é postrádají podporu pro tuto grafiku, jsou staré verze Internet Exploreru (který Microsoft již nepodporuje) a několik starých verzí Androidu. Celkově vzato velmi malé procento populace procházení stále používá tyto prohlížeče a toto číslo se stále snižuje. To znamená, že na svém webu můžete bez obav používat SVG.
Pokud chcete poskytnout záložní řešení pro SVG, použijte nástroj, jako je Grumpicon od Filament Group. Tento zdroj vytváří-p.webp
