COAP:COAP-2100/week5: Difference between revisions
Jump to navigation
Jump to search
m (→Wednesday) |
m (→Wednesday) |
||
| Line 59: | Line 59: | ||
* SVG embedding in HTML | * SVG embedding in HTML | ||
* Graphic primitives (only the ones shown in my examples): '''rect, circle, ellipse, line, polyline''', '''polygon''' and '''text''') | * Graphic primitives (only the ones shown in my examples): '''rect, circle, ellipse, line, polyline''', '''polygon''' and '''text''') | ||
** Attributes: position and size attributes, opacity, fill and stroke | ** Attributes you should know: position and size attributes, opacity, fill and stroke | ||
* Grouping and reusing: '''Defining an "id"''', '''g''' and '''use''' | * Grouping and reusing: '''Defining an "id"''', '''g''' and '''use''' | ||
** Make sure to master the ''transform'' attribution (scaling, rotation, and translation) | |||
* Simple animation: '''animate''' | * Simple animation: '''animate''' | ||
** Attributes for animate: to, from, values, dur, begin, end, fill, attributeName, xlink:href, repeatCount | ** Attributes for animate: to, from, values, dur, begin, end, fill, attributeName, xlink:href, repeatCount | ||
Revision as of 12:53, 17 April 2012
Week 5
Topics covered
- Dynamic SVG (part II, continued)
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 attribution (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