Možnosti využití SVG ve webovém designu

Tomáš VČELÁK

Bachelor's thesis

Possibilities of using SVG in web design

Abstract:

Cílem bakalářské práce je představit možnosti využití jazyka SVG (Scalable Vector Graphics) ve webovém designu. Jazykem SVG vzniká škálovatelná vektorová grafika, která vzhledem k problematické podpoře ve starších verzích prohlížeče MS Explorer nenašla dlouho na webu uplatnění. V současné době je již možné plně využít výhod SVG při tvorbě front-end webu, jako je např. nezávislost na rozlišení displeje (mj. v souvislosti s nástupem Retina displejů), možnost libovolné změny velikosti bez ztráty vizuální kvality grafiky, strojová čitelnost obsahu a především minimální datová náročnost, díky nimž byl jazyk SVG také zařazen do rodiny HTML5 technologií. Autor se ve své práci zaměří na způsoby získání SVG k využití pro webový design včetně generování PNG alternativ a na varianty implementace SVG do kódu webu. Základem práce bude demonstrace využití SVG pro práci s webovým textem (výplně, přechody, filtry, animované efekty), s obrázky (výřezy a filtry), pro animace zatržítek a ikon, animované interakce s formulářovými input poli a tlačítky, interakční přechody, tvorbu bannerů a map s využitím animací cest apod. Vše bude představeno na vlastní webové prezentaci s mnoha originálními praktickými příklady se zdůrazněním výhod použitých technik v porovnání s tradiční webovou grafikou bitmapovou.

Abstract:

The goal of the thesis is to introduce possibilities of SVG (Scalable Vector Gra- phics) in web design. SVG is a scalable vector graphic format which didn't find application on the web for a long time due to poor support in older versions of Microsoft Explorer. Nowadays, it is finally possible to fully benefit advantages of SVG in front-end web design, e.g. independence on a screen resolution (espe- cially with wide-spread Retina displays), resizing without visual quality loss, machine readability of embedded text content, and most importantly small file size. These features allowed SVG to be recognized as an HTML5 family member. Author of the thesis will focus on methods of bringing SVG to web design, including methods of generating PNG alternatives and variants of SVG inclusion into web page code. The foundation of the thesis will be a web page presentation, which will demonstrate use of SVG on text (fillings, gradients, filters, and animations), images (cropping and filters), animations of checkbo- xes and icons, animated interactions with form inputs and buttons, animated transitions, banners and maps with animated paths, etc. The presentation will emphasize advantages of used techniques in comparison with traditional bitmap graphics.

Keywords

SVG, HTML5, webový design, front-end webu, vektorová grafika

Language used: Czech

Date on which the thesis was submitted / produced: 18. 4. 2019

Thesis defence

• Supervisor: PaedDr. Petr Pexa, Ph.D.

UNIVERSITY OF SOUTH BOHEMIA IN ČESKÉ BUDĚJOVICE

Faculty of Education

Bachelor programme / field:
Specialization in pedagogy / information technology and e-learning