Grafika na webu – SVG, Ink­scape, Gimp

Kategorie: Grafika

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čínal s vekto­rovou 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í.

Můj způsob použití 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í. Ú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 třeba udržet kvalitu a tak výsledné formáty pro můj web jsou také:

  • GIF
  • JPG
  • PNG

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.

Inkscape

Skvělý opensource editor škálovatelné vektorové grafiky, který nabízí jak základní funkce pro dvojrozměrné kreslení, tak pokročilé moduly a knihovny pro velmi kvalitní a náročnou práci. Nakresleným tvarům lze velmi efektivně přiřazovat formy, efekty, textury a mnohem víc.

Zkuste si jej sami a uvidíte, jak je to jednoduché. Obrázky na této stránce jsem vytvořil po několikadenních zkušenostech s programem, logo bylo jedno z prvních.

Gimp

Elegantní opensource grafický editor, který patří mezi mé nejoblíbenější. Je výkonný a dovede opravdu velké věci. V tomto editoru upravuji obrázky do finálního stavu a popřípadě odstraňuji nedostatky. Velice ho doporučuji.

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.