0.1 Exercises

Try the HTML image map provided in the lecture.

1 SVG - Scalable Vector Graphics

SVG is an XML-based, W3C approved graphics standard. It facilitates creation of vector graphics which can be incorporated into HTML files. All modern browsers support SVG.

Below is an example of an SVG file, which draws a blue rectangle. 

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg width="100%" height="100%" version="1.1" 
xmlns="http://www.w3.org/2000/svg"> 

<rect width="300" height="100" fill="blue"/> 

</svg>

1.1 Exercises

1) Save this as "example1.svg". Change the file so that the blue rectangle is a bit further in the middle of the page.
Hints: The first 5 lines of the example should not be changed. You can find details on the basic shapes here. (Don't read that whole page. Scroll down until you find an example of the shape you are looking for.)

2) Add a green circle and a yellow star to the example.

3) Add some text.

2 Embedding SVG into an HTML file

An SVG image can be embedded into an HTML page using either the <embed> or the <object> tag. 
<embed src="example.svg" type="image/svg+xml" width="400" height="300" />
Or: 
<object data="example.svg" type="image/svg+xml" width="400" height="300" />
Browsers need to create scrollbars for large SVG images. Some browsers have problems with that. Creating a large object area will force the browser to produce adequate scrollbars: 
<object data="example.svg" type="image/svg+xml" width="200%" height="200%" />
In general, there can be incompatibilities between different browsers and different operating systems. Not all advanced features may work on all browsers.

2.1 Exercise

4) Create an HTML page which contains one of the images you created above.

3 Producing SVG from a script

The advantage of using a script is that SVG code can be dynamically generated.

In PHP:

PHP has a package for producing SVG images (XML_SVG package). But it is not necessary to use this package for basic SVG files. Even without using the XML_SVG package, any PHP script can produce SVG. It is important that the header says "image/svg+xml" at the very beginning of the file: 
<?php
  header('Content-Type: image/svg+xml');
  echo '<?xml version="1.0" standalone="no"?>';
?>
This should be followed by the DOCTYPE and the svg tags as in the previous examples.

3.1 Exercise

5) Create a form which asks a user for a colour and write a script that generates an SVG response page which shows a circle in that colour.

4 Using ImageMagick

On Unix (Mac or Linux), ImageMagick tends to be pre-installed or easy to install. There is a version of ImageMagick installed with MoWes, but it is not so easy to use a command-line on Windows. Thus you could skip this section, if you are not working on a Unix machine.

Download a photograph and save it under the name "photo.jpg". ImageMagick can be used to print metadata for this photograph or to convert it into a different format.

4.1 Exercises

6) Print all of the metadata of the image file (identify -verbose photo.jpg).

7) Print selected values of the metadata. Try these:

8) Convert the file into other formats or sizes. Try these:

5 Other graphics software

Have a look at the examples and demos on the following websites. Have a look at these Javascript examples. Have a look at the source code for some of them. Thanks to powerful libraries, the code for some of these examples is quite simple. Choose one, store the page on your computer and make some modifications to it. You can find the libraries by looking at the "<script src=".

5.1 Exercises

7) For Graphviz, TouchGraph, Canvas Demo, Dracula, Raphael Charts, Javascript Charts and Javascript 3D-Graphics determine the following: