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"
<svg width="100%" height="100%" version="1.1"
<rect width="300" height="100" fill="blue"/>
1) Save this as "example1.svg".
Change the file so that the blue rectangle is a bit further
in the middle of the page.
The first 5 lines of the example should not be changed.
You can find details on the basic shapes
(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" />
<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
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
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:
echo '<?xml version="1.0" standalone="no"?>';
This should be followed by the DOCTYPE and the svg tags as
in the previous examples.
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.
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:
- identify photo.jpg
- identify -format "%m" photo.jpg
- identify -format "%w %h" photo.jpg
- identify -format "%[EXIF:DateTimeOriginal]\n" photo.jpg
- identify -format "%f %[EXIF:DateTimeOriginal]\n" photo.jpg
- identify -format "%[EXIF:Model]\n" photo.jpg
- convert photo.jpg photo.gif
- convert -resize 100 photo.jpg photoreduced.jpg
- convert photo.jpg -resize 16x16! favicon.bmp
5 Other graphics software
Have a look at the examples and demos on the following websites.
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
- Is it vector graphics or raster graphics? In case of vector graphics:
is it a general program or is it for drawing graphs?
- What programming language is used?
- Is it client-side or serve-side?
- How could each tool be used in combination with PHP and a database?
- Name one possible application for each of the tools.