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 <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

4. Scalable Vector Graphics (SVG) Example: Red Circle with black outline <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> Svg tags

5. Scalable Vector Graphics (SVG) Example: Red Circle with black outline <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> Where to find the description of the svg elements we will be using

6. Scalable Vector Graphics (SVG) Example: Red Circle with black outline <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> The kind of svg we are drawing

7. Scalable Vector Graphics (SVG) Example: Red Circle with black outline <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> Where to draw it (cx,cy) center x and center y.

8. Scalable Vector Graphics (SVG) Example: Red Circle with black outline <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> Radius, r = 40. r

9. Scalable Vector Graphics (SVG) Example: Red Circle with black outline <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> Color of outline of circle

10. Scalable Vector Graphics (SVG) Example: Red Circle with black outline <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> Width of outline of circle

11. Scalable Vector Graphics (SVG) Example: Red Circle with black outline <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> 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: <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> What is it?

14. Scalable Vector Graphics (SVG) Example 2: <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> What is it?

15. Scalable Vector Graphics (SVG) Example 3: <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/> What about this?

16. Scalable Vector Graphics (SVG) Example 3: <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/> What about this?

17. Scalable Vector Graphics (SVG) Example 4: <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> Or this?

18. Scalable Vector Graphics (SVG) Example 4: <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> Or this?

19. Scalable Vector Graphics (SVG) Example 4: <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> Or this? What does this do?

20. Scalable Vector Graphics (SVG) Example 4: <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> 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) <rect x="150" y="50" width="50" height="50" transform="rotate(45 175 75)"/> Rotate 45 degrees around this center

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