Getting Down with ...: Lesson n

We will start off with a blank, minimal .svg image file. This will allow us to work from the ground up building .svg images with a text editor.

Our starter SVG 1.1 image file looks like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    viewBox="0 0 500 500" width="500" height="500" id="starter_svg">

    <!-- Place your SVG elements here... -->

</svg>

When viewed as an image, this will just show a blank screen. However, this starter image includes an svg element with several important attributes:

version: The latest finalized SVG standard.
viewbox: This specifies the dimensions of the visible document. In this case, it begins as a rectangle at the coordinate (0, 0) and ends at the coordinate (500, 500).
width: This specifies the width of the actual document. In this case it is 500 pixels. Pixels are the default unit of measurement, but you can use different units, like 500cm if you want.
height: This specifies the height of the actual document. In this case it is also 500 pixels.
id: This is the label for the .svg.

Beginning with HTML5, you can mix SVG elements into your web pages. In the exercises that follow, you will set up a starter web page to do this.

Exercises:

Create a file named starter.svg containing the starter SVG document from the beginning of this lesson. This is a file which you can copy each time you want to create a new empty SVG.

Create an html document in a file named starter.html with the following content:

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Embedded SVG Starter Document</title>
  <style type="text/css">
  footer {
      text-align: center;
  }
  </style>
  </head>
  <body>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
      viewBox="0 0 500 500" width="500" height="500" id="starter_svg">

      <!-- Place your SVG elements here... -->

  </svg>

  <footer>
  <a href="http://validator.w3.org/check/referer">
  <strong> HTML </strong> Valid! </a> |
  <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">
  <strong> CSS </strong> Valid! </a>
  </footer>
  </body>
  </html>

This is a document which you can copy each time you want to create a new web page with an embedded SVG.

If you have publicly accessible web space to put this file, copy it there. Then view it with a web browser.
Download kjcole_experiment1.svg containing an SVG experiment contributed by Kevin Cole. Load this image file in a viewer, either by clicking on it in a graphical file browser that recognizes svg files or loading it in a program like Inkscape.
Embed this image file in an HTML document (using what you learned in exercise 2). Change the title value to Kevin's First SVG Experiment. Check that your document passes HTML validation.

Lesson n:

Exercises: