scalable vector graphics · scalable vector graphics (svg) 1 fall 2017 cs 4460 before d3 html css...
TRANSCRIPT
![Page 1: SCALABLE VECTOR GRAPHICS · SCALABLE VECTOR GRAPHICS (SVG) 1 Fall 2017 CS 4460 BEFORE D3 HTML CSS DOM Javascript SVG 2. 9/24/17 2 Fall 2017 CS 4460 LAB 2 3 HTML CSS DOM Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062415/5fdcce77307ccf4c0a2ad417/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 GRAPHICS · SCALABLE VECTOR GRAPHICS (SVG) 1 Fall 2017 CS 4460 BEFORE D3 HTML CSS DOM Javascript SVG 2. 9/24/17 2 Fall 2017 CS 4460 LAB 2 3 HTML CSS DOM Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062415/5fdcce77307ccf4c0a2ad417/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 GRAPHICS · SCALABLE VECTOR GRAPHICS (SVG) 1 Fall 2017 CS 4460 BEFORE D3 HTML CSS DOM Javascript SVG 2. 9/24/17 2 Fall 2017 CS 4460 LAB 2 3 HTML CSS DOM Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062415/5fdcce77307ccf4c0a2ad417/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 GRAPHICS · SCALABLE VECTOR GRAPHICS (SVG) 1 Fall 2017 CS 4460 BEFORE D3 HTML CSS DOM Javascript SVG 2. 9/24/17 2 Fall 2017 CS 4460 LAB 2 3 HTML CSS DOM Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062415/5fdcce77307ccf4c0a2ad417/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 GRAPHICS · SCALABLE VECTOR GRAPHICS (SVG) 1 Fall 2017 CS 4460 BEFORE D3 HTML CSS DOM Javascript SVG 2. 9/24/17 2 Fall 2017 CS 4460 LAB 2 3 HTML CSS DOM Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062415/5fdcce77307ccf4c0a2ad417/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