The educational technology and digital learning wiki
Jump to navigation Jump to search

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)


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

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

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

    <svg id="circle" height="100" xmlns="">
      <circle cx="30" cy="30" r="30" fill="green" />



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 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