COAP:COAP-2100/week4: Difference between revisions
Jump to navigation
Jump to search
m (→Wednesday) |
m (→Wednesday) |
||
| Line 45: | Line 45: | ||
'''Example code that you can copy / paste into an editor''' | '''Example code that you can copy / paste into an editor''' | ||
<source lang="XML"> | <source lang="XML"> | ||
< | <?xml version="1.0"?> | ||
< | <svg xmlns="http://www.w3.org/2000/svg"> | ||
< | <title>Simple animate example</title> | ||
<desc>Rectangle shape will change</desc> | |||
<rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099"> | |||
<animate attributeName="width" from="10px" to="100px" | |||
begin="0s" dur="10s" /> | |||
<animate attributeName="height" from="100px" to="10px" | |||
begin="0s" dur="10s" /> | |||
</rect> | |||
<text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;"> | |||
< | Hello. Admire the dynamic rectangle</text> | ||
</svg> | |||
</ | |||
</ | |||
</source> | </source> | ||
Revision as of 10:34, 11 April 2012
Week 4
Topics covered
- Creating simple static SVG (continued)
- Dynamic SVG (part I, continued on week 5)
Teaching materials, software and reference manuals
- (1) SVG Tutorials
- See SVG for finding online tutorials
- Using SVG with HTML5 tutorial for using SVG (Monday class and homework)
- Static SVG tutorial (grouping constructs)
- SVG/SMIL animation tutorial or 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
- (3) SVG-Edit online software
- svg-edit (Online SVG editor)
- SVG-edit 2.5.1 (stable version, in case the above won't work).
- If you are curious about the "about", follow the links on the svg-edit home page
- (4) Free SVG drawing tools you can install on your computer
- Inkscape Powerful, but more difficult drawing tool (export as "pure" SVG before pasting into HTML5)
- DIA, a popular open source diagramming tool can import/export SVG (Win/Mac/Linux). There are also portable app (Windows) and zip versions
- (5) Free SVG clipart
- Open Clip Art Library (openclipart.org)
Classroom activities
- No Monday class
Wednesday
- Discussion about the mid-term exam (Wed week 5)
- Demo of the Inkscape SVG editor (editing the XML)
- The Eisenberg SVG essentials book (SVG Essentials, wiki version)
- Static SVG continued (parts of the Static SVG tutorial)
- SVG/SMIL animation tutorial
- https://developer.mozilla.org/en/SVG (reference)
Example code that you can copy / paste into an editor
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<title>Simple animate example</title>
<desc>Rectangle shape will change</desc>
<rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
<animate attributeName="width" from="10px" to="100px"
begin="0s" dur="10s" />
<animate attributeName="height" from="100px" to="10px"
begin="0s" dur="10s" />
</rect>
<text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
Hello. Admire the dynamic rectangle</text>
</svg>
Homework 4
- Create an HTML5+SVG page with some interesting contents
- You may copy/paste from the text from some other source under the condition that do not violate any copyright and that you cite the source.
- You may keep the HTML very simple (ie. only use h1 and p tags)
- Add illustrations made with SVG. You must at least create two simple animations. You are allowed to copy/paste free SVG code, e.g. from openclipart.org or you can draw them yourself.
- Submit the file to the worldclass room.
Main resources:
- Using SVG with HTML5 tutorial
- Static SVG tutorial
- SVG/SMIL animation tutorial or SVG Essentials/Animating and Scripting SVG
Due: Wednesday week 5 (before start of class)