COAP:COAP-2100/week5: Difference between revisions
Jump to navigation
Jump to search
m (→Wednesday) |
m (→Wednesday) |
||
| Line 58: | Line 58: | ||
Items that may be tested | Items that may be tested | ||
* SVG embedding in HTML | * SVG embedding in HTML | ||
* Graphic primitives (only the ones shown in my examples): rect, circle, ellipse, line, polyline, and | * Graphic primitives (only the ones shown in my examples): '''rect, circle, ellipse, line, polyline''', and '''polygon''') | ||
** Attributes: position and size attributes, opacity, fill and stroke | ** Attributes: 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''' | ||
* 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 | ||
'''Not tested''' | '''Not tested''' | ||
* The "path" language. However, I may ask you | * 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 we have not seen in class) | Preparation: (Textbook chapters, you can ignore elements that we have not seen in class) | ||
| Line 73: | Line 73: | ||
Wiki pages: | Wiki pages: | ||
* [[Using SVG with HTML5 tutorial]] (not covered in the text book) | * [[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) | * [[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) | * [[SVG/SMIL animation tutorial]] (only sections that concern the animate element, read VG_Essentials/Animating_and_Scripting_SVG if something is not clear) | ||
[[Category: COAP_2100]] | [[Category: COAP_2100]] | ||
Revision as of 19:22, 16 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, and polygon)
- Attributes: position and size attributes, opacity, fill and stroke
- Grouping and reusing: Defining an "id", g and use
- 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 we have not seen 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)
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)