Exercise 1: SVG

Start with this simple HTML5 webpage, save it as svg.html

<!DOCTYPE html>
<html>   
 <head>
  <meta charset="utf-8">
  <title>SVG's The One For Me!</title>
 </head>
 <body>
  
 </body>
</html>

Embedding SVG

Find an SVG file from OpenClipart.org and save it into your project folder.
Embed the SVG file into your page using the <object> or <img> tag.

Inline SVG

Now, copy the smiley face SVG from the first slide an put it directly on your page.
Modify the smiley SVG to look more like you - change the colors of the eyes and skin to your color. Try to give yourself a hat or beret!

Using SVG in CSS

Create a logo for your webpage using SVG-edit online. Save the SVG into a file with .svg extension.
Create a DIV at the top of your webpage, and use CSS to set the SVG file as the background for that DIV.
Bonus: If you have an actual website, now do the same for your real site!

Using SVG Libraries

Download the gRaphael charting library into your project folder and make a script tag pointing to it in your webpage.
Use the library to make a piechart of how much time you spend doing everything in your life.