">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Lecture # 11 JavaScript Graphics. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG), as the name implies, are - scalable (without pixelation):

Similar presentations


Presentation on theme: "Lecture # 11 JavaScript Graphics. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG), as the name implies, are - scalable (without pixelation):"— Presentation transcript:

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

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

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


Download ppt "Lecture # 11 JavaScript Graphics. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG), as the name implies, are - scalable (without pixelation):"

Similar presentations


Ads by Google