Logo

Grafika webu

Jak pracuji s grafikou na webu?

SVG

Formát SVG zvaný také Scalable Vector Graphics je značkovací jazyk, který tvoří příjemnou 2D grafiku v jazyce XML. Je otevřeným formátem pro široké užití na webu i jinde. HTML5 nabízí plnou podporu SVG. Škálovatelná grafika funguje trochu jinak, než klasické obrázky. Můžeme ji současně zapsat jako kód v jazyce XML a má neuvěřitelnou výhodu: při zvětšování neztrácí na kvalitě. Pro snadné použití existují grafické editory vektorové grafiky se kterými to jde hezky „od ruky“.

Jak jsem začal s vektorovou grafikou?

Potřeboval jsem před nějakou dobou vytvořit grafický materiál a tématické obrázky. Napadlo mě, že pro takový účel se může skvěle hodit SVG. Nainstaloval jsem si editor Inkscape, který se mi zdál prvních pár chvil těžkopádný, ale po hodince práce a osvojení malého množství základů se začíná dařit.

S vektorovou grafikou jsem začal 31. Října 2019 a z kreativního hlediska mě moc baví.

Obrázky na webu

Jakmile chci vytvořit obrázek, který chci umístit na web, začnu jej tvořit v programu Inkscape a ukládám do formátu SVG. Obrázek, který vytvořím, pro typické umístění na web nestačí. Upravím jej podle potřeby do jiného formátu, na barevnou paletu s počtem 256 barev pro uspoření dat a zvýšení rychlosti načítání, nebo jej dále upravuji. Úpravy provádím prozměnu v programu Gimp. Nečiním tak ve všech případech, u některých obrázků je potřeba udržet kvalitu a tak výsledné formáty pro můj web jsou:

SVG formát obrázku, který obsahuje velké množství prvků, je oproti klasickým obrázkům na webu náročnější na vykreslení a z toho důvodu formát raději převádím. Převažuje výsledný formát PNG, který dovede zachovat kvalitu, průhlednost a malou velikost.

Některé prohlížeče mají také problémy s podporou SVG.

Kdy který formát?

Fotky s velkým počtem barev, odstínů, přechodů a zkrátka fotoaparátem pořizované obrázky jsou vhodné pro jpeg s vysokou kompresí. Takové obrázky jsou totiž především velké.

Naopak obrázky tvořené počítačově, různé snímky obrazovky, GUI, obrázky s malým počtem barev, průhledností, odstínů a přechodů jsou vhodné do png s indexovaným režimem barev.

Ostatní malé obrázky a animace opět s malým počtem barevných přechodů a odstínů formátuji do gif.

Pro lepší pochopení logiky volení obrázků je možné nahlédnout do zápisku, kde porovnávám velikost.