COAP:COAP-2100/week4

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Week 4

Topics covered

  • Introduction to static SVG
  • Using SVG within HTML5
  • Dynamic SVG (if time left, more on week 5)
  • Recall of XML principles (well-formed XML)


Monday

Example HTML5/SVG code that you can copy/paste into an editor

<!doctype html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>
    <h1>HTML5 SVG Demo</h1>
    <p> A nice green circle:</p>

    <svg id="circle" height="100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="30" cy="30" r="30" fill="green" />
    </svg>

  </body>
</html>


Wednesday

Homework 4

  • Create an HTML5+SVG page. It must include interesting contents and illustrations.
    • You may copy/paste from some other sources 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)
  • You are allowed to copy/paste free SVG images, e.g. from openclipart.org or you can draw them yourself.
  • Submit the file to the worldclass room.

HTML5 code fragment

<img height="100" src="my_sushi.svg" style="float:left;padding:5px 20px 5px 0px;">

Main resources:

Due: Wednesday week 5 (before start of class)

Teaching materials, software, and reference manuals

(1) SVG Tutorials
(2) HTML Tutorials (if needed)
(3) SVG-Edit online software
(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