SCALABLE VECTOR GRAPHICSstasko/4460/Notes/lab2.pdf9/24/17 4 Fall 2017 CS 4460 WHY USE SVG? •...
Transcript of SCALABLE VECTOR GRAPHICSstasko/4460/Notes/lab2.pdf9/24/17 4 Fall 2017 CS 4460 WHY USE SVG? •...
![Page 1: SCALABLE VECTOR GRAPHICSstasko/4460/Notes/lab2.pdf9/24/17 4 Fall 2017 CS 4460 WHY USE SVG? • Infinitepossibilities,limitedonlybyyourimagination 7 (last link in Additional Reading](https://reader033.fdocuments.in/reader033/viewer/2022041707/5e458e71e16e7765d371b780/html5/thumbnails/1.jpg)
9/24/17
1
Fall 2017 CS 4460
SCALABLE VECTOR GRAPHICS(SVG)
1
Fall 2017 CS 4460
BEFORE D3
HTML
CSS
DOM
Javascript
SVG
2
![Page 2: SCALABLE VECTOR GRAPHICSstasko/4460/Notes/lab2.pdf9/24/17 4 Fall 2017 CS 4460 WHY USE SVG? • Infinitepossibilities,limitedonlybyyourimagination 7 (last link in Additional Reading](https://reader033.fdocuments.in/reader033/viewer/2022041707/5e458e71e16e7765d371b780/html5/thumbnails/2.jpg)
9/24/17
2
Fall 2017 CS 4460
LAB 2
3
HTML
CSS
DOM
Javascript
SVG
Fall 2017 CS 4460
WHY USE SVG?
• Resolution Independent
4
![Page 3: SCALABLE VECTOR GRAPHICSstasko/4460/Notes/lab2.pdf9/24/17 4 Fall 2017 CS 4460 WHY USE SVG? • Infinitepossibilities,limitedonlybyyourimagination 7 (last link in Additional Reading](https://reader033.fdocuments.in/reader033/viewer/2022041707/5e458e71e16e7765d371b780/html5/thumbnails/3.jpg)
9/24/17
3
Fall 2017 CS 4460
WHY USE SVG?
• Reduces HTTP Request Time (meaning, your page will load faster!)
• SVG is a subtype of HTML - therefore it loads with the rest of the page
• Images require additional requests from the client
• Styling
• Because SVG is an HTML/DOM element we can style them with CSS - this isvery helpful when styling similar marks in visualizations
5
Fall 2017 CS 4460
WHY USE SVG?
• Scripting
• Most importantly for us, we can run JavaScript to modify, add, animate, etc.any of the SVG elements in the DOM
• Interaction
• SVG elements support a lot of the interaction events that other HTMLelements support (e.g. click, hover, etc.)
6
![Page 4: SCALABLE VECTOR GRAPHICSstasko/4460/Notes/lab2.pdf9/24/17 4 Fall 2017 CS 4460 WHY USE SVG? • Infinitepossibilities,limitedonlybyyourimagination 7 (last link in Additional Reading](https://reader033.fdocuments.in/reader033/viewer/2022041707/5e458e71e16e7765d371b780/html5/thumbnails/4.jpg)
9/24/17
4
Fall 2017 CS 4460
WHY USE SVG?
• Infinite possibilities, limited only by your imagination
7
https://www.visualcinnamon.com(last link in Additional Reading for Lab 2)
Fall 2017 CS 4460
LAB PROCEDURE
Before Class
• Read second half of Chapter 3 - Interactive Data Visualization for the Webby Scott Murray
• Read: Understanding SVG Coordinate Systems and Transformations(Parts 1 + 2) by Sara Soueidan
• Git pull example code (https://github.gatech.edu/CS-4460/Labs.git)
In-Class
• Open Lab 2 instruction page (https://github.gatech.edu/CS-4460/Labs/wiki)
• Work through activities
After Class
• If you run out of time, finish all lab activities
• Lab Solutions will be posted Monday nights
8
![Page 5: SCALABLE VECTOR GRAPHICSstasko/4460/Notes/lab2.pdf9/24/17 4 Fall 2017 CS 4460 WHY USE SVG? • Infinitepossibilities,limitedonlybyyourimagination 7 (last link in Additional Reading](https://reader033.fdocuments.in/reader033/viewer/2022041707/5e458e71e16e7765d371b780/html5/thumbnails/5.jpg)
9/24/17
5
Fall 2017 CS 44609
https://github.gatech.edu/CS-4460/Labs.git
Options to Git Pull
Select the “Sync” button on Mac. Select the “Pull origin” button on Windows.
Open a new Terminal (Mac) or Command Prompt (Windows)Navigate to directory you want to clone to, for example:cd ~\Documents\CS-4460\git pull
Mac Windows