COAP:COAP-2100/week5

COAP 2100

COAP 2100 Archive

COAP:COAP-2100

COAP:COAP-2100/exams

COAP:COAP-2100/term project

COAP:COAP-2100/week1

COAP:COAP-2100/week2

COAP:COAP-2100/week3

COAP:COAP-2100/week4

COAP:COAP-2100/week5

COAP:COAP-2100/week6

COAP:COAP-2100/week7

COAP:COAP-2100/week8

Week 5

Topics covered

• Static SVG (continued)
• Dynamic SVG

Monday

• Static SVG tutorial (grouping constructs)
• SVG/SMIL animation tutorial
• SVG Essentials/Animating and Scripting SVG
• SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly
• You can find a PDF of an SVG book in the worldclassroom / Documents folder

Simple Motion example using mpath:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>
 
 <rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
       <mpath xlink:href="#path1"/>
    </animateMotion>
   </rect>
 <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
                     52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12" 
                     stroke-width="5" stroke="#000000" fill="none"/>
 </svg>

Simple Motion example using path

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>

 <rect x="15" y="5" rx="5" ry="5" width="20" height="10"  
       style="fill:#CCCCFF;stroke:#000099">
       <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
       path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
              52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
   </rect>
 </svg>

Wednesday

Midterm exam

• Subject area: SVG
• Type of exam: SVG file that you will have to complete according to instructions
• Open book. You may use both print texts and the Internet

Items that may be tested

• SVG embedding in HTML
• Graphic primitives (only the ones shown in my examples): rect, circle, ellipse, line, polyline, polygon and text)
  • Attributes you should know: position and size attributes, opacity, fill and stroke
• Grouping and reusing: Defining an "id", g and use
  • Make sure to master the transform attribute (scaling, rotation, and translation)
• Simple animation: animate
  • Attributes for animate: to, from, values, dur, begin, end, fill, attributeName, xlink:href, repeatCount

Not tested

• The "path" language. However, I may ask you to copy/paste a path from the online SVG-edit tool or change its style (e.g. the color).

Preparation:

Textbook chapters (you can ignore elements that did not present in class)

• http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Basic_Shapes
• http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Document_Structure
• http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG (Only the animate tag, in particular: ignore the scripting)

Important: If you want to print these textbook chapters, use the PDF that is in the Documents folder of the World Classroom. You are allowed to bring it to the exam ....

Wiki pages:

• Using SVG with HTML5 tutorial (mandatory reading, not covered in the text book)
• Static SVG tutorial (read SVG_Essentials/Basic_Shapes and Document_Structure if something is not clear)
• SVG/SMIL animation tutorial (only sections that concern the animate element, read VG_Essentials/Animating_and_Scripting_SVG if something is not clear)

Homework

None for this week. See homework 4, week4