Project 4: Creating SVG Logos and Canvas Charts

Scalable Vector Graphics (SVG) and CANVAS are two tools you can use to add illustrations to your HTML5 web sites. In this project you are going to add an SVG logo and a CANVAS-drawn bar chart.

Creating an SVG Logo

First, let’s look at what you are going to create for your logo. Figure 4.1Proj shows the final page with a logo used as a watermark.

The background image is created as a single SVG file. Download the files for this project at www.visualizetheweb.com. The SVG file is called logo.svg. You can, of course, create the logo by following these steps:

  1. Create a new text document and save the file, labeling it “logo.svg.”
  2. Open logo.svg and enter the following Extensible Markup Language ...

Get HTML5, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial