1. Lecture # 11 JavaScript Graphics

2. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG), as the name implies, are - scalable (without pixelation): - composed of vectors: - can be created using HTML and javascript - can be read and displayed by Browsers A B C

3. Scalable Vector Graphics (SVG) Example: Red Circle with black outline

4. Scalable Vector Graphics (SVG) Example: Red Circle with black outline Svg tags

5. Scalable Vector Graphics (SVG) Example: Red Circle with black outline Where to find the description of the svg elements we will be using

6. Scalable Vector Graphics (SVG) Example: Red Circle with black outline The kind of svg we are drawing

7. Scalable Vector Graphics (SVG) Example: Red Circle with black outline Where to draw it (cx,cy) center x and center y.

8. Scalable Vector Graphics (SVG) Example: Red Circle with black outline Radius, r = 40. r

9. Scalable Vector Graphics (SVG) Example: Red Circle with black outline Color of outline of circle

10. Scalable Vector Graphics (SVG) Example: Red Circle with black outline Width of outline of circle

11. Scalable Vector Graphics (SVG) Example: Red Circle with black outline Fill color of circle

12. SVG and XML SVG: Defines graphics in XML format HTML: Designed to display data XML: Designed to transport and store data - the focus is on what data is – it is a data format - XML does not DO anything - XML tags are not predefined – you must define your own tags (or have them defined as in "http://www.w3.org/2000/svg" version="1.1" - XML is designed to be self-descriptive

13. Scalable Vector Graphics (SVG) Example 2: What is it?

14. Scalable Vector Graphics (SVG) Example 2: What is it?

15. Scalable Vector Graphics (SVG) Example 3: What about this?

16. Scalable Vector Graphics (SVG) Example 3: What about this?

17. Scalable Vector Graphics (SVG) Example 4: Or this?

18. Scalable Vector Graphics (SVG) Example 4: Or this?

19. Scalable Vector Graphics (SVG) Example 4: Or this? What does this do?

20. Scalable Vector Graphics (SVG) Example 4: Or this? Defines the radius of the corner rounding

21. Scalable Vector Graphics (SVG) Example 5: Creating a Canvas to draw on: The size of the canvas 600 400

22. Scalable Vector Graphics (SVG) Example 6: Text on a rectangle: The size of the canvas 600 400

23. Scalable Vector Graphics (SVG) Example 5: Rotating a shape: - apply a single attribute to a shape (or group of shapes) Rotate 45 degrees around this center

24. Other shapes, operations See http://www.w3schools.com/svg/default.asphttp://www.w3schools.com/svg/default.asp