This SVG - Scalable Vector Graphics tutorial uses small tasks as exercises to help you learn how to build images.

In order to get started check out the SVG with JavaScript and/or the SVG in Perl article.

Then you can do the following exercises. I've tried to put them in order of growing complexity. For each task you'll find a (hopefully) reasonable description of what you should do and you will also see the end-result I was expecting. In addition you will find links to the pages where my solutions are presented.

Also see a recommended svg tutorial by Jakob Jenkov.

(This is a first draft of this page, more shapes and more exercises will follow.)

## Basic shapes

### Rectangle

Draw a blue rectangle of 200px width, 100px height.

My solution and more examples for an SVG Rectangle.

### Square

Draw a square of 100px each side. I am not sure. Whatever this color is:

My SVG Square.

### Ellipse

Draw an ellipse.

The SVG Ellipse I managed to create.

### Circle

Draw a nice green circle with 100 px diameter.

The SVG Circle I managed to create.

### Line

Draw a simple red line.

The SVG Line I managed to create.

### X

Draw a huge X. Which are actually just two lines crossing each other.

The SVG X.

### Polyline

The SVG Polyline I managed to create.

### Polygon

The SVG Polygon I managed to create.

### Flag of Hungary

According to Wikipedia and the Wikimedia svg, the Hungarian flag has a 2:1 ratio and the 3 stripes have the following RGB color values: The Red is #CD2A3E, the white is, well, it is white #FFFFFF, and the green is #436F4D.

My drawing of the Hungarian flag.

## Flag of Switzerland

According to the Wikipedia entry, to the Wikimedia svg example and to the CD Bund V7.0 the red colour of the flags is #FF0000, the with of the middle part is 1/5 of the full width, the width of the sides is 1/5 of the full width + 1/6 of the middle width. Which seems to be 0.2 + 0.2 / 6 = 1.4/6 of the full width.

My drawing of the Swiss flag.

## Flag of Greenland

According to the Wikipedia the flag of Greenland is from two colors: white and red (PMS 186C). The size is 18:12 parts. The disk is 8 parts in diameter and its center is 7 parts from one side.

My drawing of the flag of Greenland.