Stiliziranje i animiranje SVG elemenata upotrebom CSS-a

undergraduate thesis

• Author: Katarina Rančić
• Mentor: Tajana Koren Ivančević (mentor)
• Committee member: Nikolina Stanić Loknar (član povjerenstva)
• Committee member: Tajana Koren Ivančević (član povjerenstva)
• Committee member: Tibor Skala (član povjerenstva)
• Granter: University of Zagreb; Faculty of Graphic Arts; Zagreb
• Defense date and country: 2016-7-5, Croatia
• Scientific / art field, discipline and subdiscipline: TECHNICAL SCIENCES; Graphic Technology

Abstract

Rad je pisan na temu stiliziranja, manipuliranja i animiranja SVG elemenata upotrebom CSS-a.

SVG (Scalable Vector Graphic) je jezik za opisivanje dvodimenzionalne vektorske grafike na webu. SVG se temelji na XML tehnologiji što predstavlja niz mogućnosti kombiniranja s drugim jezicima unutar W3C-a koji se također temelje na XML-u. Jedan od takvih jezika je i CSS. CSS (Cascading Style Sheets) omogućava definiranje stila te manipuliranje elementima unutar web stranice.

U prvom dijelu rada govori se o SVG tehnologiji te stvaranju oblika u SVG-u. Govorit se i o osnovama CSS tehnologije te su objašnjene mogućnosti stiliziranja, manipuliranja i animiranja oblika kroz CSS. Napravljena je usporedba SVG-a i CSS-a, te opis mogućnosti njihovog kombiniranja. Govori se o mogućnostima čitljivosti SVG-a i CSS-a od strane popularnih web preglednika.

U drugom dijelu rada prikazan je proces izrade web infografike upotrebom SVG-a i CSS-a. Cilj istraživanja je otkrivanje mogućnosti stiliziranja i animiranja SVG-a upotrebom CSS-a. Također će biti prikazano kako različiti preglednici čitaju isti kod.

Abstract (english)

The topic of this paper is the use of CSS for styling, manipulating and animating SVG elements.

SVG (Scalable Vector Graphics) is a language for describing two dimensional vector graphics on the web. SVG is based on XML technology, which makes it possible to combine SVG with other W3C languages based on XML. One of those languages is CSS. CSS (Cascading Style Sheets) enables style definition and manipulation of elements inside a web page.

In the first part of the paper, SVG technology and the construction of objects in SVG is discussed. The basics of CSS are presented and the posibilities of styling, animating and manipulating SVG elements using CSS are explained. SVG and CSS are compared, and the posibilities for combining them is described. Support for CSS and SVG by popular web browsers is mentioned.

In the second part of the paper the process of constructing web infographic by CSS and SVG is described. The aim of research is to explore the posibilities of styling and animating SVG with the use of CSS. It is presented how different web browsers display the same code.

• Keywords: SVG; CSS; stiliziranje; animiranje; web preglednici
• Keywords (english): SVG; CSS; styling; animation; web browsers
• Language: croatian
• URN:NBN: urn:nbn:hr:216:094487
• Study programme: Title: Printing technology, course Technical - technological; Course: Graphic technology; Study programme type: university; Study level: undergraduate; Academic / professional title: sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka grafičke tehnologije (sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka grafičke tehnologije)
• Type of resource: Text
• File origin: Born digital
• Access conditions: Closed access
• Created on: 2024-04-16 17:30:49