SVG Webová počítačová grafika Tomáš Zubčák Fakulta informatiky Masarykova Univerzita 24.10.2011 Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Obsah O Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika Q Webová počítačová grafika Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Obsah O Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika Q Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG Q SVG a čo to je? 01 Akn tn fiinmiip'? Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Obsah O Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika Q Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG O SVG • Čo to je? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Outline O Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika Q Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG 0 SVG • Čotoje? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Úvod -- - - Webová počítačová grafika Počítačová grafika SVG Rastrová grafika Zhrnutie Vektorová gratika Počítačová grafika • odbor informatiky a tvorba grafických objektov • úprava zobrazitelných a priestorových informácií nasnímaných z reálneho sveta Tomáš Zubčák SVG Uvod Webová počítačová grafika SVG Zhrnutie Dva základné prístupy Počítačová gratika Rastrová gratika Vektorová gratika • bitmapová/rastrová grafika • vektorová grafika Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Outline O Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika Q Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG 0 SVG • Čo to je? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie • pixel - jeden bod - najmenšia jednotka digitálnej rastrovej grafiky • obrázok je popísaný pomocou jednotlivých bodov usporiadaných do pravouhlej mriežky o každý pixel má presnú polohu a farbu • DPI/PPI (dots per inch/pixels per inch) je údaj, ktorý určuje, koľko bodov sa zmestí do dĺžky jedného palca Tomáš Zubčák SVG Úvod Webová počítačová gratika SVG Zhrnutie Výhody: • jednoduché vytvorenie obrázku (napr. skener, fotoaparát,...) Nevýhody: • nároky na zdroje • problémová je zmena veľkosti obrázku - vzniká tZV. raster Tomáš Zubčák SVG ... . „,A . . ... Počítačová grafika Webová počítačová grafika _ ± , ... SVG Rastrová grafika Vektorová grafika Zhrnutie Outline Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika Webová počítačová gn • Grafika na webe • HTML5 • Canvas vs. SVG SVG • Čo to je? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Uvod Webová počítačová grafika SVG Zhrnutie Vektorová grafika Počítačová grafika Rastrová grafika Vektorová grafika Vektorový obrázok je zložený zo základných geometrických útvarov: • bod • priamka • krivka • mnohouholnik Tomáš Zubčák SVG Uvod Webová počítačová grafika SVG Zhrnutie Výhody a nevýhody Počítačová grafika Rastrová grafika Vektorová grafika Výhody: • ľubovoľné zmenšovanie a zväčšovanie obrázku bez straty kvality » objekty na obrázku môžu byť nezávislé - dá sa s nimi pracovať oddelene Nevýhody: • pri zložitejších obrázkoch tiež velké nároky na zdroje -hlavne pamäť a procesor • zložitejšie vytvorenie obrázku než pri bitmapovej grafike Tomáš Zubčák SVG Úvod Webová počítačová gratika SVG Zhrnutie Outline 0 Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika £ Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG 0 SVG • Čotoje? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Úvod Webová počítačová gratika SVG Zhrnutie web poskytoval hlavne textové informácie - text zaberá menej miesta v súčasnosti snaha o interaktívnejší obsah web stránok -animácie, veľa obrázkov,... Tomáš Zubčák SVG Úvod Webová počítačová gratika SVG Zhrnutie Outline 0 Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika 0 Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG 0 SVG • Čotoje? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Uvod Webová počítačová grafika SVG Zhrnutie HTML5 • rozširujúca špecifikácia jazyka html • ide však aj o kombináciu html + css + JavaScript • pridaná podpora pre Canvas a svg • veľký dôraz aj na sémantiku Tomáš Zubčák SVG Úvod Webová počítačová grafika Grafika na webe HTMI ^ SVG n i iviLO Zhrnutie oanvas vs. ovci Outline 0 Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika 0 Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG 0 SVG • Čotoje? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Canvas - umožňuje lepšie pracovať s 2D rastrovou grafikou svg - vektorová grafika Tomáš Zubčák SVG Úvod Webová počítačová gratika SVG Zhrnutie 0 Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika 0 Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG O SVG • Čotoje? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Úvod Čo to je? Webová počítačová gratika Ako totunguje? SVG Ako to má pomôcť? Zhrnutie Pár ukážok Scalable Vector Graphics SVG = Scalable Vector Graphics: • Čiže škálovatelná vektorová grafika • popisuje dvojrozmernú statickú a dynamickú (interaktívnu alebo animovanú) vektorovú grafiku • je to značkovací jazyk a formát súboru • aktuálne vo verzii svG l.i Second edition, pracuje sa však už na verzii svg 2. o • Stará sa oň World Wide Web Consortium Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie • formálne je jednou z aplikácií xml - je teda zapísaný ako normálny textový súbor • môže obsahovať aj elementy ktoré nie sú súčasťou výsledného obrázku (spomínaná sémantika) Tomáš Zubčák SVG Úvod Webová počítačová gratika SVG Zhrnutie obrázok, svg Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Pôvodná špecifikácia svg l. i popisuje 14 základných oblastí, ktoré sa dajú použiť v nejakom svg súbore: • paths; basic shapes; text; painting; color; gradients and patterns; clipping, masking and compositing; filter effects; interactivity; linking; scripting; animation; fonts; metadata Tomáš Zubčák SVG Uvod Co to je? Webová počítačová gratika Ako to funguje? SVG Ako to má pomôcť? Zhrnutie Pár ukážok Verzie pre mobilné zariadenia Existujú aj dve verzie špecifikácie, ktoré sú určené pre mobilné zariadenia, u ktorých sa predpokladá nižší výkon: • SVG Tiny • SVG Basic Tomáš Zubčák SVG Úvod Webová počítačová gratika SVG Zhrnutie 0 Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika 0 Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG O SVG • Čo to je? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Keďže SVG súbor je iba text, je na implementácii každého webového prehliadača, ako daný súbor dokáže spracovať a zobraziť na webovej stránke ako obrázok, animáciu, atď. Prvé kroky už v roku 2005 (Firefox); IE však stále zaostáva. Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Google dokáže pri vyhľadávaní a indexovaní obrázkov rozlišovať a spracovávať aj svg súbory (opäť sémantika). Úvod Webová počítačová gratika SVG Zhrnutie 0 Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika 0 Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG O SVG • Čotoje? a Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Accessibility Features of SVG ZO 7. augusta 2000 http://www.w3.org/TR/SVG-acces s/ Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie 0 Úvod • Počítačová grafika • Rastrová grafika • Vektorová grafika 0 Webová počítačová grafika • Grafika na webe • HTML5 • Canvas vs. SVG O SVG • Čotoje? • Ako to funguje? • Ako to má pomôcť? • Pár ukážok Tomáš Zubčák SVG Úvod Webová počítačová grafika SVG Zhrnutie Tiger zoom: http://slides.html5rocks.com/#svg-example-slide Moving graph http: //srufacuity.sru.edu/david.dailey/svg/graphs30.svg Dances http://www.dancekaleidoscope.org.au/dance.html Drawing tool http: //srufacuity.sru.edu/david.dailey/svg/DrawO18.html Video resizing in browser http: / /www. youtube. com/watch?v= Har-PRP4X9U&feature=related Zoom http://srufacuity.sru.edu/david.dailey/svg/ newstuff/zoom.svg EfectS - filters http: / /sruf acuity. sru . edu/david. dailey/ svg/newstuff/fiIterColorMatrixSaturate.svg http://srufacuity.sru.edu/david.dailey/svg/ newstuff/filterColorMatrixMat.svg < □ >