COAP:COAP-2100/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 49: Line 49:


==== Wednesday ====
==== 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 [http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html 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 ====
==== Homework ====

Revision as of 00:56, 10 February 2014

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

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

Homework

None for this week. See homework 4, week4

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week5&oldid=50802"