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.

Slightly more advanced tasks

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.

Other