SVG
Vektorový formát pro web – ideální pro loga, ikony, ilustrace
Co je SVG
SVG (Scalable Vector Graphics) je vektorový formát pro web, který obrázek popisuje textovým kódem v XML místo mřížkou pixelů. Prohlížeč si ho pokaždé vykreslí znovu podle toho, jak velký prostor mu stránka dá. Patří tedy k vektorové grafice, jen v podobě, které rozumí každý prohlížeč bez doinstalování čehokoliv.
Proč ho na webu chci
Dva důvody. Ostrost: logo v hlavičce vypadá stejně dobře na starém notebooku i na telefonu s hustým displejem a nemusíte pro každé zařízení připravovat jinou variantu. A váha: ikona v SVG má často jednotky kilobajtů, což je zlomek toho, co váží stejná ikona v PNG. Rychlost načítání se počítá do Core Web Vitals, takže se tenhle zdánlivě grafický detail propíše až do vyhledávání.
Bonus navrch: protože je SVG obyčejný kód, dá se do něj sáhnout přes CSS. Přebarvení ikony při najetí myší je jeden řádek, ne druhý obrázek. Animovat se dá taky, jen bych to nepřeháněl.
Kde SVG nepomůže
Na fotografie zapomeňte. Fotka je milion barevných bodů bez geometrie, kterou by šlo popsat křivkami; ve vektoru by soubor nabobtnal do nesmyslné velikosti. Fotky patří do JPG nebo WebP a nic na tom nezměníte. Druhá věc je bezpečnost. SVG dokáže nést i spustitelný skript, takže soubor z pochybného zdroje nebo nahraný cizím uživatelem přes formulář na web nepatří, dokud ho někdo neprojde a nevyčistí. U podkladů od vlastního grafika to neřeším.
Když přebírám web po někom jiném, logo v hlavičce bývá PNG vyexportované kdysi v jediné velikosti a na hustém displeji je rozmazané. První, co si vyžádám, je export loga do SVG. Zabere to pár minut a spraví to vzhled na všech zařízeních naráz. Do reklamních systémů ale SVG neposílám, Google Ads ani Meta ho nepřijmou; tam jdou vždycky rastrové exporty v požadovaném rozměru.